import React, { useEffect, useRef, useState, useContext } from 'react';
import FlowBuilder, { IQxNode, dataConversion, BuilderContext } from '@qx/flow';
import {
  Button,
  Drawer,
  message,
  Popconfirm,
  Popover,
  Space,
  Tooltip,
  Typography,
  Dropdown,
  Menu,
  Modal,
} from 'antd';
import { Start, End } from './nodes';
import { NodeTypes, ProcessItemProps, FlowStatusEnums } from '@/interface';
import { handleWindowOpen } from '@qx/utils';
// import { history } from '@@/core/history';
import { useLocation } from 'react-router-dom';
import { useTitle } from 'ahooks';
// 头部相关
import {
  FlowHeader,
  FlowVersion,
  NameDescriptionSetting,
  NodesPanel,
  ConfigDrawer,
} from '@/components';
import cls from 'classnames';
import styles from '@/components/header/index.module.less';
import { getIcon } from '@/utils';
import { QxIcon } from '@/components';
import { useSearchParams } from '@/hooks';
import {
  getProcessDetailsById,
  publishProcessById,
  saveProcessSetting,
} from '@/services';
import type { IRegisterNode, INode, IRegisterRemoteNode } from '@qx/flow';

const prefix = 'qx-data-flow';

const { Text } = Typography;

const nameMaxLength = 20; // 数据流名称 最长文字 限制

// TODO: 后续 systemNodes 要删掉，所有节点都是 registerRemoteNode
const systemNodes: IRegisterNode[] = [
  {
    type: NodeTypes.START,
    name: '开始节点',
    // displayComponent: Start.DisplayComponent,
    // configComponent: Start.ConfigComponent,
    isStart: true,
  },
  {
    type: NodeTypes.END,
    name: '结束节点',
    // displayComponent: End.DisplayComponent,
    // configComponent: End.ConfigComponent,
    isEnd: true,
  },
  // {
  //   type: 'condition',
  //   name: '条件节点',
  //   displayComponent: Condition.DisplayComponent,
  //   configComponent: Condition.ConfigComponent,
  // },
];

export default () => {
  const [nodes, setNodes] = useState<INode[]>([]);
  const [remoteNodes, setRemoteNodes] = useState<IRegisterRemoteNode[]>([]);
  const [query, setQuery] = useSearchParams<any>();
  const [showEditTitle, setShowEditTitle] = useState(false);
  const {
    appId, // 应用id
    funCode, // 表单id
    returnUrl, // 来自页面跳转返回可跳转
    processId, // 流程Id preview
    type, // 流程类型 edit 编辑  preview 预览
  } = query;

  const [processDetails, setProcessDetails] = useState<ProcessItemProps>({
    id: '',
    appId: '',
    name: '',
    remark: '',
  }); // 数据流 详细数据

  const [showExtendModal, setShowExtendModal] = useState(false);
  const [showSimple, setShowSimple] = useState<boolean>(false);

  useTitle(processDetails?.name || '未命名流程'); // 动态变化 文档标题

  const formModalRef = useRef({
    open: (data?: any) => {},
  });

  // 获取详情
  const getDetailsData = (_id: string, _data?: ProcessItemProps) => {
    getProcessDetailsById(_id)
      .then((res: any) => {
        setProcessDetails({
          ..._data,
          ...(res || {}),
        });
      })
      .catch((err: { msg?: string }) => {
        message.warning(err?.msg || '流程详情数据请求失败', 5);
        setProcessDetails(
          // @ts-ignore
          _data || {
            id: _id,
            name: '未命名流程',
            appId,
          },
        );
      });
  };

  // 点击事件
  const handleClick = (
    type: string,
    data?: any,
    e?: React.MouseEvent<HTMLElement, MouseEvent>,
  ) => {
    const { host, pathname, protocol, hash } = location;
    let _params: ProcessItemProps = {}; // 接口调用参数

    if (!!e) {
      e.stopPropagation();
    }

    _params = {
      appId: processDetails?.appId,
    };
    if (!!processDetails?.id) {
      _params.id = processDetails?.id;
    }
    if (!!processDetails?.funCode) {
      _params.funCode = processDetails?.funCode;
    }

    switch (type) {
      case 'RETURN':
        // 返回上一页
        if (!!returnUrl) {
          handleWindowOpen(
            `${protocol}//${host}${pathname}${returnUrl}`,
            '_self',
          );
        } else {
          window.history.back();
        }
        break;
      case 'SAVE':
        // TODO 保存草稿 保存节点相关 参数 processJson
        console.log('SAVE === ', dataConversion(nodes));
        _params.processJson = JSON.stringify({
          dataJson: [...dataConversion(nodes)],
        });
        saveProcessSetting(_params)
          .then((res: string) => {
            console.log('res ===', res);
            if (!!res) {
              // setProcessDetails({
              //   ...processDetails,
              //   id: processDetails?.id || res,
              //   name: data.name,
              //   remark: data.remark,
              // });
              // if (!processDetails?.id) {
              //   history.replace({
              //     query: {
              //       ...query,
              //       processId: res,
              //     }
              //   });
              // }
            }
          })
          .catch((err: { msg?: string }) => {
            message.warning(err?.msg || '节点配置不完善', 5);
          });
        break;
      case 'DEBUG':
        // 调试
        console.log('DEBUG === ');
        break;
      case 'RELEASE':
        // 发布流程
        // TODO 要先校验是否保存 才能发布
        publishProcessById(processDetails.id || '')
          .then((res: any) => {
            console.log('res ====', res);
          })
          .catch((err: { msg?: string }) => {
            message.warning(err?.msg || '节点配置不完善', 5);
          });
        break;
      case 'EDIT':
        // 编辑数据流名称
        const obj: ProcessItemProps = {
          id: processDetails.id || '',
          name: processDetails.name || '',
          remark: processDetails.remark || '',
        };
        formModalRef.current.open(obj);
        break;
      case 'VERSION':
        // 版本管理跳转
        handleWindowOpen(
          `${protocol}//${host}${pathname}#/design/data-flow-view/version?processId=${
            data?.id || ''
          }&name=${data?.name || ''}&returnUrl=${hash}`,
          '_self',
        );
        break;
      case 'SAVE_NAME':
        _params.name = data.name;
        _params.remark = data?.remark || '';
        // 保存 名称、说明
        saveProcessSetting(_params)
          .then((res: string) => {
            if (!!res) {
              setProcessDetails({
                ...processDetails,
                id: processDetails?.id || res,
                name: data.name,
                remark: data.remark,
              });
              if (!processDetails?.id) {
                setQuery({
                  processId: res,
                });
              }
            }
          })
          .catch((err: { msg?: string }) => {
            message.warning(err?.msg || '当前保存操作失败', 5);
          });
        break;
      case 'SIMPLE':
        // 精简模式
        setShowSimple(!showSimple);
        break;
      default:
        break;
    }
  };

  // 头部 左侧 自定义
  const renderLeft = () => {
    return (
      <section className={cls(styles[`${prefix}__header__left-custom`])}>
        <div
          className={cls(styles[`${prefix}__header__left`])}
          onClick={() => {
            handleClick('RETURN');
          }}
        >
          <QxIcon
            className={cls(styles[`${prefix}__header__left-return`])}
            type={'icon-common-arrow'}
          />
          <Text
            className={cls(styles[`${prefix}__header__left-title`])}
            style={{ maxWidth: nameMaxLength * 16 * 1.2 + 'px' }}
            ellipsis={{ tooltip: processDetails?.name || '' }}
          >
            {processDetails?.name || ''}
          </Text>
        </div>
        <div className={cls(styles[`${prefix}__header__left-custom__opt`])}>
          {!!processDetails?.remark ? (
            <Tooltip placement="bottom" title={processDetails?.remark}>
              <Button type="link" icon={<QxIcon type={'icon-frame-help'} />} />
            </Tooltip>
          ) : null}
          {type === 'preview' ? null : (
            <Tooltip placement="bottom" title={'编辑名称与说明'}>
              <Button
                type="link"
                icon={<QxIcon type={'icon-frame-edit'} />}
                onClick={() => {
                  handleClick('EDIT');
                }}
              />
            </Tooltip>
          )}
        </div>
        <Space size={8}>
          {type === 'preview' ? (
            <FlowVersion versionText={processDetails?.curVersion || 1} />
          ) : (
            <FlowVersion
              versionText={processDetails?.curVersion || 1}
              handleClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
                handleClick(
                  'VERSION',
                  {
                    id: processDetails?.id,
                    name: processDetails?.name,
                  },
                  e,
                );
              }}
            />
          )}
          <FlowVersion
            status={processDetails?.latestConfigStatus || 'DRAFT'}
            statusEnums={FlowStatusEnums}
          />
        </Space>
      </section>
    );
  };

  const renderRight = () => {
    return (
      <Space size={12}>
        <Button
          onClick={() => {
            handleClick && handleClick('SIMPLE');
          }}
        >
          {!showSimple ? '精简模式' : '退出精简'}
        </Button>
        <Button
          disabled={false} // 需要校验 是否禁用
          onClick={() => {
            handleClick && handleClick('DEBUG');
          }}
        >
          调试
        </Button>
        <Button
          disabled={false} // 需要校验 是否禁用
          onClick={() => {
            handleClick && handleClick('SAVE');
          }}
        >
          保存
        </Button>
        <Button
          disabled={false} // 需要校验 是否禁用
          type="primary"
          // loading={false}
          onClick={() => {
            handleClick && handleClick('RELEASE');
          }}
        >
          发布流程
        </Button>
      </Space>
    );
  };

  const handleChange = (nodes: INode[]) => {
    setNodes(nodes);
  };

  const handleGetRemoteNodes = () => {
    setRemoteNodes([
      {
        url: 'https://unpkg.com/react-flow-builder-pkg-demo@1.2.0/dist/index.umd.js',
      },
    ]);
  };

  useEffect(() => {
    // setNodes(dataConversion(defaultNodes as IQxNode[], true));
    handleGetRemoteNodes();
  }, []);

  useEffect(() => {
    console.log('nodes ==== ', nodes);
  }, [nodes]);
  useEffect(() => {
    let _data: ProcessItemProps = {};
    _data.name = '未命名流程';
    // @ts-ignore
    _data.appId = appId;
    if (!!funCode) {
      _data.funCode = funCode;
    } else {
      if (!!_data.funCode) delete _data.funCode;
    }
    if (!processId) {
      setProcessDetails(_data);
    } else {
      getDetailsData(processId, _data);
    }
  }, [appId, funCode, processId]);

  const handleOpenExtendModal = () => {
    setShowExtendModal(true);
  };

  const handleCloseExtendModal = () => {
    setShowExtendModal(false);
  };

  const getNodeTool = (
    node: INode,
    nodes: INode[],
    defaultTools: INode[],
    actions: any,
  ) => {
    console.log('nodes', nodes);
    const { copyNodeAndChildren } = actions;
    switch (node.type) {
      case 'condition':
        return [
          ...defaultTools,
          {
            name: '复制分支',
            icon: '复制分支',
            onClick: () => copyNodeAndChildren(),
          },
        ];
      default:
        return [
          ...defaultTools,
          {
            name: '封装节点',
            icon: '封装节点',
            onClick: () => handleOpenExtendModal(),
          },
        ];
    }
  };

  return (
    <div className={cls(styles[`${prefix}__container`])}>
      <FlowHeader
        renderLeft={renderLeft()}
        handleClick={handleClick}
        renderRight={type === 'preview' ? null : renderRight()}
      />
      <FlowBuilder
        readonly={type === 'preview'}
        nodes={nodes}
        registerNodes={systemNodes}
        historyTool
        zoomTool
        // @ts-ignore
        expandAllTool
        DrawerComponent={Drawer}
        PopoverComponent={Popover}
        PopconfirmComponent={Popconfirm}
        DropdownComponent={Dropdown}
        MenuComponent={Menu}
        // CommonDisplay={CommonDisplay}
        onChange={handleChange}
        registerRemoteNodes={remoteNodes}
        ConfigDrawerContainer={ConfigDrawer}
        NodePanel={NodesPanel}
        // @ts-ignore
        getNodeTool={getNodeTool}
      />
      <NameDescriptionSetting cRef={formModalRef} handleClick={handleClick} />
      <Modal
        title="扩展节点"
        visible={showExtendModal}
        onCancel={handleCloseExtendModal}
      />
    </div>
  );
};