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

import { DataVStatistic } from '../data-v-statistic/meta';

export const TargetProps = [
  {
    title: {
      label: {
        type: 'i18n',
        'en-US': 'title',
        'zh-CN': '标题',
      },
      tip: 'title | 标题',
    },
    name: 'title',
    description: '标题',
    setter: [
      {
        componentName: 'I18nSetter',
      },
      {
        componentName: 'SlotSetter',
        props: {
          mode: 'node',
        },
        isRequired: true,
        initialValue: {
          type: 'JSSlot',
          value: [],
        },
      },
    ],
    isRequired: true,
  },
  {
    title: {
      label: {
        type: 'i18n',
        'en-US': 'value',
        'zh-CN': '值',
      },
      tip: 'value | 值',
    },
    name: 'value',
    description: '值',
    setter: 'StringSetter',
    isRequired: true,
  },
  // 公用统计数值
  ...DataVStatistic.configure?.props.filter((e) => e.name !== 'title' && e.name !== 'value'),
];

export const ProgressProps = [
  {
    name: 'type',
    title: { label: '类型', tip: '类型' },
    propType: { type: 'oneOf', value: ['line', 'circle', 'dashboard'] },
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          { title: '线型', value: 'line' },
          { title: '圆型', value: 'circle' },
          { title: '仪表盘', value: 'dashboard' },
        ],
      },
    },
    defaultValue: 'line',
  },
  {
    name: 'width',
    title: '宽度',
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        precision: 0,
      },
    },
    condition(target) {
      // 除线型有效
      return target.getProps().getPropValue('type') !== 'line';
    },
  },
  {
    name: 'format',
    title: { label: '内容格式', tip: '内容格式' },
    propType: 'func',
    setter: 'FunctionSetter',
  },
  {
    name: 'percent',
    title: { label: '百分比', tip: '百分比' },
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        precision: 0,
      },
    },
  },
  {
    name: 'showInfo',
    title: { label: '显示数值或图标', tip: '显示数值或图标' },
    propType: 'bool',
    setter: {
      componentName: 'BoolSetter',
    },
    defaultValue: false,
  },
  {
    name: 'status',
    title: { label: '状态', tip: '状态' },
    propType: {
      type: 'oneOf',
      value: ['success', 'exception', 'normal', 'active'],
    },
    setter: {
      componentName: 'SelectSetter',
      props: {
        hasClear: true,
        options: [
          { label: 'success', value: 'success' },
          { label: 'exception', value: 'exception' },
          { label: 'normal', value: 'normal' },
          { label: 'active', value: 'active' },
        ],
      },
    },
  },
  {
    name: 'steps',
    title: { label: '总步数', tip: '进度条总共步数' },
    condition(target) {
      // 仅线型有效
      return target.getProps().getPropValue('type') === 'line';
    },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        precision: 0,
      },
    },
  },
  {
    name: 'strokeLinecap',
    title: { label: '进度条的样式', tip: '进度条的样式' },
    propType: {
      type: 'oneOf',
      value: ['round', 'square'],
    },
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          { title: '圆角', value: 'round' },
          { title: '方角', value: 'square' },
        ],
      },
    },
    defaultValue: 'round',
  },
  {
    name: 'strokeWidth',
    title: { label: '线宽度', tip: '线宽度' },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        precision: 0,
      },
    },
  },
  {
    name: 'strokeColor',
    title: { label: '进度条的颜色', tip: '进度条的颜色' },
    propType: 'string',
    condition(target) {
      // 仪表盘样式无效
      return target.getProps().getPropValue('type') !== 'dashboard';
    },
    setter: 'ColorSetter',
  },
  {
    name: 'trailColor',
    title: {
      label: '未完成的分段的颜色',
      tip: '未完成的分段的颜色',
    },
    propType: 'string',
    setter: 'ColorSetter',
  },
  {
    name: 'gapDegree',
    title: {
      label: '缺口角度',
      tip: '仪表盘进度条缺口角度，可取值 0 ~ 295',
    },
    condition(target) {
      // 仅仪表盘样式有效
      return target.getProps().getPropValue('type') === 'dashboard';
    },
    propType: 'number',
    defaultValue: 75,
  },
  {
    name: 'gapPosition',
    title: {
      label: '缺口位置',
      tip: '仪表盘进度条缺口位置',
    },
    condition(target) {
      // 仅仪表盘样式有效
      return target.getProps().getPropValue('type') === 'dashboard';
    },
    propType: {
      type: 'oneOf',
      value: ['top', 'bottom', 'left', 'right'],
    },
    defaultValue: 'bottom',
  },
];

export const RowProps = [
  {
    name: 'align',
    title: { label: '垂直对齐方式', tip: '垂直对齐方式' },
    propType: { type: 'oneOf', value: ['top', 'middle', 'bottom'] },
    setter: {
      componentName: 'SelectSetter',
      props: {
        hasClear: true,
        options: [
          { label: 'top', value: 'top' },
          { label: 'middle', value: 'middle' },
          { label: 'bottom', value: 'bottom' },
        ],
      },
    },
  },
  {
    name: 'h-gutter',
    title: {
      label: '水平间隔',
      tip: '栅格水平间隔，单位为像素(px)',
    },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
      },
    },
    defaultValue: 0,
    extraProps: {
      getValue(target) {
        const { node } = target;
        const gutter = node.getPropValue('gutter');
        if (typeof gutter === 'number') {
          return gutter;
        } else if (Array.isArray(gutter)) {
          return gutter[0];
        }
        return 0;
      },
      setValue(target, value) {
        const { node } = target;
        const gutter = node.getPropValue('gutter');
        if (Array.isArray(gutter)) {
          gutter[0] = value;
          node.setPropValue('gutter', gutter);
        } else {
          node.setPropValue('gutter', [value, 0]);
        }
      },
    },
  },
  {
    name: 'v-gutter',
    title: {
      label: '垂直间隔',
      tip: '栅格垂直间隔，单位为像素(px)',
    },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
      },
    },
    defaultValue: 0,
    extraProps: {
      getValue(target) {
        const { node } = target;
        const gutter = node.getPropValue('gutter');
        if (typeof gutter === 'number') {
          return 0;
        } else if (Array.isArray(gutter)) {
          return gutter[1];
        }
        return 0;
      },
      setValue(target, value) {
        const { node } = target;
        const gutter = node.getPropValue('gutter');
        if (Array.isArray(gutter)) {
          gutter[1] = value;
          node.setPropValue('gutter', gutter);
        } else {
          node.setPropValue('gutter', [gutter, value]);
        }
      },
    },
  },
  {
    name: 'justify',
    title: { label: '水平排列方式', tip: '水平排列方式' },
    propType: {
      type: 'oneOf',
      value: ['start', 'end', 'center', 'space-around', 'space-between'],
    },
    setter: {
      componentName: 'SelectSetter',
      props: {
        hasClear: true,
        options: [
          { label: 'start', value: 'start' },
          { label: 'end', value: 'end' },
          { label: 'center', value: 'center' },
          { label: 'space-around', value: 'space-around' },
          { label: 'space-between', value: 'space-between' },
        ],
      },
    },
  },
  {
    name: 'wrap',
    title: { label: '自动换行', tip: '是否自动换行' },
    propType: 'bool',
    setter: {
      componentName: 'BoolSetter',
    },
    defaultValue: true,
  },
];

export const ColProps = [
  {
    name: 'span',
    title: { label: '占位格数', tip: '栅格占位格数' },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
    defaultValue: 12,
  },
  {
    name: 'order',
    title: { label: '栅格顺序', tip: '栅格顺序' },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        precision: 0,
      },
    },
  },
  {
    name: 'pull',
    title: { label: '右侧偏移', tip: '栅格往右移动格数' },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
  },
  {
    name: 'push',
    title: { label: '左侧偏移', tip: '栅格往左移动格数' },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
  },
];

export const DataVTargetBlock: IPublicTypeComponentMetadata = {
  componentName: 'DataVTargetBlock',
  title: 'DataVTargetBlock',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  group: '云仓大屏',
  category: '其他',
  npm: {
    package: '@ztocwst/datav-materials',
    version: '0.1.1',
    exportName: 'DataVTargetBlock',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: '对齐方式',
        name: 'align',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: 'top',
                value: 'top',
              },
              {
                label: 'middle',
                value: 'middle',
              },
              {
                label: 'bottom',
                value: 'bottom',
              },
            ],
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'icon',
            'zh-CN': '图标',
          },
          tip: 'icon | 图标',
        },
        name: 'icon',
        description: '图标',
        setter: {
          componentName: 'SlotSetter',
          props: {
            mode: 'node',
          },
          isRequired: false,
          initialValue: {
            type: 'JSSlot',
            value: [],
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'topTarget',
            'zh-CN': 'top指标',
          },
          tip: 'topTarget | top指标',
        },
        name: 'topTarget',
        display: 'accordion',
        description: 'top指标配置',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [...TargetProps],
            },
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'progress',
            'zh-CN': '进度条',
          },
          tip: 'progress | 进度条',
        },
        name: 'progress',
        display: 'accordion',
        description: '进度条配置',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [...ProgressProps],
            },
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'bottomTarget',
            'zh-CN': 'bottom指标',
          },
          tip: 'bottomTarget | bottom指标',
        },
        name: 'bottomTarget',
        display: 'accordion',
        description: 'bottom指标配置',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [...TargetProps],
            },
          },
        },
      },
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'otherTarget',
            'zh-CN': '其他指标',
          },
          tip: 'otherTarget | 其他指标',
        },
        name: 'otherTarget',
        display: 'accordion',
        description: '其他指标配置',
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'row',
                      'zh-CN': '栅格-行',
                    },
                  },
                  name: 'row',
                  display: 'accordion',
                  setter: {
                    componentName: 'ObjectSetter',
                    props: {
                      config: {
                        items: [...RowProps],
                      },
                    },
                  },
                },
                {
                  title: {
                    label: {
                      type: 'i18n',
                      'en-US': 'targets',
                      'zh-CN': '指标',
                    },
                  },
                  name: 'targets',
                  display: 'accordion',
                  setter: {
                    componentName: 'ArraySetter',
                    props: {
                      itemSetter: {
                        componentName: 'ObjectSetter',
                        props: {
                          config: {
                            items: [...ColProps, ...TargetProps],
                          },
                        },
                      },
                    },
                  },
                },
              ],
            },
          },
        },
      },
    ],
    supports: {
      style: true,
    },
    component: {
      // isContainer: true,
    },
  },
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '指标块',
    screenshot: 'https://files.ztocwst.com/download/50f02c38fce149a385079b2d1df71f73?isShow=true',
    schema: {
      componentName: 'DataVTargetBlock',
      props: {
        align: 'top',
        icon: {
          type: 'JSSlot',
          value: [
            {
              componentName: 'Icon',
              props: {
                type: 'icon-weifabaoguo',
                size: 32,
                rotate: 0,
                spin: false,
              },
            },
          ],
        },
        progress: {
          type: 'line',
        },
      },
    },
  },
];

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