import classnames from 'classnames';
import { useCallback, useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
import { Space, message, notification } from 'antd';
import { ProButton } from '@/components';
import {
  useOfficialModel,
  useOfficialModelCategory,
  _officialModelCategoryList,
  _officialModelList,
  _sceneBatchModelModeOpen,
} from '../../module';
import { BatchCreateModal } from './components';

export type BatchModelPrams = { mode: 'gapless' | 'has-gap'; count?: number; modelUrl: string };

export interface OfficialModelPopupProps {
  className?: string;
  loadModel: (url: string) => void;
  onCreateBatchModelMode: (props: BatchModelPrams) => void;
}

const OfficialModelPopup: React.FC<OfficialModelPopupProps> = function ({
  className,
  loadModel,
  onCreateBatchModelMode,
}) {
  const [createBatchModal, setCreateBatchModal] = useState(false);

  const [modelUrl, setModelUrl] = useState('');

  const [selectedIndex, setSelectedKey] = useState(0);

  const [officialModelListCategory] = useRecoilState(_officialModelCategoryList);

  const [, setSceneBatchModelModeOpen] = useRecoilState(_sceneBatchModelModeOpen);

  const { getList } = useOfficialModelCategory();

  const [officialModelList] = useRecoilState(_officialModelList);

  const categoryId =
    officialModelListCategory &&
    officialModelListCategory[selectedIndex] &&
    officialModelListCategory[selectedIndex].id &&
    officialModelListCategory[selectedIndex].id;

  const { getList: getModelList } = useOfficialModel();

  useEffect(() => {
    getList();
  }, []);

  useEffect(() => {
    if (categoryId) {
      getModelList(3);
    }
  }, [categoryId]);

  return (
    <div
      className={classnames(
        'w-full h-full bg-bgColorMain relative border-l border-black overflow-hidden',
        className,
      )}>
      <div
        style={{
          background: '#3D404D',
          height: 32,
          lineHeight: '32px',
          color: '#B4B7C1',
          textAlign: 'center',
        }}>
        官方模型库
      </div>
      <div
        style={{
          height: '100%',
          display: 'flex',
          flex: 1,
        }}>
        <div
          className="bg-bgColorBase border-r border-black"
          style={{
            width: '10rem',
            height: '100%',
          }}>
          {officialModelListCategory?.map((item, index) => {
            const isSelected = index === selectedIndex;
            return (
              <div
                key={index}
                className={classnames({
                  'bg-primary': isSelected,
                  'text-white': isSelected,
                })}
                style={{
                  height: 28,
                  lineHeight: '28px',
                  paddingLeft: 12,
                }}
                onClick={() => setSelectedKey(index)}>
                {item.name}
              </div>
            );
          })}
        </div>
        <div
          className="grid w-full"
          style={{
            gridTemplateColumns: 'repeat(auto-fill,minmax(158px,1fr))',
          }}>
          {officialModelList?.map((item, index) => {
            const modelUrl = `/${  item.content}`;
            return (
              <div
                key={index}
                className="flex items-center justify-center"
                style={{
                  padding: 8,
                  flexDirection: 'column',
                }}>
                <div
                  style={{
                    width: 104,
                    height: 78,
                    background:
                      `100% / 100% no-repeat url(${ 
                      import.meta.env.VITE_ASSETS_URL 
                      }/${ 
                      item.thumb 
                      })`,
                    position: 'relative',
                  }}>
                  <div
                    className="absolute flex items-center justify-center w-full h-full"
                    style={{
                      background:
                        'linear-gradient(0deg, rgba(24, 27, 36, 0.35), rgba(24, 27, 36, 0.35))',
                    }}>
                    <Space direction="vertical" align="center">
                      <ProButton
                        size="small"
                        type="primary"
                        proType="subPrimary"
                        onClick={() => {
                          loadModel?.(modelUrl);
                        }}>
                        单体
                      </ProButton>
                      <ProButton
                        type="primary"
                        size="small"
                        onClick={() => {
                          setModelUrl(modelUrl);
                          setCreateBatchModal(true);
                        }}>
                        批量
                      </ProButton>
                    </Space>
                  </div>
                </div>
                <div>{item.name}</div>
              </div>
            );
          })}
        </div>
      </div>
      {createBatchModal && (
        <BatchCreateModal
          dataSource={{ mode: 'gapless', count: 0 }}
          onOk={(props) => {
            // message.info('进入批量创建模式化');
            notification.success({
              message: '进入批量创建模式化',
              description: '已进入新建模式，可通过鼠标在场景内点击拾取位置。',
              placement: 'topRight',
            });
            setCreateBatchModal(false);
            modelUrl && onCreateBatchModelMode?.({ ...props, modelUrl });
            setSceneBatchModelModeOpen(true);
          }}
          onCancel={() => {
            setCreateBatchModal(false);
          }}
        />
      )}
    </div>
  );
};

export default OfficialModelPopup;