import React from 'react';
import styled from 'styled-components';
import { Icon, message, Popconfirm } from 'antd';
import Base64 from 'base64-js';

import { config, networkUtils } from '../../utils';

const { api } = config;
const { fm } = api;

const Tools = styled.div`
  text-align: center;
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;

  i:hover{
    cursor: pointer;
    //font-size: 2rem;
    color: #FFCC33;
  }
`;

const Item = styled.div`
  min-width: 90px;
  width: 90px;
  height: 90px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  border: 2px solid lightgray;

  &:hover img, &:hover video {
    opacity: 0.3;
    transition: .5s ease;
    backface-visibility: hidden;
  }

  &:hover ${Tools} {
    opacity: 1;
  }
`;

const renderEntity = (src, fileName) => {
  if (src.match(/.(jpg|jpeg|png|gif)$/i)) {
    // console.info
    return (<img style={{ height: '100%', width: '100%' }} src={src}/>);
  } else if (src.match(/.(mp4|webm|Ogg|3gp|flv)$/i)) {
    return (
      <video style={{ height: '100%', width: '100%' }}>
        <source src={src}/>
      </video>
    );
  } else {
    return fileName;
    // return <Icon type="file" />;
    // return (<h5>该文件类型不支持预览</h5>);
  }
};

const downloader = (data, fileName) => {
  console.log(window.navigator);

  const a = document.createElement('a');
  // a.style = 'display: none';
  a.style.display = 'none';

  document.body.appendChild(a);

  const blob = new Blob([Base64.toByteArray(data)]);
  if ('msSaveOrOpenBlob' in window.navigator) {
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  } else {
    const url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
  }
};

const handleClickPreview = (src) => {
  const win = window.open(src, '_blank');
  win.focus();
};

const handleClickDownload = (fileName, repo) => {
  // console.log(fileName);
  networkUtils.request({
    url: fm.download.replace('{repo}', repo).replace('{file}', fileName),
    method: 'get',
  }).then((data) => {
    if (data.success) {
      message.success('下载成功!');
      // this.fetchData()
      downloader(data.data, fileName);
    } else {
      throw data;;
    }
  });
};

const handleClickDelete = (fileName, repo, refresh) => {
  networkUtils.request({
    url: fm.delete.replace('{repo}', repo).replace('{file}', fileName),
    method: 'post',
  }).then((data) => {
    if (data.success) {
      message.success('删除成功!');
      refresh();
    } else {
      throw data;;
    }
  });
};

const Entity = ({ file, repo, refresh, disabled }) => {
  const src = `/repos/${repo}/${file.fileName}`;
  const downloadStyle = disabled ? 0 : 10;
  return (
    <Item>
      {renderEntity(src, file.fileName)}
      <Tools>
        {src.match(/.(jpg|jpeg|png|gif|mp4|webm|Ogg|3gp|flv)$/i) &&
        <p style={{ fontSize: 10, wordWrap: 'break-word', marginBottom: -15 }}>{file.fileName} {file.fileSizeDesc}</p>
        }
        <div>
          {src.match(/.(jpg|jpeg|png|gif|mp4|webm|Ogg|3gp|flv)$/i) &&
          <Icon type="eye-o" style={{ marginRight: 10 }} onClick={handleClickPreview.bind(this, src)}/>}
          <Icon type="download" style={{ marginRight: downloadStyle }}
                onClick={handleClickDownload.bind(this, file.fileName, repo)}/>
          {!disabled && <Popconfirm placement="top" title={'确定要删除吗？'}
                                    onConfirm={handleClickDelete.bind(this, file.fileName, repo, refresh)}>
            <Icon type="delete" style={{ color: 'red', cursor: 'pointer' }}/>
          </Popconfirm>}

        </div>
      </Tools>
    </Item>
  );
};

export default Entity;
