import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const advancedSetValue = (field, value, type) => {
  const { node } = field;
  node.setPropValue('advanced', {
    ...node.getPropValue('advanced'),
    [type]: value,
  });
};
const showFixedHeight = (target) => {
  const { openSlot = false } = target.parent.getPropValue('advanced');
  return openSlot;
};
const CodeBlockMeta: IPublicTypeComponentMetadata = {
  componentName: 'CodeBlock',
  title: 'CodeBlock',
  docUrl: '',
  screenshot: '',
  group: '原子组件',
  category: '文字类',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.33',
    exportName: 'CodeBlock',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: '高级设置',
        display: 'block',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        items: [
          {
            name: 'openSlot',
            title: '打开插槽',
            setter: 'BoolSetter',
            getValue: (target) => {
              const advanced = target.parent.getPropValue('advanced');
              return advanced?.openSlot;
            },
            setValue: (field, value) => {
              advancedSetValue(field, value, 'openSlot');
            },
          },
          {
            name: 'contentTitle',
            title: {
              label: '提示文字',
              tip: 'placeholder | 输入框提示文字',
            },
            setter: 'StringSetter',
            condition: (target) => {
              return !showFixedHeight(target);
            },
            getValue: (target) => {
              const advanced = target.parent.getPropValue('advanced');
              return advanced?.contentTitle;
            },
            setValue: (field, value) => {
              advancedSetValue(field, value, 'contentTitle');
            },
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '总高度',
            },
            setter: 'NumberSetter',
            getValue: (target) => {
              const advanced = target.parent.getPropValue('advanced');
              return advanced?.height;
            },
            setValue: (field, value) => {
              advancedSetValue(field, value, 'height');
            },
          },

          {
            name: 'scrollbarWidth',
            title: {
              label: '滚动条宽度',
              tip: '定制滚动条宽度',
            },
            setter: 'NumberSetter',
            getValue: (target) => {
              const advanced = target.parent.getPropValue('advanced');
              return advanced?.scrollbarWidth;
            },
            setValue: (field, value) => {
              advancedSetValue(field, value, 'scrollbarWidth');
            },
          },
          {
            name: 'showMarkdown',
            title: 'mardown格式',
            setter: 'BoolSetter',
            getValue: (target) => {
              const advanced = target.parent.getPropValue('advanced');
              return advanced?.showMarkdown;
            },
            setValue: (field, value) => {
              advancedSetValue(field, value, 'showMarkdown');
            },
          },

          {
            name: 'language',
            title: '语言风格',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: 'java',
                    value: 'java',
                  },
                  {
                    title: 'javascript',
                    value: 'javascript',
                  },
                  {
                    title: 'python',
                    value: 'python',
                  },
                  {
                    title: 'go',
                    value: 'go',
                  },
                  {
                    title: 'markdown',
                    value: 'markdown',
                  },
                  {
                    title: 'txt',
                    value: 'txt',
                  },
                ],
              },
            },
            getValue: (target) => {
              const advanced = target.parent.getPropValue('advanced');
              return advanced?.language;
            },
            setValue: (field, value) => {
              advancedSetValue(field, value, 'language');
            },
          },
        ],
      },
      {
        name: 'contentStyle',
        title: '内容样式',
        type: 'group',
        extraProps: {
          display: 'entry',
        },
        items: [
          {
            name: 'contentStyle',
            title: {
              label: '内容样式',
              tip: 'contentStyle | 内容样式',
            },
            setter: 'StyleSetter',
            extraProps: {
              display: 'block',
            },
          },
        ],
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
        },
      ],
    },
    component: { isContainer: true },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '代码块',
    screenshot: require('./__screenshots__/codeBlock.png'),
    schema: {
      componentName: 'CodeBlock',
      props: {
        advanced: {
          scrollbarWidth: 5,
          height: 200,
          openSlot: false,
          contentTitle: '我是默认的填充内容---------------------',
          showMarkdown: false,
          language: 'txt',
        },
      },
    },
  },
];

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