import { Button, Upload } from 'antd';
import { useState } from 'react';

// import styles from './style.less';

function beforeUpload(file) {
  const isMp4 = file.type === 'video/mp4';
  if (!isMp4) {
    message.error('请上传 MP4 视频!');
  }

  return isMp4;
}

export default (props) => {
  const { value, onChange } = props;

  const [loading, setLoading] = useState(false);

  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'error') {
      setLoading(false);
      return;
    }

    if (info.file.status === 'done') {
      setLoading(false);
      onChange(info.file.response);
    }
  };

  return (
    <div>
      <Upload
      accept='video/*'
        action={'/video/upload'}
        className="image-uploader"
        showUploadList={false}
        // beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        <Button loading={loading}>点击上传视频</Button>
      </Upload>
      {!!value && (
        <video width="320" height="240" controls>
          <source src={value} type="video/mp4" />
        </video>
      )}
    </div>
  );
};
