import { createVisualConfig, ElementType } from './ReactVisualEditor.utils';
import { Button, Input, Select } from 'antd';
import React from 'react';
import {
  createColorProp,
  createSelectProp,
  createTableProp,
  createTextProp,
  createTextareaProp,
} from './ReactVisualEditor.props';
import { NumberRange } from './NumberRange/NumberRange';
import {
  ActiveRingChart,
  ScrollRankingBoard,
  BorderBox1,
  BorderBox3,
  BorderBox11,
  Decoration2,
  Decoration5,
  Decoration8,
  Decoration9,
} from '@jiaminghi/data-view-react';
import {
  EchartsRadar,
  EchartsBar,
  EchartsLine,
  EchartsPie,
  EchartsGauge,
} from './Echarts';
import {
  optionLine,
  optionPie,
  optionRadar,
  optionBar,
  optionGauge,
  option,
} from './defaultOption';
import deepcopy from 'deepcopy';
import { ScrollBoardPost ,AlignType} from './ScrollTable';
export const visualConfig = createVisualConfig();
const styleClass = {
  fontSize: '20px',
  backgroundColor: '#f2f2f2',
  color: '#ccc',
  display: 'inline-flex',
  width: '150px',
  height: '160px',
  alignItems: 'center',
  justifyContent: 'center',
};
const previewStyle = {
  width: '150px',
  height: '100px',
};
const baseSize={
  heigth:'200px',
  width:'200px'
}
visualConfig.registryComponent('text', {
  name: '文本',
  type: ElementType.BASE_ELEMENT,
  preview: () => <span style={{color:'#fff',fontSize:'15px'}}>预览文本</span>,
  render: ({ props }) => (
    <span style={{ color: !props.color ? '#fff' : props.color.hex, fontSize: props.size }}>
      {props.text || '渲染文本'}
    </span>
  ),
  props: {
    text: createTextProp('显示文本'),
    color: createColorProp('字体颜色'),
    size: createSelectProp('字体大小', [
      { label: '14px', value: '14px' },
      { label: '18px', value: '18px' },
      { label: '24px', value: '24px' },
      { label: '36px', value: '36px' },
    ]),
  },
});

visualConfig.registryComponent('button', {
  name: '按钮',
  type: ElementType.BASE_ELEMENT,
  preview: () => <Button type="primary">预览的按钮</Button>,
  render: ({ size, props, custom }) => (
    <Button type={props.type || 'primary'} size={props.size} style={size} {...custom}>
      {props.label || '渲染的按钮'}
    </Button>
  ),
  resize: {
    width: true,
    height: true,
  },
  props: {
    label: createTextProp('按钮文本'),
    type: createSelectProp('按钮类型', [
      { label: '默认', value: 'default' },
      { label: '基础', value: 'primary' },
      { label: '线框', value: 'ghost' },
      { label: '虚线', value: 'dashed' },
      { label: '链接', value: 'link' },
      { label: '文本', value: 'text' },
    ]),
    size: createSelectProp('按钮大小', [
      { label: '大', value: 'large' },
      { label: '中', value: 'middle' },
      { label: '小', value: 'small' },
    ]),
  },
});

// visualConfig.registryComponent('input', {
//   name: '输入框',
//   type: ElementType.BASE_ELEMENT,
//   preview: () => <Input />,
//   render: ({ size, model, custom }) => (
//     <Input style={size} value={model.default.value} onChange={model.default.onChange} {...custom} />
//   ),
//   resize: {
//     width: true,
//   },
//   model: {
//     default: '绑定字段',
//   },
// });

// visualConfig.registryComponent('select', {
//   name: '下拉框',
//   type: ElementType.BASE_ELEMENT,
//   preview: () => (
//     <Select>
//       <Select.Option value={123}>蛋糕</Select.Option>
//     </Select>
//   ),
//   render: ({ props, size, model, custom }) => (
//     <Select
//       value={model.default.value}
//       onChange={model.default.onChange}
//       {...custom}
//       style={{
//         width: size.width || '225px',
//       }}
//       key={(props.options || [])
//         .map(({ label, val }: { label: string; val: string }) => `${label}_${val}`)
//         .join('.')}
//     >
//       {(props.options || []).map((opt: any, index: number) => (
//         <Select.Option value={opt.val} key={index}>
//           {opt.label}
//         </Select.Option>
//       ))}
//     </Select>
//   ),
//   resize: {
//     width: true,
//   },
//   props: {
//     options: createTableProp('下拉选项', 'label', [
//       { name: '选项显示值', field: 'label' },
//       { name: '选项值', field: 'val' },
//       { name: '备注', field: 'comments' },
//     ]),
//   },
//   model: {
//     default: '绑定字段',
//   },
// });

// visualConfig.registryComponent('number-range', {
//   name: '绑定多个字段',
//   type: ElementType.BASE_ELEMENT,
//   resize: {
//     width: true,
//   },
//   render: ({ model, size, block }) => {
//     return (
//       <NumberRange
//         key={(() => {
//           const model = block.model || {};
//           return (model.start || '@@start') + (model.end || '@@end');
//         })()}
//         width={size.width}
//         {...{
//           start: model.start.value,
//           onStartChange: model.start.onChange,
//           end: model.end.value,
//           onEndChange: model.end.onChange,
//         }}
//       />
//     );
//   },
//   preview: () => (
//     <div style={{ textAlign: 'center' }}>
//       <NumberRange width={'100%'} />
//     </div>
//   ),
//   model: {
//     start: '起始输入框绑定字段',
//     end: '结尾输入框绑定字段',
//   },
// });

/* visualConfig.registryComponent('image', {
  name: '图片',
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ height: size.height || '100px', width: size.width || '100px' }}
        className="visual-block-image"
      >
        <img
          src={props.url || 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'}
          style={{
            objectFit: 'fill',
            display: 'block',
            height: '100%',
            width: '100%',
          }}
        />
      </div>
    );
  },
  preview: () => (
    <div style={styleClass}>
      <PictureOutlined />
    </div>
  ),
  props: {
    url: createTextProp('地址'),
  },
}); */

// visualConfig.registryComponent('ActiveRingChart', {
//   name: '环形图',
//   type: ElementType.ECHARTS_ELEMENT,
//   resize: {
//     width: true,
//     height: true,
//   },
//   render: ({ model, size, block }) => {
//     const config = {
//       data: [
//         {
//           name: '周口',
//           value: 55,
//         },
//         {
//           name: '南阳',
//           value: 120,
//         },
//         {
//           name: '西峡',
//           value: 78,
//         },
//         {
//           name: '驻马店',
//           value: 66,
//         },
//         {
//           name: '新乡',
//           value: 80,
//         },
//       ],

//       digitalFlopStyle: {
//         // fontSize: height > width ? width / 10 : height / 10,
//         fill: '#aaa',
//       },
//     };
//     return (
//       <div
//         style={{ height: size?.height || '200px', width: size?.width || '200px' }}
//         className="visual-block-image"
//       >
//         <ActiveRingChart
//           key={`${size?.height}${size?.width}`}
//           config={config}
//           style={{
//             height: size?.height || '200px',
//             width: size?.width || '200px',
//           }}
//         />
//       </div>
//     );
//   },
//   preview: () => {
//     const config = {
//       data: [
//         {
//           name: '周口',
//           value: 55,
//         },
//         {
//           name: '南阳',
//           value: 120,
//         },
//         {
//           name: '西峡',
//           value: 78,
//         },
//         {
//           name: '驻马店',
//           value: 66,
//         },
//         {
//           name: '新乡',
//           value: 80,
//         },
//       ],
//       digitalFlopStyle: {
//         fontSize: 25,
//         fill: '#aaa',
//       },
//     };
//     return (
//       <div style={styleClass}>
//         <ActiveRingChart config={config} style={previewStyle} />
//       </div>
//     );
//   },
//   model: {
//     config: '配置config',
//   },
// });
visualConfig.registryComponent('ScrollRankingBoard', {
  name: '排名轮播表',
  type: ElementType.TABLE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size, block }) => {
    const config = {
      unit:props.unit||'个',
      rowNum:props.rowNum||4,
      data: [
        {
          name: '周口',
          value: 55,
        },
        {
          name: '南阳',
          value: 120,
        },
        {
          name: '西峡',
          value: 78,
        },
        {
          name: '驻马店',
          value: 66,
        },
        {
          name: '新乡',
          value: 80,
        },
        {
          name: '信阳',
          value: 45,
        },
        {
          name: '漯河',
          value: 29,
        },
      ],
    };
    return (
      <div
        style={{ height: size.height || '300px', width: size.width || '500px' }}
        className="visual-block-image"
      >
        <ScrollRankingBoard
          config={config}
          style={{
            height: size.height || '300px',
            width: size.width || '500px',
          }}
        />
      </div>
    );
  },
  preview: () => {
    const config = {
      data: [
        {
          name: '周口',
          value: 55,
        },
        {
          name: '南阳',
          value: 120,
        },
      ],
    };
    return (
      <div style={styleClass}>
        <ScrollRankingBoard config={config} style={previewStyle} />
      </div>
    );
  },
  props:{
    dataUrl:createTextProp('数据连接'),
    unit:createTextProp('单位'),
    rowNum:createTextProp('显示行数'),
    jumpUrl:createTextProp('跳转地址'),

  }

});
visualConfig.registryComponent('ScrollBoard', {
  name: '轮播表',
  type: ElementType.TABLE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size, block }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '300px', width: size.width || '500px' }}
        className="visual-block-image"
      >
      
        <ScrollBoardPost config={{
          align:props.align,
          columnWidth:props.columnWidth,
          header:props.header
        }} dataUrl={props.dataUrl}size={size} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <ScrollBoardPost size={previewStyle} />
      </div>
    );
  },
  props: {
    dataUrl: createTextProp('配置数据地址'),
    jumpUrl: createTextProp('跳转到其他页面数据地址'),
    align: createSelectProp('对齐方式',function():{label:string,value:string}[]{
        let list:{label:string,value:string}[]=[]
          for(let key in AlignType){
            list.push({
              label:key,
              value: key
            })
          }
      return list;
    }() ), //对齐方式
    header: createTableProp('表头名称','点击查看',[{name:'列名称',field:'value'},{name:'列宽(px)',field:'widthValue'}]), //横向表头
  },
});
visualConfig.registryComponent('BorderBox1', {
  name: '边框1',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '300px', width: size.width || '500px' }}
        className="visual-block-image"
      >
        <BorderBox1 title={props.title || '暂无标题'} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <BorderBox1 style={previewStyle} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('BorderBox3', {
  name: '边框3',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '300px', width: size.width || '500px' }}
        className="visual-block-image"
      >
        <BorderBox3 style={{ height: size.height || '300px', width: size.width || '500px' }} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <BorderBox3 style={previewStyle} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('BorderBox11', {
  name: '边框11',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ height: size.height || '300px', width: size.width || '500px' }}
        className="visual-block-image"
      >
        <BorderBox11
          title={props.title || '暂无标题'}
          style={{
            zIndex: 0,
            height: size.height || '300px',
            width: size.width || '500px',
          }}
        />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <BorderBox11 style={previewStyle} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('lineEcharts', {
  name: 'lineEcharts',
  type: ElementType.ECHARTS_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{
          zIndex: 0,
          height: size?.height || '200px',
          width: size?.width || '200px',
        }}
        className="visual-block-image"
      >
        <EchartsLine
          option={deepcopy(optionLine)}
          size={{height:size.height||baseSize.heigth,width:size.width||baseSize.width}}
          parameter={{ title: props.title, dataUrl: props.dataUrl,titleColor:props.titleColor }}
        />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <EchartsLine option={deepcopy(option)} size={previewStyle} />
      </div>
    );
  },
  props: {
    dataUrl: createTextProp('配置dataUrl(https)'),
    title: createTextProp('标题(title)'),
    titleColor: createColorProp('标题颜色)'),
    titleFontSize:createTextProp('标题字体大小'),
    jumpUrl: createTextProp('跳转到其他页面数据地址'),
  },
});
visualConfig.registryComponent('pieEcharts', {
  name: 'pieEcharts',
  type: ElementType.ECHARTS_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '200px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <EchartsPie
          option={deepcopy(optionPie)}
         size={{height:size.height||baseSize.heigth,width:size.width||baseSize.width}}
          parameter={{ title: props.title, dataUrl: props.dataUrl }}
        />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <EchartsPie option={deepcopy(optionPie)} size={previewStyle} />
      </div>
    );
  },
  props: {
    dataUrl: createTextProp('配置dataUrl(https)'),
    title: createTextProp('标题(title)'),
    themeColor: createTextProp('color'),
    params: createTextProp('请求参数(params)'),
    option: createTextareaProp('配置option'),
    jumpUrl: createTextProp('跳转到其他页面数据地址'),
  },
});
visualConfig.registryComponent('radarEcharts', {
  name: 'radarEcharts',
  type: ElementType.ECHARTS_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '200px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <EchartsRadar
          option={deepcopy(optionRadar)}
         size={{height:size.height||baseSize.heigth,width:size.width||baseSize.width}}
          parameter={{
            title: props.title,
          }}
        />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <EchartsRadar option={deepcopy(optionRadar)} size={previewStyle} />
      </div>
    );
  },
  props: {
    dataUrl: createTextProp('配置dataUrl(https)'),
    title: createTextProp('标题(title)'),
    params: createTextProp('请求参数(params)'),
    jumpUrl: createTextProp('跳转到其他页面数据地址'),
  },
});
visualConfig.registryComponent('barEcharts', {
  name: 'barEcharts',
  type: ElementType.ECHARTS_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '200px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <EchartsBar
          option={deepcopy(optionBar)}
         size={{height:size.height||baseSize.heigth,width:size.width||baseSize.width}}
          parameter={{ title: props.title, dataUrl: props.dataUrl }}
        />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <EchartsBar option={deepcopy(optionBar)} size={previewStyle} />
      </div>
    );
  },
  props: {
    dataUrl: createTextProp('配置dataUrl(https)'),
    title: createTextProp('标题(title)'),
    params: createTextProp('请求参数(params)'),
    jumpUrl: createTextProp('跳转到其他页面数据地址'),
  },
});
visualConfig.registryComponent('gaugeEcharts', {
  name: 'gaugeEcharts',
  type: ElementType.ECHARTS_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '200px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <EchartsGauge
          option={deepcopy(optionGauge)}
          size={{height:size.height||baseSize.heigth,width:size.width||baseSize.width}}
          parameter={{ title: props.title, dataUrl: props.dataUrl }}
        />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <EchartsGauge option={deepcopy(optionGauge)} size={previewStyle} />
      </div>
    );
  },
  props: {
    dataUrl: createTextProp('配置dataUrl(https)'),
    title: createTextProp('标题(title)'),
    params: createTextProp('请求参数(params)'),
    themeColor: createTextProp('themeColor'),
    jumpUrl: createTextProp('跳转到其他页面数据地址'),
  },
});
visualConfig.registryComponent('Decoration2', {
  name: '水平线条',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '5px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <Decoration2 style={{ width: size.width || '200px' }} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <Decoration2 style={{ ...previewStyle, height: '5px' }} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('Decoration2-rev', {
  name: '竖直线条',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '5px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <Decoration2 reverse={true} style={{ height: size.height || '200px' }} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <Decoration2 reverse={true} style={{ ...previewStyle, height: '150px' }} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('Decoration5', {
  name: '装饰5',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '40px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <Decoration5 reverse={true} style={{ height: size.height || '200px' }} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <Decoration5 reverse={true} style={{ ...previewStyle, height: '150px' }} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('Decoration9', {
  name: '装饰9',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '100px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <Decoration9 reverse={true} style={{ height: size.height || '200px' }} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <Decoration9 reverse={true} style={{ ...previewStyle, height: '150px' }} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('Decoration8', {
  name: '装饰8',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '100px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <Decoration8 style={{ height: size.height || '200px' }} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <Decoration8 style={{ ...previewStyle, height: '150px' }} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});
visualConfig.registryComponent('Decoration8-right', {
  name: '装饰8右',
  type: ElementType.DECORATE_ELEMENT,
  resize: {
    width: true,
    height: true,
  },
  render: ({ props, size }) => {
    return (
      <div
        style={{ zIndex: 0, height: size.height || '100px', width: size.width || '200px' }}
        className="visual-block-image"
      >
        <Decoration8 reverse={true} style={{ height: size.height || '200px' }} />
      </div>
    );
  },
  preview: () => {
    return (
      <div style={styleClass}>
        <Decoration8 reverse={true} style={{ ...previewStyle, height: '150px' }} />
      </div>
    );
  },
  props: {
    title: createTextProp('标题'),
  },
});