import React from 'react';
import styles from './index.less';
import { PlusOutlined } from '@ant-design/icons';
import classnames from 'classnames';
import { Image } from '@easyv/antd';
import VideoComponent from './video';
import defaultThumb from 'images/resource_default.png';
import {getAssetsUrl} from 'utils/utils';

function CardItem({
  onActive,
  name,
  type,
  thumb,
  id,
  onUpload,
  disabled,
  value
}: {
  onActive?: (x: number) => void;
  onUpload?: () => void;
  id?: number;
  disabled?: boolean;
  thumb?: string;
  name?: string;
  type?: string | number;
  value?: number;
}) {
  const isUpload = type === 'upload'; // 1图片，2视频，upload
  const uplodaChange = () => {
    if (isUpload) {
      onUpload && onUpload();
    } else {
      onActive && !disabled && id && onActive(id);
    }
  };
  return (
    <div className={classnames(styles.card_item, value === id && !isUpload ? styles.active : '', disabled ? styles.disabled : styles.hove)}>
      <div onClick={uplodaChange} className={classnames(styles.card_cove, !isUpload ? styles.item : styles.upload)}>
        {isUpload ? (
          <PlusOutlined />
        ) : id ? (
          type === 1 ? (
            <Image preview={false} fallback={defaultThumb} src={getAssetsUrl(thumb)} />
          ) : type === 2 ? (
            <VideoComponent url={getAssetsUrl(thumb)} />
          ) : null
        ) : null}
      </div>
      <span className={styles.card_name}>{!isUpload ? name : ''}</span>
    </div>
  );
}

export default CardItem;
