import { css } from "@emotion/css";
import { useForm } from "@formily/react";
import { useCollectionManager } from "../../collection-manager";
import { useCollectionFilterOptions } from "../../collection-manager/action-hooks";

export const collection = {
  type: 'string',
  title: '{{t("Collection")}}',
  name: 'config.collection',
  required: true,
  'x-reactions': ['{{useCollectionDataSource()}}'],
  'x-decorator': 'FormItem',
  'x-component': 'Select',
};

export const values = {
  type: 'object',
  title: '{{t("Form values")}}',
  name: 'config.params.values',
  'x-decorator': 'FormItem',
  'x-decorator-props': {
    labelAlign: 'left',
    className: css`
      flex-direction: column;
    `
  },
  'x-component': 'CollectionFieldset'
};

export const filter = {
  type: 'object',
  title: '{{t("Filter")}}',
  name: 'config.params.filter',
  'x-decorator': 'FormItem',
  'x-decorator-props': {
    labelAlign: 'left',
    className: css`
      flex-direction: column;
    `
  },
  'x-component': 'Filter',
  'x-component-props': {
    useProps() {
      const { values } = useForm();
      const options = useCollectionFilterOptions(values.config?.collection);
      return {
        options,
        className: css`
          position: relative;
          width: 100%;
        `
      };
    },
    dynamicComponent: 'VariableComponent'
  }
};
