import { FormattedMessage } from '@/.umi/plugin-locale';
import IsModalDelete from '@/components/TableActionCard/isModalDelete';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Button, Empty } from 'antd';
import { useEffect, useRef, useState } from 'react';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';

/**
 * @交互说明
 * 1.告警方式初始状态
 * 2.新建告警方式
 * 3.选择告警方式、更新内容
 * 4.删除告警方式
 *
 * 【*是否需要新增通知按钮】缺少新建操作
 * 【*是否需要展示告警方式列表】展示&编辑混合
 */

const pageStyle: React.CSSProperties = {
  minHeight: '50vh',
};

const AlarmWays: React.FC = () => {
  const updateFormRef = useRef(null);

  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
  //   const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
  const [activeTabId, setActiveTabId] = useState<string>('0');
  const [waysList, setWaysList] = useState<Record<string, any>[]>([
    {
      name: '短信通知',
      id: '0',
      serviceName: 4,
      params: [
        {
          name: 'name1',
          default: 'default1',
        },
      ],
      template: '123',
    },
    {
      name: '电话通知',
      id: '1',
      serviceName: 2,
      params: [
        {
          name: 'name11',
          default: 'default11',
        },
        {
          name: 'name12',
          default: 'default12',
        },
      ],
      template: '456',
    },
    {
      name: '邮件通知',
      id: '2',
      serviceName: '',
      params: [],
      template: '',
    },
    {
      name: '微信通知',
      id: '3',
      serviceName: '',
      params: [],
      template: '',
    },
  ]);
  const [currentRow, setCurrentRow] = useState<Record<string, any> | undefined>({});

  //   const handleUpdateModal = () => {
  //     if (updateModalOpen) {
  //       setUpdateModalOpen(false);
  //       setCurrentRow(undefined);
  //     } else {
  //       setUpdateModalOpen(true);
  //     }
  //   };
  const handleCreateModal = () => {
    if (createModalOpen) {
      setCreateModalOpen(false);
      setCurrentRow(undefined);
    } else {
      setCreateModalOpen(true);
    }
  };

  // 加载告警方式详情
  function loadDetail() {
    const currRow = waysList.find((item) => item.id === activeTabId);
    setCurrentRow(() => currRow);
    console.log(currRow, 'loadDetail', currentRow);
  }

  // 更新告警方式
  function handleUpdate() {
    updateFormRef.current.initSubmitForm();
    console.log(updateFormRef.current, 'updateFormRef');
  }

  // 删除告警方式
  function handleDelete() {
    const waysData = waysList.filter((item) => item.id !== activeTabId);
    setWaysList(waysData);
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    waysData.length && setActiveTabId(waysData[0].id);
  }

  function handleReload() {
    // TODO 需要调用刷新告警方式列表接口
    // loadDetail();
  }

  useEffect(() => {
    loadDetail();
  }, [activeTabId]);

  useEffect(() => {
    handleReload();
  }, []);

  return (
    <PageContainer>
      <ProCard
        title={<FormattedMessage id="alarm.ways.page.title" defaultMessage="$$$" />}
        extra={
          <Button type="primary" onClick={handleCreateModal}>
            <FormattedMessage id="alarm.ways.page.add" defaultMessage="$$$" />
          </Button>
        }
        headStyle={{
          padding: '16px',
          borderBottom: '1px solid  #E0E0E0',
        }}
        bodyStyle={{
          ...pageStyle,
          padding: '16px',
          margin: 0,
        }}
      >
        {waysList?.length ? (
          <div>
            <div className="gn tabAction_box_wrap" style={{ paddingTop: 4, marginBottom: 16 }}>
              {waysList.map((item, index) => {
                // eslint-disable-next-line react/jsx-key
                return (
                  <Button
                    style={{ marginRight: 12 }}
                    type={activeTabId === item.id ? 'primary' : 'default'}
                    key={index}
                    onClick={() => {
                      setActiveTabId(item.id);
                    }}
                  >
                    {item.name || ''}
                  </Button>
                );
              })}
            </div>
            <UpdateForm ref={updateFormRef} values={currentRow || {}} reload={handleReload} />
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                paddingTop: 8,
                paddingBottom: 8,
              }}
            >
              <Button type="primary" onClick={handleUpdate}>
                <FormattedMessage id="common.save" defaultMessage="$$$" />
              </Button>
              <IsModalDelete
                titleText={`确认删除${currentRow?.name}吗？`}
                contentText={`确认删除${currentRow?.name}吗？删除后将无法通过${currentRow?.name}发送告警，请谨慎操作。`}
                deleteButton={
                  <Button type="default" danger>
                    <FormattedMessage id="common.delete" defaultMessage="$$$" />
                  </Button>
                }
                deleteApi={handleDelete}
              ></IsModalDelete>
            </div>
          </div>
        ) : (
          <Empty
            style={{
              minHeight: pageStyle.minHeight,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
            }}
            image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
            imageStyle={{ height: 160 }}
            description={
              <span>
                <FormattedMessage id="alarm.ways.page.empty.des" defaultMessage="$$$" />
              </span>
            }
          >
            <Button type="primary" onClick={handleCreateModal}>
              <FormattedMessage id="alarm.ways.page.add" defaultMessage="$$$" />
            </Button>
          </Empty>
        )}
      </ProCard>

      <CreateForm
        createModalOpen={createModalOpen}
        handleModal={handleCreateModal}
        reload={handleReload}
      />
    </PageContainer>
  );
};

export default AlarmWays;
