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

const scrollSetValue = (field, value, type) => {
  const { node } = field;
  node.setPropValue('scroll', {
    ...node.getPropValue('scroll'),
    [type]: value,
  });
};
const mediaSetValue = (field, value, type) => {
  const { node } = field;
  node.setPropValue('media', {
    ...node.getPropValue('media'),
    [type]: value,
  });
};
const showFixedHeight = (target) => {
  const { autoHeight = false } = target.parent.getPropValue('scroll');
  return autoHeight;
};
const showMediaBoolean = (target) => {
  const { mediaBoolean = false } = target.parent.getPropValue('media');
  return mediaBoolean;
};
const BoxMeta: IPublicTypeComponentMetadata = {
  componentName: 'Box',
  title: 'Box',
  group: '精选组件',
  category: '布局类',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.31',
    exportName: 'Box',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        name: 'show',
        title: '是否显示',
        setter: 'BoolSetter',
      },
      {
        title: '滚动',
        display: 'block',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        items: [
          {
            name: 'autoHeight',
            title: '高度自适应',
            setter: 'BoolSetter',
            getValue: (target) => {
              const advanced = target.parent.getPropValue('scroll');
              return advanced?.autoHeight;
            },
            setValue: (field, value) => {
              scrollSetValue(field, value, 'autoHeight');
            },
          },
          {
            name: 'scrollbarWidth',
            title: {
              label: '滚动条宽度',
              tip: '定制滚动条宽度',
            },
            setter: 'NumberSetter',
            condition: (target) => {
              return showFixedHeight(target);
            },
            getValue: (target) => {
              const advanced = target.parent.getPropValue('scroll');
              return advanced?.scrollbarWidth;
            },
            setValue: (field, value) => {
              scrollSetValue(field, value, 'scrollbarWidth');
            },
          },
          {
            name: 'makeUpForHeight',
            title: {
              label: '补偿高度',
              tip: '高度自适应可能有误差的补偿高度',
            },
            setter: 'NumberSetter',
            condition: (target) => {
              return showFixedHeight(target);
            },
            getValue: (target) => {
              const advanced = target.parent.getPropValue('scroll');
              return advanced?.makeUpForHeight;
            },
            setValue: (field, value) => {
              scrollSetValue(field, value, 'makeUpForHeight');
            },
          },
        ],
      },
      {
        title: '媒体查询',
        display: 'block',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: false,
        },
        items: [
          {
            name: 'mediaBoolean',
            title: '媒体启用',
            setter: 'BoolSetter',
            getValue: (target) => {
              const advanced = target.parent.getPropValue('media');
              return advanced?.mediaBoolean;
            },
            setValue: (field, value) => {
              mediaSetValue(field, value, 'mediaBoolean');
            },
          },
          {
            name: 'minWidth1',
            title: {
              label: '最小宽度',
              tip: '最小宽度-针对1550px以下',
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                units: '%',
                precision: 1,
                max: 100,
                min: 0,
              },
            },
            condition: (target) => {
              return showMediaBoolean(target);
            },
            getValue: (target) => {
              const advanced = target.parent.getPropValue('media');
              return advanced?.minWidth1;
            },
            setValue: (field, value) => {
              mediaSetValue(field, value, 'minWidth1');
            },
          },
          {
            name: 'minWidth2',
            title: {
              label: '最大宽度',
              tip: '最大宽度 -针对1550px以上',
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                units: '%',
                precision: 1,
                max: 100,
                min: 0,
              },
            },
            condition: (target) => {
              return showMediaBoolean(target);
            },
            getValue: (target) => {
              const advanced = target.parent.getPropValue('media');
              return advanced?.minWidth2;
            },
            setValue: (field, value) => {
              mediaSetValue(field, value, 'minWidth2');
            },
          },
        ],
      },
      {
        name: 'backgroundColor',
        title: { label: '背景颜色', tip: '背景颜色' },
        setter: 'ColorSetter',
      },
      {
        name: 'boxBorder',
        title: {
          label: '边框样式',
          tip: '类似：1px solid #ccc',
        },
        setter: 'StringSetter',
      },
    ],
    supports: {
      style: true,
      events: [
        {
          name: 'onClick',
        },
      ],
    },
    component: { isContainer: true },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '盒子元素',
    screenshot: require('./__screenshots__/box.png'),
    schema: {
      componentName: 'Box',
      props: {
        scroll: {
          autoHeight: false,

          makeUpForHeight: 0,
          scrollbarWidth: 5,
        },
        media: {
          mediaBoolean: false,
          minWidth1: 20,
          minWidth2: 50,
        },
        show: true,
      },
    },
  },
];

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