import snippets from './snippets';

const PisellDateTimeDisplayMeta = {
  componentName: 'PisellDateTimeDisplay',
  title: '时间展示',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellDateTimeDisplay',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: '布局配置',
          tip: '配置组件的布局方式和对齐',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'layout',
            title: {
              label: '布局方向',
              tip: '组件的布局方式：horizontal-水平布局 | vertical-垂直布局 | inline-单行布局',
            },
            propType: {
              type: 'oneOf',
              value: ['horizontal', 'vertical', 'inline'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '水平布局',
                      value: 'horizontal',
                    },
                    {
                      title: '垂直布局',
                      value: 'vertical',
                    },
                    {
                      title: '单行布局',
                      value: 'inline',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'horizontal',
          },
          {
            name: 'textAlign',
            title: {
              label: '文本对齐',
              tip: '文本对齐方式',
            },
            propType: {
              type: 'oneOf',
              value: ['left', 'center', 'right'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '左对齐',
                      value: 'left',
                    },
                    {
                      title: '居中',
                      value: 'center',
                    },
                    {
                      title: '右对齐',
                      value: 'right',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'left',
          },
          {
            name: 'inlineSeparator',
            title: {
              label: '单行分隔符',
              tip: '单行模式下字段之间的分隔符',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
            defaultValue: ' · ',
            condition: {
              type: 'JSFunction',
              value:
                'target => target.getProps().getPropValue("layout") === "inline"',
            },
          },
        ],
      },
      {
        title: {
          label: '字段配置',
          tip: '配置显示的字段及其顺序',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'fields.showTime',
            title: {
              label: '显示时间',
              tip: '是否显示时间字段',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'fields.showDate',
            title: {
              label: '显示日期',
              tip: '是否显示日期字段',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'fields.showWeekday',
            title: {
              label: '显示星期',
              tip: '是否显示星期字段',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'fields.fieldOrder',
            title: {
              label: '字段顺序',
              tip: '字段显示的顺序',
            },
            propType: {
              type: 'arrayOf',
              value: {
                type: 'oneOf',
                value: ['time', 'date', 'weekday'],
              },
            },
            setter: 'JsonSetter',
          },
        ],
      },
      {
        title: {
          label: '时间格式',
          tip: '配置时间的显示格式',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'timeFormat.use12Hour',
            title: {
              label: '12小时制',
              tip: '是否使用12小时制（显示AM/PM）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'timeFormat.showSeconds',
            title: {
              label: '显示秒',
              tip: '是否显示秒（开启后刷新间隔为1秒）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'timeFormat.padHour',
            title: {
              label: '小时补零',
              tip: '小时是否补零（如：01:45）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'timeFormat.onlyShowHour',
            title: {
              label: '只显示小时',
              tip: '是否只显示小时（如：13）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: '日期格式',
          tip: '配置日期的显示格式',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'dateFormat.order',
            title: {
              label: '日期顺序',
              tip: '年月日的显示顺序',
            },
            propType: {
              type: 'oneOf',
              value: ['YMD', 'MDY', 'DMY'],
            },
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: '年-月-日',
                      value: 'YMD',
                    },
                    {
                      title: '月-日-年',
                      value: 'MDY',
                    },
                    {
                      title: '日-月-年',
                      value: 'DMY',
                    },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'YMD',
          },
          {
            name: 'dateFormat.showYear',
            title: {
              label: '显示年份',
              tip: '是否显示年份',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'dateFormat.showMonth',
            title: {
              label: '显示月份',
              tip: '是否显示月份',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'dateFormat.showDay',
            title: {
              label: '显示日期',
              tip: '是否显示日期',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'dateFormat.shortMonth',
            title: {
              label: '月份简写',
              tip: '英文月份是否简写（Mar / March）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'dateFormat.numericMonth',
            title: {
              label: '数字月份',
              tip: '英文月份是否用数字展示（03）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'dateFormat.showChineseUnit',
            title: {
              label: '中文单位',
              tip: '中文是否显示"年月日"汉字',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'dateFormat.separator',
            title: {
              label: '分隔符',
              tip: '日期分隔符（如：- 或 /）',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
            defaultValue: '-',
          },
        ],
      },
      {
        title: {
          label: '星期格式',
          tip: '配置星期的显示格式',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'weekdayFormat.full',
            title: {
              label: '完整展示',
              tip: '是否完整展示星期（Saturday / 星期六）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'weekdayFormat.singleLetter',
            title: {
              label: '单字母展示',
              tip: '是否单字母展示星期（S / 六）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: '高级配置',
          tip: '自定义格式化和刷新配置',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'customFormat',
            title: {
              label: '自定义格式',
              tip: '自定义格式化字符串（如：YYYY-MM-DD HH:mm:ss）',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'refreshInterval',
            title: {
              label: '刷新间隔',
              tip: '自动刷新间隔（毫秒）',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
          {
            name: 'disableAutoRefresh',
            title: {
              label: '禁用刷新',
              tip: '是否禁用自动刷新',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'locale',
            title: {
              label: '语言',
              tip: 'dayjs locale（如：zh-cn, en, ja）',
            },
            propType: 'string',
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    {
                      title: '中文',
                      value: 'zh-cn',
                    },
                    {
                      title: 'English',
                      value: 'en',
                    },
                    {
                      title: '日本語',
                      value: 'ja',
                    },
                  ],
                },
              },
              'StringSetter',
              'VariableSetter',
            ],
          },
        ],
      },
      {
        title: {
          label: '样式配置',
          tip: '自定义组件样式',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'containerStyle',
            title: {
              label: '容器样式',
              tip: '容器的样式配置（背景、圆角、边框等）',
            },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'timeStyle',
            title: {
              label: '时间样式',
              tip: '时间文本的样式配置（字号、颜色等）',
            },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'dateStyle',
            title: {
              label: '日期样式',
              tip: '日期文本的样式配置（字号、颜色等）',
            },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'weekdayStyle',
            title: {
              label: '星期样式',
              tip: '星期文本的样式配置（字号、颜色等）',
            },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'className',
            title: {
              label: '样式类名',
              tip: 'className | 自定义样式类名',
            },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
          template:
            "onClick(${extParams}){\n// 点击组件时的回调\nconsole.log('onClick');}",
        },
        {
          name: 'onTimeUpdate',
          template:
            "onTimeUpdate(currentTime,${extParams}){\n// 时间更新时的回调\nconsole.log('onTimeUpdate', currentTime);}",
        },
      ],
    },
    component: {},
  },
};

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