import EasyvModal, { useActionModalRef } from '@/components/EasyvModal';
import EasyvTooltip from '@/components/EasyvTooltip';
import {
  QuestionCircleOutlined,
  EllipsisOutlined,
  MonitorSquareOutlined,
  TerminationSquareOutlined,
  PlayCircleOutlined,
  PauseCircleOutlined,
  RedoOutlined,
} from '@easyv/react-icons';
import { Switch } from '@easyv/antd';
import ConfigProvider from '@easyv/antd/lib/config-provider';
import React, { useState, useMemo } from 'react';
import styles from './style.less';

export type DebugConfigState = 'initialState' | 'recording' | 'paused';

export type ScreenDebugConfigType = {
  autoUpdate: '自动更新';
  dataRequest: '数据请求';
  filterExecute: '过滤器执行';
  callbackSend: '回调发送';
  debugListenStatus: DebugConfigState;
};

export type ListenStateType = {
  debugListenStatus: DebugConfigState;
};

export type DataFlowListenConfigType = {
  [k in keyof Omit<ScreenDebugConfigType, 'debugListenStatus'>]: boolean;
};

export type DebugConfigType = ListenStateType & DataFlowListenConfigType;

export interface DebugConfigProps {
  config: DebugConfigType;
  setConfig: (v: DebugConfigType) => void;
  visible: boolean;
}

type DebugConfigList = {
  label: ScreenDebugConfigType[keyof Omit<ScreenDebugConfigType, 'debugListenStatus'>];
  tooltip: string | null;
  key: keyof Omit<ScreenDebugConfigType, 'debugListenStatus'>;
}[];

const debugConfigList: DebugConfigList = [
  {
    key: 'autoUpdate',
    label: '自动更新',
    tooltip: '关闭后将不执行数据配置中的自动更新，仅在调试模式生效不影响发布页的数据更新',
  },
  {
    key: 'dataRequest',
    label: '数据请求',
    tooltip: null,
  },
  {
    key: 'filterExecute',
    label: '过滤器执行',
    tooltip: null,
  },
  {
    key: 'callbackSend',
    label: '回调发送',
    tooltip: null,
  },
];

const configIconStatus: {
  [k in DebugConfigState]: {
    title:
      | '监听数据流向'
      | '监听设置'
      | '暂停监听'
      | '终止监听'
      | '继续监听'
      | '重新加载可视化应用';
    icon: React.ReactNode;
  }[];
} = {
  initialState: [
    { title: '监听数据流向', icon: <MonitorSquareOutlined className={styles.icon} /> },
    { title: '监听设置', icon: <EllipsisOutlined className={styles.icon} /> },
  ],
  recording: [
    { title: '暂停监听', icon: <PauseCircleOutlined className={styles.icon} /> },
    {
      title: '终止监听',
      icon: <TerminationSquareOutlined className={styles.icon} style={{ color: '#EB515A' }} />,
    },
  ],
  paused: [
    { title: '继续监听', icon: <PlayCircleOutlined className={styles.icon} /> },
    {
      title: '终止监听',
      icon: <TerminationSquareOutlined className={styles.icon} style={{ color: '#EB515A' }} />,
    },
  ],
};

/**
 * @description 图标切换逻辑
 * @param param0
 * @returns
 */
const ConfigContainer = ({ visible, config, setConfig }: DebugConfigProps) => {
  const ref = useActionModalRef();

  const { debugListenStatus = 'initialState', ...otherConfig } = config;

  // modal里的配置项
  const [modalConfig, setModalConfig] = useState(otherConfig);

  const RIGHT = useMemo(() => {
    if (visible) {
      return '354px';
    } else {
      return '24px';
    }
  }, [visible, config.debugListenStatus]);

  const curConfigList = configIconStatus[debugListenStatus];
  const updateCurStatus = (
    d: '监听数据流向' | '监听设置' | '暂停监听' | '继续监听' | '终止监听' | '重新加载可视化应用',
    v: DebugConfigType,
  ) => {
    switch (d) {
      case '监听数据流向': {
        setConfig({
          ...v,
          debugListenStatus: 'recording',
        });
        break;
      }

      case '监听设置': {
        ref.current?.show();
        break;
      }

      case '暂停监听': {
        setConfig({
          ...v,
          debugListenStatus: 'paused',
        });
        break;
      }

      case '继续监听': {
        setConfig({
          ...v,
          debugListenStatus: 'recording',
        });
        break;
      }

      case '终止监听': {
        setConfig({
          ...config,
          debugListenStatus: 'initialState',
        });
        break;
      }
      case '重新加载可视化应用': {
        window.location.reload();
        break;
      }
      default:
        break;
    }
  };

  return (
    <div className={styles.container} style={{ right: RIGHT }}>
      <p className={styles.iconContainer}>
        {curConfigList?.map((d, i) => (
          <EasyvTooltip key={i} title={d.title} placement="top">
            <span onClick={() => updateCurStatus(d.title, config)}>{d.icon}</span>
          </EasyvTooltip>
        ))}
      </p>

      <p className={styles.reload}>
        <EasyvTooltip title="重新加载可视化应用">
          <span onClick={() => updateCurStatus('重新加载可视化应用', config)}>
            <RedoOutlined className={styles.icon} />
          </span>
        </EasyvTooltip>
      </p>

      <EasyvModal.ActionModal
        title="数据流向监听设置"
        ref={ref}
        onOk={() => {
          setConfig({
            ...config,
            ...modalConfig,
          });
        }}
        content={
          <div className={styles.content}>
            {debugConfigList.map((d) => (
              <p key={d.key} className={styles.item}>
                <span>
                  <label>{d.label}</label>
                  {d.tooltip ? (
                    <EasyvTooltip placement="top" title={d.tooltip}>
                      <QuestionCircleOutlined className={styles.question} />
                    </EasyvTooltip>
                  ) : null}
                </span>
                <ConfigProvider>
                  <Switch
                    size="small"
                    defaultChecked={modalConfig[d.key]}
                    onChange={(e) => {
                      setModalConfig({
                        ...modalConfig,
                        [d.key]: e,
                      });
                    }}
                  />
                </ConfigProvider>
              </p>
            ))}
          </div>
        }
      />
    </div>
  );
};
export default ConfigContainer;
