import React from 'react';
import {
  GroupOutlined,
  UngroupOutlined,
  CopySquareOutlined,
  PasteSquareOutlined,
  DeleteOutlined,
  EditOutlined,
  // BulbOutlined,
  AimOutlined,
  EyeOutlined,
  LockOutlined,
} from '@easyv/react-icons';

import { ctrlKeyStr, shiftKeyStr, ComponentTypeEnum, ComponentInfo } from '@easytwin/core';
import classnames from 'classnames';
import { ContextMenuItem } from '@/components';

export interface RightClickContextMenuProp {
  style?: React.CSSProperties;
  copyComponents: ComponentInfo[];
  selectComponents: ComponentInfo[];
  onCreateGroup?: () => void;
  onRemoveGroup?: () => void;
  onClone?: () => void;
  onCopy?: () => void;
  onPaste?: () => void;
  onRemove?: () => void;
  onEdit?: () => void;
  // onOneShow?: () => void;
  onFlyTo?: () => void;
  onVisibleChange?: () => void;
  onActiveChange?: () => void;
  // 关闭
  onClose?: () => void;
}

const RightClickContextMenu: React.FC<RightClickContextMenuProp> = function ({
  style,
  copyComponents,
  selectComponents,
  onCreateGroup,
  onRemoveGroup,
  onClone,
  onCopy,
  onPaste,
  onRemove,
  onEdit,
  // onOneShow,
  onFlyTo,
  onVisibleChange,
  onActiveChange,
  //
  onClose,
}) {
  // 是否选中单个元件
  const isSelectOne = React.useMemo(() => selectComponents.length === 1, [selectComponents]);

  // 选中的第一个元件
  const firstSelectComponenter = React.useMemo(() => {
    if (selectComponents.length > 0) {
      return selectComponents[0];
    }
    return null;
  }, [selectComponents]);

  // 鼠标是否进入
  const [isMouseEnter, setIsMouseEnter] = React.useState<boolean>(false);

  return (
    <div
      className="fixed w-40 bg-bgColorBase border border-dark-700 z-1000 divide-y divide-bgColorTertiary"
      style={style}
      // 鼠标进入
      onMouseEnter={() => setIsMouseEnter(true)}
      // 鼠标离开关闭
      onMouseLeave={() => isMouseEnter && onClose?.()}>
      <div>
        <ContextMenuItem
          title="成组"
          desc={`${ctrlKeyStr} G`}
          icon={<GroupOutlined className="anticon" />}
          onClick={() => {
            onClose?.();
            onCreateGroup?.();
          }}
        />
        <ContextMenuItem
          title="解组"
          desc={`${shiftKeyStr} ${ctrlKeyStr} G`}
          icon={<UngroupOutlined className="anticon" />}
          disabled={!selectComponents.some((i) => i?.type === ComponentTypeEnum.BIZGROUP)}
          onClick={() => {
            onClose?.();
            onRemoveGroup?.();
          }}
        />
        <ContextMenuItem
          title="拷贝"
          desc={`${ctrlKeyStr} X`}
          icon={<UngroupOutlined className="anticon" />}
          onClick={() => {
            onClose?.();
            onClone?.();
          }}
        />
        <ContextMenuItem
          title="复制"
          desc={`${ctrlKeyStr} C`}
          icon={<CopySquareOutlined className="anticon" />}
          onClick={() => {
            onClose?.();
            onCopy?.();
          }}
        />
        <ContextMenuItem
          title="粘贴"
          desc={`${ctrlKeyStr} V`}
          icon={<PasteSquareOutlined className="anticon" />}
          disabled={copyComponents.length === 0}
          onClick={() => {
            onClose?.();
            onPaste?.();
          }}
        />
      </div>

      {isSelectOne && firstSelectComponenter?.type !== ComponentTypeEnum.BIZGROUP && (
        <div>
          {/* <ContextMenuItem
            title="独显"
            icon={<BulbOutlined className="anticon" />}
            disabled={firstSelectComponenter?.type === ComponentTypeEnum.BIZGROUP}
            onClick={() => {
              onClose?.();
              onOneShow?.();
            }}
          /> */}
          <ContextMenuItem
            title="聚焦"
            desc={`${ctrlKeyStr} F`}
            icon={<AimOutlined className="anticon" />}
            disabled={firstSelectComponenter?.type !== ComponentTypeEnum.MODEL}
            onClick={() => {
              onClose?.();
              onFlyTo?.();
            }}
          />
          <ContextMenuItem
            title={
              <>
                <span
                  className={classnames(
                    firstSelectComponenter?.commonConfig?.inActive
                      ? 'text-primary group-hover:text-white'
                      : '',
                  )}>
                  锁定
                </span>
                <span className="px-1">/</span>
                <span
                  className={classnames(
                    firstSelectComponenter?.commonConfig?.inActive
                      ? ''
                      : 'text-primary group-hover:text-white',
                  )}>
                  解锁
                </span>
              </>
            }
            desc={`${ctrlKeyStr} L`}
            icon={<LockOutlined className="anticon" />}
            onClick={() => {
              onClose?.();
              onActiveChange?.();
            }}
          />
          <ContextMenuItem
            title={
              <>
                <span
                  className={classnames(
                    firstSelectComponenter?.visible ? '' : 'text-primary group-hover:text-white',
                  )}>
                  隐藏
                </span>
                <span className="px-1">/</span>
                <span
                  className={classnames(
                    firstSelectComponenter?.visible ? 'text-primary group-hover:text-white' : '',
                  )}>
                  显示
                </span>
              </>
            }
            desc={`${ctrlKeyStr} H`}
            icon={<EyeOutlined className="anticon" />}
            onClick={() => {
              onClose?.();
              onVisibleChange?.();
            }}
          />
        </div>
      )}

      <div>
        {isSelectOne && (
          <ContextMenuItem
            title="重命名"
            desc={`${ctrlKeyStr} R`}
            icon={<EditOutlined className="anticon" />}
            disabled={!isSelectOne}
            onClick={() => {
              onClose?.();
              onEdit?.();
            }}
          />
        )}
        <ContextMenuItem
          title="删除"
          desc="<-"
          icon={<DeleteOutlined className="anticon" />}
          onClick={() => {
            onClose?.();
            onRemove?.();
          }}
        />
      </div>
    </div>
  );
};

export default RightClickContextMenu;