import React, { useMemo } from 'react';
import styles from './style.less';
import { DebugDataType, DebugType } from '@/utils/debug-screen';
import {
  CloseCircleOutlined,
  DownOutlined,
  InfoCircleOutlined,
  RightOutlined,
} from '@easyv/react-icons';
import EasyvTooltip from '@/components/EasyvTooltip';
import { clipboardWriteText } from '@/utils/utils';
import message from '@/components/message';

const IconByType = ({ type }: { type: DebugType }) => {
  switch (type) {
    case 'error':
      return <CloseCircleOutlined className={styles[`error-icon`]} />;
    // TODO  设计稿这期没有出下面类型的图标，后续改
    case 'info':
    default:
      return <InfoCircleOutlined className={styles[`info-icon`]} />;
  }
};

const ExpanIcon = ({ isExpand, onChange }: { isExpand: boolean; onChange: (e) => void }) => {
  return isExpand ? (
    <DownOutlined className={styles[`down-icon`]} onClick={() => onChange(!isExpand)} />
  ) : (
    <RightOutlined className={styles[`down-icon`]} onClick={() => onChange(!isExpand)} />
  );
};

type LogTitleProps = DebugDataType & { isExpand: boolean; onChange: (e: boolean) => void };
// filter info [组件名_id]成功执行过滤器[过滤器名] error [组件名_id]执行过滤器[过滤器名]时发生错误
// dataRequest info [组件名_id]成功请求数据 error [组件名_id]数据获取失败
// callBack info [组件名_id]成功发送回调 error [组件名_id]回调发送失败
const LogTitle = ({
  isExpand,
  onChange,
  type,
  debugMsg,
  name,
  id,
  dispatchFrom,
}: LogTitleProps) => {
  const [centerText, title, copyName] = useMemo(() => {
    let centerTexts = {
      info: {
        dataRequest: '成功请求数据',
        filter: '成功执行过滤器',
        callBack: '成功发送回调',
      },
      error: {
        dataRequest: '数据获取失败',
        filter: '执行过滤器',
        callBack: '',
      },
    };
    let titles = {
      info: {
        dataRequest: `${name}_${id}${centerTexts[type][dispatchFrom]}`,
        filter: `${name}_${id}${centerTexts[type][dispatchFrom]}${debugMsg?.name}`,
      },
      error: {
        dataRequest: `${name}_${id}${centerTexts[type][dispatchFrom]}`,
        filter: `${name}_${id}${centerTexts[type][dispatchFrom]}${debugMsg?.name}时发生错误`,
      },
    };

    let centerText = centerTexts[type][dispatchFrom];
    let title = titles[type][dispatchFrom];
    let copyName = dispatchFrom === 'filter' && type === 'error' ? debugMsg.name : debugMsg.name;
    return [centerText, title, copyName];
  }, [dispatchFrom, debugMsg, name, id]);

  return (
    <div className={styles.itemHeader}>
      <div className={styles[`flex-container`]}>
        <ExpanIcon isExpand={isExpand} onChange={onChange} />
        <IconByType type={type} />
      </div>
      <div className={styles.itemNameContainer}>
        <span title={title} className={styles.itemName}>
          <EasyvTooltip title="点击复制ID" placement="top">
            <span
              className={styles[`component-title`]}
              onClick={() => {
                clipboardWriteText(`${id}`)
                  .then(() => {
                    message.success('复制成功，至编辑页搜索定位');
                  })
                  .catch(() => {
                    message.error('复制失败');
                  });
              }}>{`${name}_${id}`}</span>
          </EasyvTooltip>
          <span>{centerText}</span>
          {dispatchFrom === 'filter' && (
            <>
              <EasyvTooltip title="点击复制过滤器名称" placement="top">
                <span
                  className={styles[`component-title`]}
                  onClick={() => {
                    clipboardWriteText(`${copyName}`)
                      .then(() => {
                        message.success('复制成功，至编辑页搜索定位');
                      })
                      .catch(() => {
                        message.error('复制失败');
                      });
                  }}>{`${copyName}`}</span>
              </EasyvTooltip>
              {type === 'error' ? '执行时发生错误' : null}
            </>
          )}
        </span>
      </div>
    </div>
  );
};

export default LogTitle;
