import { IPublicModelSettingField } from '@alilc/lowcode-types';

import React from 'react';

const defaultFields = [
  {
    name: 'name',
    label: '商品名称',
  },
  {
    name: 'storeName',
    label: '共享店铺名称'
  },
  {
    name: 'balance',
    label: '余额'
  },
  {
    name: 'redeem',
    label: '使用金额'
  },
  {
    name: 'code',
    label: '识别码编号'
  },
  {
    name: 'validDate',
    label: '有效期'
  }
]

export const actionsMeta = {
  title: { label: '卡片操作' },
  type: 'group',
  display: 'block',
  items: [
    {
      name: 'showActions',
      title: { label: '开启卡片操作' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
      extraProps:{
        setValue: (target: IPublicModelSettingField, value: boolean) => {
          const actions = target.parent.getPropValue('actions');
          if (true === value && !actions) {
            target.parent.setPropValue('actions', {
              layout: 'expanded',
              detail: {
                visible: true,
                iconColor: '#1570EF',
              },
              edit: {
                visible: true,
                iconColor: '#1570EF',
                dialogTitle: '编辑',
                enableDialog: true,
                fields: [...defaultFields],
              },
            }) 
          }
          if (!value) {
            target.parent.setPropValue('actions', undefined);
          }
        }
      }
    },
    {
      name: 'actions.layout',
      title: { label: '操作展示' },
      condition: (target: IPublicModelSettingField) =>
        !!target.parent.getPropValue('showActions'),
      setter: [
        {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '平铺',
                value: 'expanded',
              },
              {
                title: '隐藏',
                value: 'collapsed',
              },
            ],
          },
        },
      ],
      // defaultValue: 'expanded',
    },
    {
      name: 'actions.detail',
      title: { label: '详情' },
      condition: (target: IPublicModelSettingField) =>
        !!target.parent.getPropValue('showActions'),
      display: 'entry',
      propType: 'object',
      // defaultValue: {
      //   visible: true,
      //   iconColor: '#1570EF',
      // },
      items: [
        {
          name: 'visible',
          title: { label: '开启' },
          propType: 'bool',
          setter: 'BoolSetter',
        },
        {
          name: 'iconColor',
          title: { label: 'icon颜色' },
          propType: 'string',
          setter: 'ColorSetter',
        },
      ],
    },
    {
      name: 'actions.edit',
      title: { label: '编辑' },
      condition: (target: IPublicModelSettingField) =>
        !!target.parent.getPropValue('showActions'),
      display: 'entry',
      propType: 'object',
      // defaultValue: {
      //   visible: true,
      //   iconColor: '#1570EF',
      //   dialogTitle: '编辑',
      //   enableDialog: true,
      //   fields: [...defaultFields],
      // },
      items: [
        {
          name: 'visible',
          title: { label: '开启' },
          propType: 'bool',
          setter: 'BoolSetter',
        },
        {
          name: 'iconColor',
          title: { label: 'icon颜色' },
          propType: 'string',
          setter: 'ColorSetter',
        },
        {
          name: 'enableDialog',
          title: { label: '开启弹窗' },
          propType: 'bool',
          setter: 'BoolSetter',
        },
        {
          name: 'dialogTitle',
          title: { label: '弹窗标题' },
          propType: 'string',
          setter: 'PisellI18nSetter',
          condition: (target: IPublicModelSettingField) =>
            !!target.parent.getPropValue('enableDialog'),
        },
        {
          name: 'fields',
          title: { label: '弹窗字段' },
          condition: (target: IPublicModelSettingField) =>
            !!target.parent.getPropValue('enableDialog'),
          setter: {
            componentName: 'ArraySetter',
            props: {
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  descriptor: 'name',
                  config: {
                    items: [
                      {
                        name: 'label',
                        title: { label: '标签名' },
                        propType: 'string',
                        setter: 'PisellI18nSetter',
                        important: true,
                      },
                    ],
                  },
                },
              },
              extraProps: {
                renderFooter: (props: {
                  value: Array<Record<string, string>>;
                  onAdd: (newVal?: any) => void;
                }) => {
                  if (props.value.length === defaultFields.length)
                    return null;
                  const onAdd = () => {
                    const exists = props.value.map((item) => item.name);
                    const item = defaultFields.find(
                      (item) => !exists.includes(item.name)
                    );
                    if (item) {
                      props?.onAdd({...item});
                    }
                  };
                  return React.createElement(
                    'button',
                    {
                      onClick: onAdd,
                      className:
                        'next-btn next-medium next-btn-primary next-btn-text',
                    },
                    '添加一项 +'
                  );
                },
              },
            },
          },
        },
      ],
    },
    {
      name: 'enableEditAmount',
      title: { label: '开启编辑金额' },
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue: false,
    }
  ],
}