// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import pakageJson from '../../package.json';

const tempOption = {
  "title": {
    "text": "ECharts 入门示例"
   },
  "tooltip": {},
  "xAxis": {
    "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
  },
  "yAxis": {},
  "series": [
    {
      "name": "销量",
      "type": "bar",
      "data": [ 5, 20, 36, 10, 10,20]
    }
  ]
};

const EchartsMeta: IPublicTypeComponentMetadata = {
  componentName: 'Echarts',
  title: 'Echarts图表',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'web-sdk-editor-material',
    version: pakageJson.version,
    exportName: 'Echarts',
    main: '',
    destructuring: true,
    subName: '',
  },
  category: '基础',
  group: 'Echarts图表',
  configure: {
    props: [
      {
        title: '是否嵌入卡片内',
        name: 'hasCard',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '是',
                value: true,
              },
              {
                label: '否',
                value: false,
              },
            ],
          },
          defaultValue: false,
        },
      },
      {
        title: '卡片标题',
        name: 'title',
        condition: (target) => {
          return !!target.getProps().getPropValue('hasCard');
        },
        setter: {
          componentName: 'StringSetter',
          props: {
            placeholder: '请输入卡片标题',
          },
        },
      },
      {
        title: '是否展示边框',
        name: 'borderd',
        condition: (target) => {
          return !!target.getProps().getPropValue('hasCard');
        },
        setter: {
          componentName: 'BoolSetter',
          defaultValue: false,
        },
      },
      {
        name: 'option',
        title: 'option配置',
        condition: (target) => {
          return !target.getProps().getPropValue('functionOption');
        },
        setter: {
          componentName: 'JsonSetter',
          defaultValue: tempOption,
        },
      },
      {
        name: 'customOption',
        title: '自定义option配置',
        setter: {
          componentName: 'FunctionSetter',
          props: {
            template: "({ echarts }) {\n     return {};\n  }",
          },
        },
      },
    ],
    supports: {
      style: true,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: 'Echarts图表',
    screenshot: '',
    schema: {
      componentName: 'Echarts',
      props: {
        "title": "我是卡片标题",
        borderd: false,
        option: tempOption
      }
    },
  },
];

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