import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { IPublicModelSettingField } from '@alilc/lowcode-types';
import { uuid } from '../_utils/utils';

const TabMeta: IPublicTypeComponentMetadata = {
  componentName: 'Tabs',
  title: '选项卡',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '布局',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'Tabs',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: '选项卡项',
        name: 'data',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      title: {
                        label: '标题',
                        tip: '设置选项卡标题',
                      },
                      name: 'title',
                      setter: {
                        componentName: 'StringSetter',
                        isRequired: true,
                        initialValue: '选项卡',
                      },
                    },
                    {
                      name: 'primaryKey',
                      title: '项目编号',
                      condition: () => false,
                      initialValue: (val: string) => {
                        if (val) return val;
                        return uuid();
                      },
                      setter: 'StringSetter',
                      supportVariable: true,
                    },
                    {
                      title: {
                        label: '可关闭',
                        tip: '是否支持可删除',
                      },
                      name: 'closeable',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: false,
                        initialValue: false,
                      },
                    },
                    {
                      title: {
                        label: '禁用',
                        tip: '是否禁用该选项卡',
                      },
                      name: 'disabled',
                      setter: {
                        componentName: 'BoolSetter',
                        isRequired: false,
                        initialValue: false,
                      },
                    },
                  ],
                },
              },
              initialValue: () => {
                return {
                  primaryKey: uuid(),
                  title: '选项卡',
                  closeable: false,
                  disabled: false,
                };
              },
            },
          },
        },
        extraProps: {
          getValue(target: IPublicModelSettingField, value: any) {
            const map =
              value?.map((child) => {
                const primaryKey = child.primaryKey ? String(child.primaryKey) : child.id;
                return {
                  primaryKey,
                  title: child?.title || '无',
                  closeable: child?.closeable || true,
                  disabled: child?.disabled || false,
                };
              }) || [];
            return map;
          },
          setValue(target: IPublicModelSettingField, value: any) {
            const { node } = target;
            const map: Record<string, any> = {};
            if (!Array.isArray(value)) {
              value = [];
            }
            value.forEach((item: any) => {
              const tabitem = Object.assign({}, item);
              map[item.primaryKey] = tabitem;
            });
            node?.children?.mergeChildren(
              (child) => {
                const primaryKey = String(child.getPropValue('primaryKey'));
                if (Object.hasOwnProperty.call(map, primaryKey)) {
                  child.setPropValue('title', map[primaryKey].title);
                  child.setPropValue('closeable', map[primaryKey].closeable);
                  child.setPropValue('disabled', map[primaryKey].disabled);
                  delete map[primaryKey];
                  return false;
                }
                return true;
              },

              () => {
                const items = [];
                for (const primaryKey in map) {
                  if (Object.hasOwnProperty.call(map, primaryKey)) {
                    items.push({
                      componentName: 'Slot',
                      props: map[primaryKey],
                    });
                  }
                }
                return items;
              },
              (child1, child2) => {
                // const a = value.findIndex(
                //   (item: any) => String(item.primaryKey) === String(child1.getPropValue('primaryKey')),
                // );
                // const b = value.findIndex(
                //   (item: any) => String(item.primaryKey) === String(child2.getPropValue('primaryKey')),
                // );
                return 1;
              },
            );
          },
        },
      },
      {
        title: '选项卡配置',
        type: 'group',
        display: 'accordion',
        items: [
          // 尺寸
          {
            title: {
              label: {
                label: '尺寸',
                tip: '设置选项卡尺寸',
              },
            },
            name: 'size',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '小',
                    value: 'small',
                  },
                  {
                    label: '中',
                    value: 'medium',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'small',
            },
          },
          // 溢出效果
          {
            title: {
              label: '溢出效果',
              tip: '设置选项卡选项过多溢出时的处理方式',
            },
            name: 'excessMode',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '滑动',
                    value: 'slide',
                  },
                  {
                    label: '下拉',
                    value: 'dropdown',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'slide',
            },
          },
          // 外形
          {
            title: {
              label: '外形',
              tip: '设置选项卡选项外观形态,包裹型以外的位置只支持顶部和底部',
            },
            name: 'shape',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '文本型',
                    value: 'text',
                  },
                  {
                    label: '普通型',
                    value: 'pure',
                  },
                  {
                    label: '包裹型',
                    value: 'wrapped',
                  },
                  {
                    label: '胶囊型',
                    value: 'capsule',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'pure',
            },
            extraProps: {
              setValue(target: IPublicModelSettingField, value: any) {
                console.log(target, value);
                // 选择非包裹型时,如果位置时左边或者右边,要改为顶部
                const pos = target.parent.getPropValue('tabPosition')
                const blackList = ['left','right']
                if(value!=='wrapped'&&blackList.includes(pos)){
                  console.log('设置为顶部');
                  target.parent.setPropValue('tabPosition','top')
                }
              },
            },
          },
          // 位置
          {
            title: {
              label: '位置',
              tip: '选项卡位置',
            },
            condition: (target) => {
              return target.parent.getPropValue('shape') === 'wrapped';
            },
            name: 'tabPosition',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '顶部',
                    value: 'top',
                  },
                  {
                    label: '底部',
                    value: 'bottom',
                  },
                  {
                    label: '左边',
                    value: 'left',
                  },
                  {
                    label: '右边',
                    value: 'right',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'top',
            },
          },
          {
            title: {
              label: '位置',
              tip: '选项卡位置',
            },
            condition: (target) => {
              return target.parent.getPropValue('shape') !== 'wrapped';
            },
            name: 'tabPosition',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '顶部',
                    value: 'top',
                  },
                  {
                    label: '底部',
                    value: 'bottom',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'top',
            },
          },
          // 触发方式
          {
            title: {
              label: '触发方式',
              tip: '选项卡切换选项触发方式',
            },
            name: 'triggerType',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '移入',
                    value: 'hover',
                  },
                  {
                    label: '点击',
                    value: 'click',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'click',
            },
          },
          // 动效
          {
            title: {
              label: '开启动效',
              tip: '选项切换时是否有动效,动效有性能消耗',
            },
            name: 'animation',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
              initialValue: false,
            },
          },
        ],
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
    },
    advanced: {
      // initialChildren: [
      //   {
      //     componentName: 'Slot',
      //     props: { primaryKey: uuid() },
      //   },
      //   {
      //     componentName: 'Slot',
      //     props: { primaryKey: uuid() },
      //   },
      // ],
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '选项卡',
    screenshot: '',
    schema: {
      componentName: 'Tabs',
      props: {
        data: [
          { primaryKey: uuid(), title: '选项卡一', closeable: true, disabled: false },
          { primaryKey: uuid(), title: '选项卡二', closeable: true, disabled: false },
        ],
      },
    },
  },
];

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