import React from 'react';
import classnames from 'classnames';
import { Input, Space } from 'antd';
import { EditOutlined, DeleteOutlined } from '@easyv/react-icons';

export interface MenuItemDataSource {
  key: string;
  label: string;
  desc?: string;
}

export interface MenuItemProp {
  dataSource: MenuItemDataSource;
  isActive: boolean;
  showExtend?: boolean;
  className?: string;
  canEdit?: boolean;
  onClick: (key: string) => void;
  onDropProject?: (key: string) => void;
  onEditName?: (id: string, name: string) => void;
  onRomove?: (key: string) => void;
}

const MenuItem: React.FC<MenuItemProp> = function ({
  dataSource,
  isActive,
  showExtend,
  className,
  canEdit = true,
  onClick,
  onDropProject,
  onEditName,
  onRomove,
}) {
  const [editing, setEditing] = React.useState<boolean>(false);

  return (
    <div
      className={classnames(
        'group',
        'cursor-pointer h-10 pl-10 pr-5 flex justify-between items-center',
        {
          'bg-primary': isActive,
        },
        isActive ? 'text-white' : 'text-textColorSecondary hover:bg-bgColorHover hover:text-white',
        className,
      )}
      onClick={() => onClick(dataSource.key)}
      onDrop={() => onDropProject?.(dataSource.key)}
      onDragOver={(e) => {
        e.preventDefault();
      }}>
      {editing ? (
        <div className="bg-dark-600">
          <Input
            autoFocus
            defaultValue={dataSource.label}
            placeholder="组名称输入不可为空"
            onPressEnter={({ currentTarget: { value } }) => {
              value && onEditName?.(dataSource.key, value);
              setEditing(false);
            }}
            onBlur={({ currentTarget: { value } }) => {
              value && onEditName?.(dataSource.key, value);
              setEditing(false);
            }}
          />
        </div>
      ) : (
        <>
          <span className="flex-auto truncate" onDoubleClick={() => canEdit && setEditing(true)}>
            {dataSource.label}
          </span>
          {dataSource.desc && (
            <span
              className={classnames('min-w-10 text-right', {
                'group-hover:hidden': showExtend,
              })}>
              {dataSource.desc}
            </span>
          )}
          {showExtend && (
            <span
              className={classnames(
                'hidden text-primary group-hover:block ',
                isActive ? 'group-hover:text-white' : '',
              )}>
              <Space>
                <EditOutlined
                  className="anticon"
                  onClick={(e) => {
                    e.stopPropagation();
                    canEdit && setEditing(true);
                  }}
                />
                <DeleteOutlined
                  className="anticon"
                  onClick={(e) => {
                    e.stopPropagation();
                    onRomove?.(dataSource.key);
                  }}
                />
              </Space>
            </span>
          )}
        </>
      )}
    </div>
  );
};

export default MenuItem;