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

const FixedContainerMeta: IPublicTypeComponentMetadata = {
  componentName: 'FixedContainer',
  title: '自由容器',
  category: '布局容器类',
  group: '精选组件',
  icon:
    'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_table.png',
  npm: {
    package: '@ztocwst/datav-materials',
    version: '0.1.0',
    exportName: 'FixedContainer',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    component: {
      isContainer: true,
    },
    props: [
      {
        name: '!heightType',
        title: '高度类型',
        setter: {
          componentName: 'RadioGroupSetter',
          initialValue: '',
          props: {
            options: [
              {
                title: '适应',
                value: 'auto',
              },
              {
                title: '至少',
                value: 'min',
              },
            ],
          },
        },
        extraProps: {
          getValue: (target: IPublicModelSettingPropEntry) => {
            if (target.node?.getPropValue('style.minHeight')) {
              return 'min';
            } else {
              return 'auto';
            }
          },
          setValue: (target: IPublicModelSettingPropEntry, value: string) => {
            if (value === 'min') {
              target.node?.setPropValue(
                'style.minHeight',
                parseInt(String(target.node?.getRect()?.height)),
              );
            } else if (value === 'auto') {
              target.node?.setPropValue('style.minHeight', null);
            }
          },
        },
      },
      {
        name: 'style.minHeight',
        title: '最小高度',
        defaultValue: '',
        setter: {
          componentName: 'NumberSetter',
          props: {
            units: 'px',
            step: 2,
          },
        },
        condition: (target: IPublicModelSettingPropEntry) => {
          return (
            target.node?.getPropValue('!heightType') === 'min' ||
            !!target.node?.getPropValue('style.minHeight')
          );
        },
      },
      {
        name: 'items',
        title: '配置',
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'zIndex',
                      title: '层级 (zIndex)',
                      important: true,
                      setter: 'NumberSetter',
                    },
                    {
                      name: 'left',
                      title: '右偏移',
                      setter: 'NumberSetter',
                    },
                    {
                      name: 'top',
                      title: '下偏移',
                      setter: 'NumberSetter',
                    },
                    {
                      name: 'primaryKey',
                      title: '项目编号',
                      condition: () => false,
                      setter: 'StringSetter',
                    },
                  ],
                },
              },
            },
          },
        },
        extraProps: {
          disableAdd: true,
        },
      },
    ],
    supports: {
      style: true,
      loop: false,
    },
    advanced: {},
  },
};

const snippets: IPublicTypeSnippet[] = [
  // {
  //   title: '自由容器',
  //   screenshot: '',
  //   schema: {
  //     componentName: 'FixedContainer',
  //     props: {},
  //   },
  // },
];

// export default config;

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