import React from 'react';
import { Input } from 'antd';
import { PlusOutlined } from '@easyv/react-icons';
import { BizGroupInfo } from '@easytwin/core';
import { MenuItem } from '@/components';

export interface GroupMenuProp {
  title: string;
  titleIcon?: React.ReactNode;
  beforeDataSource: BizGroupInfo[];
  afterDataSource: BizGroupInfo[];
  selectKey: string | null;
  onSelect?: (id: string) => void;
  onCreate: (name: string) => void;
  onEditName?: (id: string, name: string) => void;
  onRomove?: (id: string) => void;
  onDropProject?: (id: string) => void;
}

const GroupMenu: React.FC<GroupMenuProp> = function ({
  title,
  titleIcon,
  beforeDataSource,
  afterDataSource,
  selectKey,
  onSelect,
  onCreate,
  onEditName,
  onRomove,
  onDropProject,
}) {
  const [selectGroupKey, setSelectGroupKey] = React.useState<string | null>(null);
  React.useEffect(() => {
    setSelectGroupKey(selectKey);
  }, [selectKey]);

  const [isCreating, setIsCreating] = React.useState<boolean>(false);
  const [, setSditingData] = React.useState<BizGroupInfo>();

  return (
    <div className="h-full flex flex-col">
      {/* beforeDataSource */}
      <div>
        {beforeDataSource.map((item) => (
          <MenuItem
            key={item.id}
            dataSource={{
              key: item.id,
              label: item.name,
              desc: `${item?.count  }`,
            }}
            isActive={selectGroupKey === item.id}
            showExtend={false}
            canEdit={false}
            onClick={(key) => {
              setSelectGroupKey(key);
              onSelect?.(key);
            }}
            onDropProject={onDropProject}
            onEditName={onEditName}
            onRomove={onRomove}
          />
        ))}
      </div>

      {/* afterDataSource title */}
      <div className="h-12 pl-4 pr-3 flex justify-between items-center text-textColorBase">
        <div className="flex gap-x-2 item-center">
          <span>{titleIcon}</span>
          <span>{title}</span>
        </div>
        <div
          className="w-6 h-6 cursor-pointer text-white bg-bgColorDisabled flex justify-center items-center rounded-sm"
          onClick={() => {
            setSditingData(undefined);
            setIsCreating(true);
          }}>
          <PlusOutlined />
        </div>
      </div>

      {/* afterDataSource */}
      <div className="flex-auto overflow-y-auto">
        {/* creating */}
        {isCreating && (
          <div className="h-10 pl-10 pr-5 flex items-center">
            <Input
              autoFocus
              maxLength={16}
              placeholder="请输入分组名称"
              onBlur={({ currentTarget: { value } }) => {
                value && onCreate(value);
                setIsCreating(false);
              }}
              onPressEnter={({ currentTarget: { value } }) => {
                value && onCreate(value);
                setIsCreating(false);
              }}
            />
          </div>
        )}

        {/* afterDataSource list */}
        {afterDataSource.map((item) => (
          <MenuItem
            key={item.id}
            showExtend
            dataSource={{
              key: item.id,
              label: item.name,
              desc: `${item?.count  }`,
            }}
            isActive={selectGroupKey === item.id}
            onClick={(key) => {
              setSelectGroupKey(key);
              onSelect?.(key);
            }}
            onDropProject={onDropProject}
            onEditName={onEditName}
            onRomove={onRomove}
          />
        ))}
      </div>
    </div>
  );
};

export default GroupMenu;