import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { IPublicTypeSnippetMore } from '../_base';

const YwDetailInfoMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwDetailInfo',
  title: 'YwDetailInfo',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '基础组件',
  category: '页面模块',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.0.1-beta.7',
    exportName: 'YwDetailInfo',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'title',
        title: { label: '小标题', tip: 'title | 小标题' },
        setter: {
          componentName: 'StringSetter',
          isRequired: false,
          initialValue: '',
        },
      },
      {
        title: { label: '标题尺寸', tip: 'size | 标题尺寸' },
        name: 'size',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: 's',
                value: 's',
              },
              {
                label: 'm',
                value: 'm',
              },
              {
                label: 'l',
                value: 'l',
              },
            ],
          },
          initialValue: 'm',
        },
      },
      {
        name: 'subtitle',
        title: { label: '副标题', tip: 'subtitle | 副标题' },
        setter: [
          {
            componentName: 'StringSetter',
            isRequired: false,
            initialValue: '',
          },
          {
            componentName: 'SlotSetter',
            isRequired: false,
            initialValue: {
              type: 'JSSlot',
              value: [],
            },
          },
        ],
      },
      {
        title: { label: '数据源', tip: 'dataSource | 数据源' },
        name: '_dataSource',
        setter: {
          componentName: 'FunctionSetter',
        },
        // extraProps: {
        //   setValue: (target, value) => {
        //     const dataSource = getPropValueWithPath(target, '.dataSource');
        //   },
        // },
      },
      {
        title: { label: '数据展示', tip: 'dataSource | 数据展示' },
        name: 'dataSource',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    descriptor: 'label',
                    config: {
                      items: [
                        {
                          title: { label: '名称', tip: 'label | 名称' },
                          name: 'label',
                          setter: {
                            componentName: 'StringSetter',
                            isRequired: true,
                            initialValue: '',
                          },
                        },
                        {
                          title: { label: '值', tip: 'value | 值' },
                          name: 'value',
                          supportVariable: false,
                          setter: {
                            componentName: 'MixedSetter',
                            props: {
                              setters: ['VariableSetter'],
                            },
                          },
                        },
                        {
                          title: { label: '列数', tip: 'span | 列数' },
                          name: 'span',
                          setter: {
                            componentName: 'SelectSetter',
                            props: {
                              options: [
                                {
                                  label: '一行三列',
                                  value: 8,
                                },
                                {
                                  label: '一行四列',
                                  value: 6,
                                },
                                {
                                  label: '一行六列',
                                  value: 3,
                                },
                              ],
                            },
                            initialValue: undefined,
                          },
                        },
                        {
                          title: { label: '是否展示', tip: 'visible | 是否展示' },
                          name: 'visible',
                          setter: {
                            componentName: 'BoolSetter',
                            isRequired: false,
                            initialValue: true,
                          },
                        },
                        {
                          title: { label: '长文本收起', tip: 'hasMore | 超长文案收起' },
                          name: 'hasMore',
                          setter: {
                            componentName: 'BoolSetter',
                            isRequired: false,
                            initialValue: false,
                          },
                        },
                        {
                          title: { label: '自定义标签', tip: 'renderLabel | 自定义标签' },
                          name: 'renderLabel',
                          setter: {
                            componentName: 'FunctionSetter',
                            isRequired: false,
                          },
                        },
                        {
                          title: { label: '自定义值', tip: 'renderValue | 自定义值' },
                          name: 'renderValue',
                          setter: {
                            componentName: 'SlotSetter',
                            title: '自定义值',
                            initialValue: {
                              type: 'JSSlot',
                              params: ['value'],
                              value: [],
                            },
                          },
                        },
                      ],
                      extraSetter: {
                        componentName: 'MixedSetter',
                        isRequired: false,
                        props: {},
                      },
                    },
                  },
                },
              },
              initialValue: [],
            },
          },
          initialValue: [],
        },
        extraProps: {
          setValue: (target, value) => {
            const isDeep = (arr) => arr.some((item) => item instanceof Array);
            if (isDeep(value)) {
              target.parent.setPropValue('dataSource', value);
              return;
            }
            const arr = value
              .map((v) => {
                const _arr = [];
                Object.values(v).forEach((item) => _arr.push(item));
                return _arr;
              })
              .filter((v) => !!v.length);
            target.parent.setPropValue('dataSource', arr);
          },
        },
        // condition: (target) => !!getPropValueWithPath(target, '._dataSource'),
      },
    ],
    supports: {
      style: true,
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: IPublicTypeSnippetMore[] = [
  {
    title: '详情信息',
    svgId: 'icon-xiangqingxinxi',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/basicInfo',
    schema: {
      componentName: 'YwDetailInfo',
      props: {
        title: '基本信息',
        subtitle: '信息描述',
        style: { width: '100%' },
        dataSource: [
          [
            {
              label: '平台类型',
              value: '快手小店',
            },
            {
              label: '平台店铺',
              value: '李宣卓的小店',
            },
            {
              label: '平台单号',
              value: '4454353425436546546',
              span: 8,
            },
            {
              label: '支付时间',
              value: '2022-06-09 23:55:55',
            },
          ],
        ],
      },
    },
  },
];

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