import React, { useState } from 'react';
import { Button } from '@easyv/antd';
import { Portal } from '../../../components/Portal';
import FontIcon from '../../../components/FontIcon';
import style from './PreviewModal.less';
import classnames from 'classnames';
import {getAssetsUrl} from 'utils/utils';

export function PreviewModal({ visible, current, list, onClick, onClose }) {
  const [index, setIndex] = useState(current);
  if (!visible) return null;

  const isFirst = index === 0;
  const isLast = index === list.length - 1;
  const onPrev = () => {
    if (isFirst) return;
    setIndex(index - 1);
  };
  const onNext = () => {
    if (isLast) return;
    setIndex(index + 1);
  };

  return (
    <Portal opacity={0.5} onClose={onClose}>
      <div className={style.container}>
        <div className={style.thumb_wrapper}>
          <img src={getAssetsUrl(`${list[index].previewThumb}`)} />
          <div className={style.float_layer}>
            <Button type="primary" onClick={() => onClick(list[index].id)}>
              创建大屏
            </Button>
          </div>
        </div>
        <FontIcon
          icon="icon-icon_fold"
          className={classnames(style.left_btn, {
            [style['btn--disabled']]: isFirst
          })}
          onClick={onPrev}></FontIcon>
        <FontIcon
          icon="icon-icon_fold"
          className={classnames(style.right_btn, {
            [style['btn--disabled']]: isLast
          })}
          onClick={onNext}></FontIcon>
      </div>
    </Portal>
  );
}
