import { PlusOutlined } from '@ant-design/icons';
import type {
  ActionType,
  ProColumns,
  ProCoreActionType,
} from '@ant-design/pro-components';
import { message, Popconfirm } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
  type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { ToolbarAction } from '@/components/EnhancedProTable/types';
import { formStatusType } from '@/constants';
import {
  createSmsTemplate,
  deleteSmsTemplate,
  getSmsTemplatePage,
  type SmsTemplateVO,
  sendSms,
  updateSmsTemplate,
} from '@/services/system/message/sms/template';
import { baseTenantColumns, formColumns, formTestColumns } from './config';

const SyStemMessageSmsTemplate = () => {
  const tableRef = useRef<ActionType>(null);
  const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
  const [type, setType] = useState<'create' | 'update' | 'test'>('create');
  const testRef = useRef<ConfigurableDrawerFormRef>(null);
  const [currentItem, setCurrentItem] = useState<SmsTemplateVO>();
  const onFetch = async (
    params: SmsTemplateVO & {
      pageSize?: number;
      current?: number;
    },
  ) => {
    const data = await getSmsTemplatePage({
      ...params,
      pageNo: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: data.list,
      success: true,
      total: data.total,
    };
  };

  const handleSend = async (record: SmsTemplateVO) => {
    setType('test');
    setCurrentItem(record);
    testRef.current?.open(record);
  };

  const handleEdit = (record: SmsTemplateVO) => {
    setType('update');
    setCurrentItem(record);

    configurableDrawerRef.current?.open(record);
  };

  const handleAdd = () => {
    setType('create');
    configurableDrawerRef.current?.open();
  };
  const handleSubmit = useCallback(
    async (values: SmsTemplateVO) => {
      if (type === 'create') {
        await createSmsTemplate(values);
        message.success('创建成功');
      } else {
        await updateSmsTemplate({
          ...values,
          id: currentItem!.id,
        });
        message.success('编辑成功');
      }
      tableRef.current?.reload();
      return true;
    },
    [type, currentItem],
  );

  const handleTestSubmit = useCallback(
    async (values: SmsTemplateVO) => {
      if (currentItem?.status === 1) {
        return message.error('请先开启状态');
      }
      const res = await sendSms({
        ...currentItem,
        ...values,
        mobile: '',
        templateParams: new Map(),
        templateCode: currentItem!.code,
      });
      message.success('提交发送成功！发送结果，见发送日志编号：' + res);
      tableRef.current?.reload();
      return true;
    },
    [type, currentItem],
  );
  const toolbarActions: ToolbarAction[] = [
    {
      key: 'add',
      label: '新建',
      type: 'primary',
      icon: <PlusOutlined />,
      onClick: handleAdd,
    },
  ];
  const actionColumns: ProColumns<SmsTemplateVO> = {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    fixed: 'right',
    width: 120,
    render: (
      text: React.ReactNode,
      record: SmsTemplateVO,
      _: number,
      action: ProCoreActionType | undefined,
    ) => [
      <a key="edit" onClick={() => handleEdit(record)}>
        编辑
      </a>,
      <a key="detail" onClick={() => handleSend(record)}>
        测试
      </a>,
      <Popconfirm
        title="是否删除?"
        key="delete"
        onConfirm={async () => {
          await deleteSmsTemplate(record.id);
          message.success('删除成功');
          action?.reload?.();
        }}
        okText="是"
        cancelText="否"
      >
        <a style={{ color: 'var(--ant-red)' }} key="delete">
          删除
        </a>
      </Popconfirm>,
    ],
  };
  const columns = [...baseTenantColumns, actionColumns];
  return (
    <>
      <EnhancedProTable<SmsTemplateVO>
        ref={tableRef}
        columns={columns}
        request={onFetch}
        headerTitle="登录日志"
        showIndex={false}
        toolbarActions={toolbarActions}
        showSelection={false}
      />
      <ConfigurableDrawerForm
        ref={configurableDrawerRef}
        title={formStatusType[type]}
        columns={formColumns(type)}
        onSubmit={handleSubmit}
      />
      <ConfigurableDrawerForm
        ref={testRef}
        title={formStatusType[type]}
        columns={formTestColumns(type)}
        onSubmit={handleTestSubmit}
      />
    </>
  );
};

export default SyStemMessageSmsTemplate;
