import {
  MyBetaModalFormProps,
  MyButtons,
  MyFormItems,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { MomentSelect } from '@/components/MomentCategories';
import { MyModal } from '@/components/MyModal';
import { Selects } from '@/components/Select';
import MyTransferProject from '@/components/TransferProject';
import { Apis } from '@/gen/Apis';
import {
  CustomerMomentsChannelEnum,
  CustomerMomentsContentTypeEnum,
  CustomerMomentsPushTypeEnum,
  CustomerMomentsRangeTypeEnum,
  CustomerMomentsTaskEndTypeEnum,
} from '@/gen/Enums';
import { BetaSchemaForm } from '@ant-design/pro-components';
import { Button, message, Space, Steps } from 'antd';
import { useState } from 'react';
export default function Create(props: MyBetaModalFormProps) {
  const [current, setCurrent] = useState(0);
  const [formData, setFormData] = useState<any>({});
  const steps = [
    {
      title: '创建任务',
      columns: [
        MyFormItems.EnumRadio({
          key: 'channel',
          title: '发送渠道',
          valueEnum: CustomerMomentsChannelEnum,
          required: true,
        }),
        Selects?.Companies({
          key: 'companies_id',
          title: '公司',
          colProps: { span: 24 },
          required: true,
        }),
        MomentSelect.MomentCategoriesSelect({
          title: '内容分类',
          formItemProps: { ...rulesHelper.array },
        }),
        {
          valueType: 'group',
          colProps: { span: 24 },
          columns: [
            MyFormItems.EnumRadio({
              key: 'push_type',
              title: '推送类型',
              valueEnum: CustomerMomentsPushTypeEnum,
              required: true,
              colProps: { span: 8 },
            }),
            {
              name: ['push_type'],
              valueType: 'dependency',
              columns: ({ push_type }: any) => {
                return push_type === 'ScheduledPush'
                  ? [
                      {
                        key: 'scheduled_time',
                        title: '定时发送时间',
                        valueType: 'dateTime',
                        colProps: { span: 10 },
                      },
                    ]
                  : [];
              },
            },
          ],
        },
        {
          valueType: 'group',
          colProps: { span: 24 },
          columns: [
            MyFormItems.EnumRadio({
              key: 'task_end_type',
              title: '任务结束类型',
              valueEnum: CustomerMomentsTaskEndTypeEnum,
              required: true,
              colProps: { span: 8 },
            }),
            {
              name: ['task_end_type'],
              valueType: 'dependency',
              columns: ({ task_end_type }: any) => {
                return task_end_type === 'AfterNDays'
                  ? [
                      {
                        key: 'task_days',
                        title: '任务结束天数',
                        colProps: { span: 10 },
                        valueType: 'number',
                        formItemProps: { ...rulesHelper.number },
                        fieldProps: {
                          suffix: '天结束',
                        },
                      },
                    ]
                  : task_end_type === 'ScheduledEnd'
                  ? [
                      {
                        key: 'task_end_time',
                        title: '定时结束',
                        valueType: 'dateTime',
                        formItemProps: { ...rulesHelper.text },
                        colProps: { span: 10 },
                      },
                    ]
                  : [];
              },
            },
          ],
        },
        MyFormItems.EnumSelect({
          key: 'range_type',
          title: '范围类型',
          valueEnum: CustomerMomentsRangeTypeEnum,
          required: true,
        }),

        {
          name: ['range_type'],
          valueType: 'dependency',
          columns: ({ range_type }: any) => {
            return range_type === 'Project'
              ? [
                  {
                    key: 'range_data',
                    title: '选择范围',
                    colProps: { span: 24 },
                    formItemProps: { ...rulesHelper.array },
                    renderFormItem: () => <MyTransferProject />,
                  },
                ]
              : [];
          },
        },
      ],
    },
    {
      title: '创建内容',
      columns: [
        MyFormItems.EnumRadio({
          key: 'content_type',
          title: '内容类型',
          valueEnum: CustomerMomentsContentTypeEnum,
          required: true,
          colProps: { span: 24 },
        }),

        {
          key: 'skip_url',
          title: '链接',
          formItemProps: { ...rulesHelper.text },
          colProps: { span: 12 },
        },
        {
          key: 'title',
          title: '标题',
          formItemProps: { ...rulesHelper.text },
          colProps: { span: 12 },
        },
        {
          name: ['content_type'],
          valueType: 'dependency',
          columns: ({ content_type }: any) => {
            return content_type === 'MiniProgram'
              ? [
                  {
                    key: 'mini_program_app_id',
                    title: '小程序APPID',
                    formItemProps: { ...rulesHelper.text },
                    colProps: { span: 24 },
                  },
                ]
              : [];
          },
        },
        {
          key: 'content',
          title: '内容',
          valueType: 'textarea',
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
        },
        {
          key: 'desc',
          title: '描述',
          valueType: 'textarea',
          colProps: { span: 24 },
        },
        MyFormItems.UploadImages({
          key: 'cover_image',
          title: '封面',
          max: 1,
        }),
        MyFormItems.UploadImages({
          key: 'attachments',
          title: '附件',
          uploadType: 'file',
          max: 100,
          colProps: { span: 12 },
        }),
      ],
    },
  ];

  const handleNext = async () => {
    // 这里可以添加表单验证逻辑
    if (current < steps.length - 1) {
      setCurrent(current + 1);
    }
  };

  // 处理上一步
  const handlePrev = () => {
    if (current > 0) {
      setCurrent(current - 1);
    }
  };

  return (
    <MyModal
      title={`创建${props.title}`}
      type="primary"
      size={'middle'}
      width="800px"
      node={
        <Space direction="vertical">
          <Steps current={current} items={steps} />
          <BetaSchemaForm<ApiTypes.Customer.CustomerMomentCategories.Store>
            {...MyModalFormProps.props}
            title={`添加${props.title}`}
            wrapperCol={{ span: 24 }}
            width="800px"
            layoutType="Form"
            trigger={<MyButtons.Create title={`添加${props.title}`} />}
            onFinish={async (values) => {
              setFormData(values);
              console.log('提交的数据2:', values);
              if (current < steps.length - 1) {
                handleNext();
              } else {
                let data = { ...formData, ...values };
                Apis.Customer.CustomerMoments.Store({
                  ...data,
                  one_moment_categories_id: formData?.moment_categories_ids[0],
                  two_moment_categories_id: formData?.moment_categories_ids[1],
                })
                  .then(() => {
                    props.reload?.();
                    message.success(props.title + '成功');
                    return true;
                  })
                  .catch(() => false);
              }
            }}
            // onFinish={async (values) =>
            //   Apis.Customer.CustomerMomentCategories.Store(values)
            //     .then(() => {
            //       props.reload?.();
            //       message.success(props.title + '成功');
            //       return true;
            //     })
            //     .catch(() => false)
            // }
            columns={steps[current].columns}
            submitter={{
              render: (props, dom) => {
                return (
                  <Space
                    style={{ display: 'flex', justifyContent: 'flex-end' }}
                  >
                    {current > 0 && (
                      <Button onClick={handlePrev}>上一步</Button>
                    )}
                    {current < steps.length - 1 ? (
                      <Button
                        type="primary"
                        onClick={() => props.form?.submit?.()}
                      >
                        下一步
                      </Button>
                    ) : (
                      <Button
                        type="primary"
                        onClick={() => props.form?.submit?.()}
                      >
                        提交
                      </Button>
                    )}
                  </Space>
                );
              },
            }}
          />
        </Space>
      }
    />
  );
}
