// 列表区可以显示所有的物料
// key对应的组件映射关系
import { ElButton, ElInput,  ElSelect, ElOption, ElDivider } from 'element-plus'
import { VueElement } from 'vue'
import Range from '../components/Range'

export interface IMatreialsComponents {
  label: string
  preview: () => string
  render: ({ props: { size: number, color: string } }) => VueElement
  key: string
  props: any
}

function createEditorConfig() {
  const componentList = []
  const componentMap: {
    [key: string]: IMatreialsComponents
  } = {}

  return {
    componentList,
    componentMap,
    register: component => {
      componentList.push(component)
      componentMap[component.key] = component
    },
  }
}
export type RegisterConfig = ReturnType<typeof createEditorConfig>
export const registerConfig = createEditorConfig()
const createInputProp = label => ({ type: 'input', label })
const createColorProp = label => ({ type: 'color', label })
const createSelectProp = (label, options) => ({ type: 'select', label, options })
const createTableProp = (label, table) => ({ type: 'table', label, table })



registerConfig.register({
  label: '文本',
  preview: () => '预览文本',
  render: ({ props }) => <span style={{ color: props.color, fontSize: props.size }}>{props.text || '渲染文本'}</span>,
  key: 'text',
  props: {
    text: createInputProp('文本内容'),
    color: createColorProp('字体颜色'),
    size: createSelectProp('字体大小',
      [
        { label: '14px', value: '14px' },
        { label: '20px', value: '20px' },
        { label: '24px', value: '24px' },
      ],
    ),
  },
})

registerConfig.register({
  label: '分割线',
  preview: () => <ElDivider style={{ width: '200px' }}>分割线</ElDivider>,
  render: ({ props }) => <ElDivider style={{ width: props.width || '200px' }}>
    <span style={{ color: props.color }}>{props.text}</span>
  </ElDivider>,
  key: 'divider',
  props: {
    text: createInputProp('文本内容'),
    width: createInputProp('宽度'),
    color: createColorProp('字体颜色'),
  },
})

registerConfig.register({
  label: '按钮',
  resize: {
    width: true,
    height: true,
  },
  preview: () => <ElButton>预览按钮</ElButton>,
  render: ({ props, size }) => <ElButton style={{ height: size.height + 'px', width: size.width + 'px' }} type={props.type} size={props.size}>{props.text || '渲染按钮'}</ElButton>,
  key: 'button',
  props: {
    text: createInputProp('按钮内容'),
    type: createSelectProp('按钮类型', [
      { label: '基础', value: 'primary' },
      { label: '成功', value: 'success' },
      { label: '警告', value: 'warning' },
      { label: '危险', value: 'danger' },
      { label: '文本', value: 'text' },
    ]),
    size: createSelectProp('按钮尺寸', [
      { label: '默认', value: '' },
      { label: '中等', value: 'medium' },
      { label: '小', value: 'small' },
      { label: '极小', value: 'mini' },
    ]),
  },
})

registerConfig.register({
  label: '下拉框',
  preview: () => <ElSelect modelValue=""></ElSelect>,
  render: ({ props, model }) => {
    return <ElSelect {...model.default}>
      {(props.options || []).map((opt, index) => {
        return <ElOption label={opt.label} value={opt.value} key={index}></ElOption>
      })}
    </ElSelect>
  },
  key: 'select',
  props: { // [{label:'a',value:'1'},{label:'b',value:2}]
    options: createTableProp('下拉选项', {
      options: [
        { label: '显示值', field: 'label' },
        { label: '绑定值', field: 'value' },
      ],
      key: 'label', // 显示给用户的值 是label值
    }),
  },
  model: { // {default:'username'}
    default: '绑定字段',
  },
})

registerConfig.register({
  label: '输入框',
  resize: {
    width: true, // 更改输入框的横向大小
  },
  preview: () => <ElInput placeholder="预览输入框"></ElInput>,
  render: ({ model, size }) => <ElInput placeholder="渲染输入框" {...model.default} style={{ width: size.width + 'px' }}></ElInput>,
  key: 'input',
  model: { // {default:'username'}
    default: '绑定字段',
  },
})

registerConfig.register({
  label: '范围选择器',
  preview: () => <Range placeholder="预览输入框"></Range>,
  render: ({ model }) => {
    return <Range {...{
      start: model.start.modelValue, // @update:start
      end: model.end.modelValue,
      'onUpdate:start': model.start['onUpdate:modelValue'],
      'onUpdate:end': model.end['onUpdate:modelValue'],
    }}></Range>
  },
  model: {
    start: '开始范围字段',
    end: '结束范围字段',
  },
  key: 'range',
})