import { defineComponent, inject, Ref } from 'vue';

/**
 * 判断当前是否有挂载 filter-second 组件的行为
 */
const Filter = defineComponent({
  inheritAttrs: false,
  setup(props, { slots, attrs }) {
    const filterLeftMounted = inject<Ref<boolean>>('tl-filterLeftMounted')!;
    return () => (
      <div class="table-layout__filter flex">
        {filterLeftMounted.value ? (
          slots.default?.()
        ) : (
          <FilterCore {...attrs} v-slots={slots} />
        )}
      </div>
    );
  }
});

/**
 * 搜索栏核心
 */
const FilterCore = defineComponent({
  setup(props, { slots }) {
    const filterSecondMounted = inject<Ref<boolean>>('tl-filterSecondMounted')!;
    const filterSecondOpen = inject<Ref<boolean>>('tl-filterSecondOpen')!;

    const handleToggle = () => {
      filterSecondOpen.value = !filterSecondOpen.value;
    };

    return () => (
      <a-form layout="inline">
        {slots.default?.()}
        {filterSecondMounted.value ? (
          <a-button onClick={handleToggle}>
            {filterSecondOpen.value ? '收起' : ''}更多条件
          </a-button>
        ) : null}
      </a-form>
    );
  }
});

/**
 * 搜索栏左
 */
const FilterLeft = defineComponent({
  inheritAttrs: false,
  setup(props, { slots, attrs }) {
    const filterLeftMounted = inject<Ref<boolean>>('tl-filterLeftMounted')!;
    filterLeftMounted.value = true;
    return () => (
      <div class="table-layout__filter-left flex-1">
        <FilterCore {...attrs} v-slots={slots} />
      </div>
    );
  }
});

/**
 * 搜索栏右，一般放置一些按钮如：导出
 */
const FilterRight = defineComponent({
  setup(props, { slots }) {
    return () => (
      <div class="table-layout__filter-right ml-[32px]">
        {slots.default?.()}
      </div>
    );
  }
});

export { Filter, FilterLeft, FilterRight };
