import React from 'react';
// import { message } from 'antd';
import { AssetTypeEnum, AssetInfo } from '@easytwin/core';
// import { PlusOutlined } from '@easyv/react-icons';

import { MenuItem, PreviewImage } from '@/components';
import { AssetTypeInfos } from '@/constants';
import { useAsset, useAssetCategory } from '../../module';

// const AssetTypeGroupInfo: { key: string; label: string }[] = [
//   // {
//   //   key: '',
//   //   label: '全部',
//   // },
//   ...Object.entries(AssetTypeInfo)
//     .filter((i) => !i[1].planned)
//     .map((i) => ({
//       key: i[0],
//       label: i[1].label,
//     })),
// ];

export interface AssetSelectProp {
  onSelect?: (asset: AssetInfo) => void;
  onMouseLeave?: () => void;
}

const AssetSelect: React.FC<AssetSelectProp> = function ({ onSelect, onMouseLeave }) {
  const { assetList, getAssetList } = useAsset();

  const { assetCategoryList } = useAssetCategory();

  const [currentIndex, setCurrentIndex] = React.useState<number>(0);

  const selectAssteGroupKey = assetCategoryList[currentIndex]?.id;

  React.useEffect(() => {
    getAssetList({
      id: selectAssteGroupKey,
    });
  }, [getAssetList, selectAssteGroupKey]);

  return (
    <div className="inline-flex h-94 rounded-sm text-xs bg-bgColorBase" onMouseLeave={onMouseLeave}>
      {/* left menu */}
      <div className="w-30 bg-bgColorMain flex flex-col">
        <div className="px-1 pt-2 flex-auto overflow-y-auto">
          {assetCategoryList.map(({ id, name }, index) => (
            <MenuItem
              key={id}
              className="!h-8 !px-2 text-xs rounded"
              dataSource={{
                key: id,
                label: name,
              }}
              isActive={selectAssteGroupKey === id}
              onClick={() => setCurrentIndex(index)}
            />
          ))}
        </div>
      </div>

      {/* right content */}
      <div className="p-4">
        <div className="h-full overflow-y-auto">
          <div className="gap-x-3 gap-y-3 grid grid-cols-2">
            {/* <div
              className="cursor-pointer w-30 h-20 rounded flex flex-col justify-center items-center gap-y-2 border border-dashed border-textColorSecondary bg-bgColorBase rounded hover:text-primary hover:border-primary transition-all group"
              onClick={() => message.info('coding...')}
            >
              <PlusOutlined className="anticon text-2xl" />
            </div> */}
            {assetList?.map((item) => (
              <div
                key={item.id}
                className="group cursor-pointer w-30"
                onClick={() => onSelect?.(item)}>
                {item?.thumb && (
                  <PreviewImage
                    key={item.id}
                    src={item?.thumb}
                    className="!h-20 border border-borderColorBase group-hover:border group-hover:border-primary"
                  />
                )}
                <div className="h-4 text-center text-textColorBase text-xs group-hover:text-primary">
                  {item.name}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AssetSelect;