import * as React from 'react';
import { formilyReact } from '@cainiaofe/cn-ui';
import { CnFormArrayCardProps } from '@/form/cn-form-array-card';
const { useField, observer, useFieldSchema } = formilyReact;

export const CnFormArrayCard: React.FC<CnFormArrayCardProps> = observer(
  (props) => {
    const { autoIncrementTitle, additionText, hasDeleteButton } = props;
    const field = useField();
    const schema = useFieldSchema();
    const tableProperties = {};

    React.useEffect(() => {
      field.setComponent('CnArrayTable');

      if (autoIncrementTitle) {
        tableProperties.index = {
          type: 'void',
          'x-component': 'CnArrayTableColumn',
          'x-component-props': {
            width: 120,
            title: autoIncrementTitle,
            align: 'center',
          },
          properties: {
            index: {
              type: 'void',
              'x-component': 'CnArrayTableIndex',
            },
          },
        };
      }

      schema.items.mapProperties((propertyItem) => {
        tableProperties[propertyItem.name + 'column'] = {
          type: 'void',
          'x-component': 'CnArrayTableColumn',
          'x-component-props': {
            title: propertyItem.title,
          },
          properties: {
            [propertyItem.name]: {
              'x-decorator': propertyItem['x-decorator'],
              'x-component': propertyItem['x-component'],
              'x-component-props': propertyItem['x-component-props'],
            },
          },
        };
      });

      if (hasDeleteButton) {
        tableProperties.operation = {
          type: 'void',
          'x-component': 'CnArrayTableColumn',
          'x-component-props': {
            width: 120,
          },
          properties: {
            item: {
              type: 'void',
              'x-component': 'CnFormItem',
              properties: {
                remove: {
                  type: 'void',
                  'x-component': 'CnArrayTableRemove',
                },
              },
            },
          },
        };
      }

      schema.setItems({
        type: 'object',
        properties: tableProperties,
      });

      if (additionText) {
        schema.setProperties({
          add: {
            type: 'void',
            title: additionText,
            'x-component': 'CnArrayTableAddition',
          },
        });
      }
    }, [field, schema, additionText, autoIncrementTitle]);

    return <div />;
  },
);

CnFormArrayCard.displayName = 'CnFormArrayCard';

CnFormArrayCard.defaultProps = {
  hasDeleteButton: true,
};