import snippets from './snippets';

const PisellTimeNavigatorMeta = {
  componentName: 'PisellTimeNavigator',
  title: '时间导航轴',
  category: '数据录入',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellTimeNavigator',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: { label: '数据与状态', tip: '当前时间、受控/非受控、实时模式' },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'value',
            title: {
              label: '当前时间',
              tip: '受控时的选中时间，支持 HH:mm 或 dayjs 可解析字符串',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'defaultValue',
            title: { label: '默认时间', tip: '非受控时的初始选中时间' },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'referenceDate',
            title: {
              label: '锚定日历日',
              tip: '刻度相对于该日 0 点；可传可解析日期字符串，不传默认当天',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'realtime',
            title: { label: '实时模式', tip: 'value 自动跟随系统当前时间更新' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: {
          label: '时间范围与刻度',
          tip: '单日范围、步长、营业时间、禁用区间',
        },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'range',
            title: {
              label: '时间范围',
              tip: '单日内范围，如 { start: "00:00", end: "24:00" }，不传默认全天',
            },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'stepMinutes',
            title: { label: '吸附步长(分钟)', tip: '如 15、30、60' },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 15,
          },
          {
            name: 'majorStepMinutes',
            title: { label: '大刻度间隔(分钟)', tip: '整点刻度间隔，默认 60' },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
            defaultValue: 60,
          },
          {
            name: 'businessHours',
            title: {
              label: '营业时间',
              tip: '视觉高亮区间，如 { start: "10:00", end: "23:00" }',
            },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'disabledRanges',
            title: {
              label: '禁用时间段',
              tip: '禁止选中的区间数组，如 [{ start: "00:00", end: "08:00" }]',
            },
            propType: 'array',
            setter: 'JsonSetter',
          },
        ],
      },
      {
        title: { label: '模式与方向', tip: '指示器/轴移动模式、横向/竖向' },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'cursorMode',
            title: {
              label: '指示器模式',
              tip: 'axis-moves=指示器固定视口中央刻度动，cursor-moves=刻度固定指示器动',
            },
            propType: {
              type: 'oneOf',
              value: ['axis-moves', 'cursor-moves'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '轴动(指示器固定)', value: 'axis-moves' },
                    { title: '指针动', value: 'cursor-moves' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'axis-moves',
          },
          {
            name: 'orientation',
            title: { label: '方向', tip: '横向或竖向展示' },
            propType: {
              type: 'oneOf',
              value: ['horizontal', 'vertical'],
            },
            setter: [
              {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    { title: '横向', value: 'horizontal' },
                    { title: '竖向', value: 'vertical' },
                  ],
                },
              },
              'VariableSetter',
            ],
            defaultValue: 'horizontal',
          },
          {
            name: 'horizontalAxisCellSizePx',
            title: {
              label: '横向轴每格宽度(px)',
              tip:
                '仅 axis-moves 横向生效；不设则 82。cursor-moves 时由视口自动压缩，此项无效',
            },
            propType: 'number',
            setter: ['NumberSetter', 'VariableSetter'],
          },
        ],
      },
      {
        title: { label: '交互开关', tip: 'Now 按钮、吸附、惯性滚动' },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'showNowButton',
            title: { label: '显示 Now 按钮', tip: '是否显示「现在」固定入口' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: true,
          },
          {
            name: 'snapToStep',
            title: { label: '吸附到刻度', tip: '是否吸附到 step 刻度' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
          {
            name: 'inertia',
            title: { label: '惯性滚动', tip: '拖动松手后减速滚动' },
            propType: 'bool',
            setter: ['BoolSetter', 'VariableSetter'],
            defaultValue: false,
          },
        ],
      },
      {
        title: { label: '样式', tip: '过去时间淡化、容器/刻度/气泡/Now 样式' },
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'pastTimeFade',
            title: { label: '过去时间淡化色', tip: 'CSS 颜色值' },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'containerStyle',
            title: { label: '容器样式', tip: '容器样式覆盖' },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'scaleStyle',
            title: { label: '刻度层样式', tip: '刻度层样式覆盖' },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'cursorStyle',
            title: { label: '指示器样式', tip: '时间气泡/竖线样式覆盖' },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'nowButtonStyle',
            title: { label: 'Now 按钮样式', tip: 'Now 按钮样式覆盖' },
            propType: 'object',
            setter: 'JsonSetter',
          },
          {
            name: 'className',
            title: { label: '样式类名', tip: '自定义类名' },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
          },
          {
            name: 'style',
            title: { label: '根节点样式', tip: '根节点自定义样式' },
            propType: 'object',
            setter: 'JsonSetter',
          },
        ],
      },
      {
        title: { label: '国际化与格式', tip: 'locale、时间气泡格式' },
        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' },
                    { title: '繁中', value: 'zh-hk' },
                  ],
                },
              },
              'StringSetter',
              'VariableSetter',
            ],
          },
          {
            name: 'timeFormat',
            title: {
              label: '时间格式',
              tip: '气泡时间展示格式，dayjs format，默认 HH:mm',
            },
            propType: 'string',
            setter: ['StringSetter', 'VariableSetter'],
            defaultValue: 'HH:mm',
          },
          {
            name: 'renderNowButton',
            title: { label: '自定义 Now 按钮', tip: '覆盖默认 Now 按钮内容' },
            propType: { type: 'oneOfType', value: ['node', 'function'] },
            setter: 'SlotSetter',
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(value,${extParams}){\n// 时间变更回调，value 为 dayjs 实例\nconsole.log('onChange', value);}",
        },
      ],
    },
    component: {},
  },
};

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