import snippets from './snippets';

const PisellTimeRangeDisplayMeta = {
  componentName: 'PisellTimeRangeDisplay',
  title: '时间区间展示',
  category: '通用',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellTimeRangeDisplay',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: '数据',
          tip: '开始时间与结束时间（dayjs 兼容：日期字符串或时间戳）',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'startAt',
            title: {
              label: '开始时间',
              tip: 'startAt | 开始时间，支持 ISO 字符串或时间戳',
            },
            propType: { type: 'oneOfType', value: ['string', 'number'] },
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'endAt',
            title: {
              label: '结束时间',
              tip: 'endAt | 结束时间，支持 ISO 字符串或时间戳',
            },
            propType: { type: 'oneOfType', value: ['string', 'number'] },
            setter: ['StringSetter', 'VariableSetter'],
          },
        ],
      },
      {
        title: {
          label: '布局配置',
          tip: '布局方式与对齐',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            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: 'center',
          },
        ],
      },
      {
        title: {
          label: '字段配置',
          tip: '显示哪些块及顺序（时间区间、日期、星期、持续时长）',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'fields.showTimeRange',
            title: {
              label: '显示时间区间',
              tip: '是否显示时间区间块（HH:mm-HH:mm 或跨天起止）',
            },
            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.showDuration',
            title: {
              label: '显示持续时长',
              tip: '是否显示持续时长块（d h m s）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'fields.fieldOrder',
            title: {
              label: '字段顺序',
              tip: '四类块顺序：time-时间区间 | date-日期 | weekday-星期 | duration-持续时长',
            },
            propType: {
              type: 'arrayOf',
              value: {
                type: 'oneOf',
                value: ['time', 'date', 'weekday', 'duration'],
              },
            },
            setter: 'JsonSetter',
          },
          {
            name: 'showDateForSameDay',
            title: {
              label: '同一天显示日期',
              tip: '同一天时是否显示具体日期与星期',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
        ],
      },
      {
        title: {
          label: '时间格式',
          tip: '时间区间内时间的显示格式',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'timeFormat.use12Hour',
            title: { label: '12小时制', tip: '是否使用12小时制' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'timeFormat.showSeconds',
            title: { label: '显示秒', tip: '是否显示秒' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'timeFormat.padHour',
            title: { label: '小时补零', tip: '小时是否补零' },
            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.shortMonth',
            title: { label: '月份简写', tip: '英文月份简写（Mar）' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            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: '持续时长（d h m s）的显示选项',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'durationFormat.showSeconds',
            title: {
              label: '显示秒',
              tip: '持续时长是否显示秒（默认否）',
            },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: '高级与样式',
          tip: '语言与样式配置',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'locale',
            title: {
              label: '语言',
              tip: 'dayjs locale（如：zh-cn, en）',
            },
            propType: 'string',
            setter: [
              {
                componentName: 'SelectSetter',
                props: {
                  options: [
                    { title: '中文', value: 'zh-cn' },
                    { title: 'English', value: 'en' },
                  ],
                },
              },
              'StringSetter',
              'VariableSetter',
            ],
          },
          {
            name: 'containerStyle',
            title: { label: '容器样式', tip: '背景、圆角、边框、padding、gap' },
            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: 'durationStyle',
            title: { label: '持续时长样式', tip: '字号、粗细、颜色等' },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'className',
            title: { label: '样式类名', tip: '自定义类名' },
            propType: 'string',
            setter: 'StringSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
          template:
            "onClick(${extParams}){\n// 点击组件时的回调\nconsole.log('onClick');}",
        },
      ],
    },
    component: {},
  },
};

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