import React from 'react';
import classaames from 'classnames';
import { DragOutlined, SyncOutlined, ExpandAltOutlined } from '@easyv/react-icons';
import { TransformMode, isCtrlKey, ctrlKeyStr } from '@easytwin/core';
import { useKey } from 'react-use';
import { Tooltip } from 'antd';

const TransformModeInfos: {
  key: TransformMode;
  icon: React.ReactNode;
  tooltip: string;
}[] = [
  {
    key: 'translate',
    icon: <DragOutlined className="anticon" />,
    tooltip: `${ctrlKeyStr} Q`,
  },
  {
    key: 'rotate',
    icon: <SyncOutlined className="anticon" />,
    tooltip: `${ctrlKeyStr} W`,
  },
  {
    key: 'scale',
    icon: <ExpandAltOutlined className="anticon" />,
    tooltip: `${ctrlKeyStr} E`,
  },
];
export interface TransformButtonGroupProp {
  initMode?: TransformMode;
  className?: string;
  onClick?: (mode: TransformMode) => void;
}

const TransformButtonGroup: React.FC<TransformButtonGroupProp> = function ({
  initMode,
  className,
  onClick,
}) {
  const [selectMode, setSelectMode] = React.useState<TransformMode>(initMode || 'translate');

  const handleClickBtn = (mode: TransformMode) => {
    setSelectMode(mode);
    onClick?.(mode);
  };

  useKey(
    (e) => isCtrlKey(e) && e.code === 'KeyQ',
    () => handleClickBtn('translate'),
    undefined,
    [handleClickBtn],
  );
  useKey(
    (e) => isCtrlKey(e) && e.code === 'KeyW',
    () => handleClickBtn('rotate'),
    undefined,
    [handleClickBtn],
  );
  useKey(
    (e) => isCtrlKey(e) && e.code === 'KeyE',
    () => handleClickBtn('scale'),
    undefined,
    [handleClickBtn],
  );

  return (
    <div className={classaames('flex flex-col cursor-pointer', className)}>
      {TransformModeInfos.map(({ key, icon, tooltip }) => (
        <Tooltip
          key={key}
          title={() => <span className="text-textColorBase text-xs">{tooltip}</span>}
          placement="right">
          <span
            className={classaames(
              'p-1.5 bg-bgColorBase border hover:border-primary hover:text-primary anticon',
              selectMode === key ? 'border-primary' : 'border-borderColorBase',
            )}
            onClick={() => handleClickBtn(key)}>
            <span
              className={classaames({
                'text-primary': selectMode === key,
              })}>
              {icon}
            </span>
          </span>
        </Tooltip>
      ))}
    </div>
  );
};

export default TransformButtonGroup;