import { AntdIconSetter } from '../../../materials/lowcode/_setters';
import {
  IPublicTypeComponentMetadata,
  IPublicTypeFieldConfig,
  IPublicTypeSnippet,
} from '@alilc/lowcode-types';

import {
  getVariantPropConfig,
  getPresetVariantPropConfig,
  VALID_VARIANT_MAP,
  PRESET_VARIANT_MAP,
} from './utils';

export const SelectorPropsConfig: IPublicTypeFieldConfig[] = [
  // 基础配置
  {
    name: 'id',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Group ID',
        'zh-CN': '分组ID',
      },
      tip: '分组唯一标识符',
    },
    isRequired:true,
    setter: [
      'StringSetter',
      'NumberSetter'
    ]
  },
  {
    name: 'title',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Group Title',
        'zh-CN': '分组标题',
      },
    },
    setter: 'StringSetter',
  },
  // 数据源配置
  {
    name: 'dataSource',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Data Source',
        'zh-CN': '数据源',
      },
      tip: '选项列表数据',
    },
    setter: 'JsonSetter',
  },
  // 值控制
  {
    name: 'value',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Value',
        'zh-CN': '当前值',
      },
      tip: '支持单值、数组或复合对象',
    },
    setter: 'JsonSetter',
  },
  {
    name: 'defaultValue',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Default Value',
        'zh-CN': '默认值',
      },
    },
    setter: 'JsonSetter',
  },
  {
    name: 'valueType',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Value Type',
        'zh-CN': '值类型',
      },
      tip: 'primitive返回原始值，object返回包含数量等信息的复合对象',
    },
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          { title: '原始值', value: 'primitive' },
          { title: '对象值', value: 'object' },
        ],
      },
      initialValue: 'primitive',
    },
  },
  // 模式配置
  {
    name: 'mode',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Selection Mode',
        'zh-CN': '选择模式',
      },
    },
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          { title: '单选', value: 'single' },
          { title: '多选', value: 'multiple' },
        ],
      },
      initialValue: 'single',
    },
  },
  {
    name: 'itemLayout',
    title: '选项布局',
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          { title: '水平', value: 'horizontal' },
          { title: '垂直', value: 'vertical' },
        ],
      },
      initialValue: 'horizontal',
    },
    extraProps: {
      setValue(target: any, value: any) {
        // itemLayout变动时，如果当前的variant在垂直模式下不支持，则设置为默认
        const _variant = target.parent.getPropValue('variant');
        const validVariants = VALID_VARIANT_MAP[value as string];
        let _newVariant = _variant;
        if (!validVariants.includes(_variant as string)) {
          _newVariant = validVariants[0];
        }
        // 如果variant变动，则设置为新的variant
        if (_newVariant !== _variant) {
          target.parent.setPropValue('variant', _newVariant);
        }
        // 同时检查preset.variant是否支持，如果不支持，则设置为默认
        const _presetVariant = target.parent.getPropValue('preset.variant');
        let _variantWithLayout =
          'card' === _newVariant ? `${_newVariant}|${value}` : _newVariant;
        const validPresetVariants =
          PRESET_VARIANT_MAP[_variantWithLayout as string];
        if (!validPresetVariants.includes(_presetVariant as string)) {
          target.parent.setPropValue('preset.variant', validPresetVariants[0]);
        }
        const _origin__designMode_flag__ = target.parent.getPropValue(
          '__designMode_flag__'
        );
        target.parent.setPropValue(
          '__designMode_flag__',
          !_origin__designMode_flag__
        );
        return value;
      },
    },
  },
  // 交替展示，实现组件重新渲染效果
  getVariantPropConfig(
    (t) => t.parent.getPropValue('itemLayout') === 'horizontal'
  ),
  getVariantPropConfig(
    (t) => t.parent.getPropValue('itemLayout') !== 'horizontal'
  ),
  // 使用虚拟属性，实现组件重新渲染效果
  getPresetVariantPropConfig(
    (t) => !t.parent.getPropValue('__designMode_flag__')
  ),
  getPresetVariantPropConfig(
    (t) => !!t.parent.getPropValue('__designMode_flag__')
  ),
  {
    name: '__designMode_flag__',
    title: '设计模式标志',
    condition: (t) => false,
    setter: 'BoolSetter',
    defaultValue: false,
  },
  {
    name: 'disabled',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Disabled',
        'zh-CN': '禁用状态',
      },
    },
    setter: 'BoolSetter',
    defaultValue: false,
  },
  {
    name: 'preserve',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Preserve',
        'zh-CN': '保留状态',
      },
    },
    setter: 'BoolSetter',
    defaultValue: false,
  },
  {
    name: 'fieldNames',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Field Names',
        'zh-CN': '字段名映射',
      },
      tip: '自定义label和value字段名',
    },
    setter: {
      componentName: 'JsonSetter',
    },
  },
  // 校验规则配置
  {
    name: 'ruleConfig',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Rule Config',
        'zh-CN': '校验规则',
      },
    },
    setter: {
      componentName: 'JsonSetter',
    },
  },
  // 网格布局配置
  {
    name: 'layout',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Layout',
        'zh-CN': '布局',
      },
    },
    setter: {
      componentName: 'JsonSetter',
    },
  },
  // 选项样式配置
  {
    name: 'itemProps',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Item Card Props',
        'zh-CN': '选项卡属性',
      },
    },
    setter: {
      componentName: 'JsonSetter',
    },
  },
  {
    name: 'renderItem',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Render Item',
        'zh-CN': '渲染选项',
      },
    },
    setter: [
      {
        componentName: 'SlotSetter',
        initialValue: {
          params: ['renderProps'],
          type: 'JSSlot',
          value: [],
        },
        defaultValue: null,
      },
      'FunctionSetter',
    ],
  },
  // 标题配置
  {
    name: 'headerProps',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Header Props',
        'zh-CN': '头部配置',
      },
    },
    setter: {
      componentName: 'JsonSetter',
    },
  },
  {
    name: 'theme',
    title: {
      label: {
        type: 'i18n',
        'en-US': 'Theme',
        'zh-CN': '主题',
      },
    },
    setter: {
      componentName: 'JsonSetter',
    },
  }
];

const SelectorMeta: IPublicTypeComponentMetadata = {
  componentName: 'Selector',
  title: 'Selector',
  category: '表单',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/private-materials',
    version: '1.0.0',
    exportName: 'Selector',
    main: 'src/index.ts',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: SelectorPropsConfig,
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(value,${extParams}){ console.log('onChange', value); }",
        },
        {
          name: 'onClear',
          template: "onClear(${extParams}){ console.log('onClear'); }",
        },
      ],
    },
    component: {},
  },
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: 'Selector',
    screenshot: '',
    schema: {
      componentName: 'Selector',
      props: {
        id: 'selector1',
        title: '选择器1',
        mode: 'single',
        valueType: 'primitive',
        variant: 'default',
        preset: {
          variant: '1',
        },
        dataSource: [
          { label: '选项1', value: 'option1' },
          { label: '选项2', value: 'option2' },
          { label: '选项3', value: 'option3' },
        ],
        preserve: false,
        disabled: false,
        renderItem: {
          type: 'JSSlot',
          params: ['renderProps'],
          value: [
            {
              componentName: 'Selector.Item',
              props: {
                type: 'JSExpression',
                value: 'this.renderProps',
                mock: '主按钮',
              },
            },
          ],
        },
      },
    },
  },
];

export default {
  ...SelectorMeta,
  snippets,
};