import { getJSExpressionPrototype } from '@/common/manager/common-style';
import { getJSXTemplate } from '@/common/manager/setter-snippet';
import { ButtonPosition } from '@/type/button-position';
import { DisplayPosition } from '@/type/display-position';

export const initialContentJSX = {
  type: 'js',
  source:
    'function content(state, formValues) { \n  // formValues: 当前表单的数据\n  // state: 当前页面所有组件的数据\n return <div>我是自定义内容</div> \n}',
  compiled:
    'function main(){\n    \n    "use strict";\n\nvar __compiledFunc__ = function content(state, formValues) {\n  // formValues: 当前表单的数据\n  // state: 当前页面所有组件的数据\n return /*#__PURE__*/React.createElement("div", {}, "我是自定义内容");\n};\n    return __compiledFunc__.apply(this, arguments);\n  }',
  error: {},
};

export function createMessageSetters(config) {
  const {
    position,
    isToast,
    isConfirm,
    needMargin,
    config: flowConfig,
  } = config || {};
  let contentJSX = initialContentJSX;
  if (
    [ButtonPosition.formItemEvent, ButtonPosition.formDialogItemEvent].includes(
      position,
    )
  ) {
    contentJSX = getJSXTemplate({
      position: ButtonPosition.form,
    })?.initialValue;
  } else if (isToast || isConfirm) {
    contentJSX = {
      type: 'js',
      source: `function content(res, state) { \n  // res: 请求返回结果 \n  // state: 全部组件数据 \n  return <div>{res?.msg || '请求成功'}</div> \n}`,
      compiled: `function main(){\n    \n    "use strict";\n\nvar __compiledFunc__ = function content(res, state) {\n  // res: 请求返回结果 \n  return /*#__PURE__*/React.createElement("div", null, (res == null ? void 0 : res.msg) || '请求成功');\n};\n    return __compiledFunc__.apply(this, arguments);\n  }`,
      error: {},
    };
  }
  const configure = [
    {
      name: 'title',
      display: 'inline',
      title: '内容',
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: [
            {
              componentName: 'CnI18nSetter',
              title: '纯文本',
            },
            {
              componentName: 'CnJSXSetter',
              props: {
                usePopup: true,
                enableFullscreen: true,
                theme: 'vs',
              },
              title: 'React JSX代码',
              initialValue: contentJSX,
            },
          ],
        },
      },
    },
    {
      name: 'type',
      title: '展示样式',
      display: 'inline',
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    label: '成功',
                    value: 'success',
                  },
                  {
                    label: '警告',
                    value: 'warning',
                  },
                  {
                    label: '错误',
                    value: 'error',
                  },
                  {
                    label: '通知',
                    value: 'notice',
                  },
                  {
                    label: '帮助',
                    value: 'help',
                  },
                  {
                    label: '无背景色',
                    value: 'blank',
                  },
                ],
              },
            },
            getJSExpressionPrototype({
              type: 'messageContent',
              prototypeConfig: flowConfig,
            }),
          ],
        },
      },
    },
    {
      name: 'closable',
      title: '显示关闭按钮',
      display: 'inline',
      setter: 'BoolSetter',
    },
    {
      name: 'showType',
      title: '多行展示样式',
      display: 'inline',
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: [
            {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    label: '超出3行...',
                    value: 'beyond',
                  },
                  {
                    label: '多行平铺',
                    value: 'multiple',
                  },
                ],
              },
            },
          ],
        },
      },
    },
  ];
  if ([DisplayPosition.message].includes(position)) {
    configure.push({
      name: 'visible',
      title: '隐藏',
      display: 'inline',
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: [
            {
              title: '是 或 否',
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { value: true, title: '是' },
                  { value: false, title: '否' },
                  { title: '不设置' },
                ],
              },
            },
            getJSExpressionPrototype({
              type: 'base',
              prototypeConfig: flowConfig,
            }),
          ],
        },
      },
    });
  }
  if (isToast) {
    configure.push({
      name: 'duration',
      title: '显示持续时间(单位:毫秒)',
      setter: 'NumberSetter',
    });
  }
  if (needMargin) {
    // configure.push({
    //   name: 'needMargin',
    //   display:'inline',
    //   title: '边距',
    //   initialValue: [true],
    //   setter: {
    //     componentName: 'CnSelectSetter',
    //     props: {
    //       options: [
    //         { value: 'top', title: '上边距' },
    //         { value: 'bottom', title: '下边距' },
    //         { value: 'left', title: '左边距' },
    //         { value: 'right', title: '右边距' },
    //         { value: true, title: '上下边距' },
    //       ],
    //       selectProps:{
    //         mode: 'multiple',
    //       },
    //     },
    //   },
    // })
  }
  return configure;
}