import KFModal from '@/components/KFModal';
import { ResourceVersionData } from '@/pages/Dataset/config';
import { Typography, message, type ModalProps } from 'antd';
import classNames from 'classnames';
import { useState } from 'react';
import styles from './index.less';

interface VersionSelectorModalProps extends Omit<ModalProps, 'onOk'> {
  versions: ResourceVersionData[];
  onOk: (versions: string[]) => void;
}

function VersionSelectorModal({ versions, onOk, ...rest }: VersionSelectorModalProps) {
  const [selVersions, setSelVersions] = useState<string[]>([]);

  const handleOk = () => {
    if (selVersions.length !== 2) {
      message.error('请选择两个版本进行对比');
      return;
    }
    onOk(selVersions);
  };

  const handleClick = (version: string) => {
    setSelVersions((prev) => {
      if (prev.includes(version)) {
        return prev.filter((item) => item !== version);
      }
      return [...prev, version];
    });
  };

  return (
    <KFModal
      {...rest}
      title="请选择版本"
      width={825}
      onOk={handleOk}
      className={styles['version-selector-modal']}
    >
      <div className={styles['version-selector']}>
        {versions.map((item) => {
          return (
            <div
              key={item.name}
              className={classNames(styles['version-selector__item'], {
                [styles['version-selector__item--active']]: selVersions.includes(item.name),
              })}
              onClick={() => handleClick(item.name)}
            >
              <img src={require('@/assets/img/dataset-version.png')} alt="" draggable={false} />
              <Typography.Text ellipsis={{ tooltip: item.name }}>{item.name}</Typography.Text>
            </div>
          );
        })}
      </div>
    </KFModal>
  );
}

export default VersionSelectorModal;
