import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Button from '../Button/Button';
import IconButton from '../Button/IconButton';

const DeleteIcon = require('../../visuals/Icon/svg/ic_delete.svg');

class FileUpload extends Component {
  static propTypes = {
    preview: PropTypes.any,
    buttonLabel: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    accept: PropTypes.string,
    semantic: PropTypes.string,
    onChange: PropTypes.func,
    onDelete: PropTypes.func,
  };
  static defaultProps = {
    preview: null,
    accept: null,
    semantic: '',
    onChange: null,
    onDelete: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      fileContent: null,
    };
  }

  onButtonClick = () => {
    this.inputFile.click();
  };

  onInternalChange = e => {
    const { files } = e.target;
    if (files.length > 0) {
      const dataUrlReader = new FileReader();
      const arrayBufferReader = new FileReader();
      const { type } = files[0];

      // needed for uploading avatar in correct format
      arrayBufferReader.onload = arrayBufferReaderEvent => {
        const int8View = new Int8Array(arrayBufferReaderEvent.target.result);
        if (this.props.onChange) {
          this.props.onChange(int8View, type);
        }
      };
      arrayBufferReader.readAsArrayBuffer(files[0]);

      // needed for displaying avatar preview
      dataUrlReader.onload = dataUrlReaderEvent => {
        this.setState({
          fileContent: dataUrlReaderEvent.target.result,
        });
      };
      dataUrlReader.readAsDataURL(files[0]);
    }
  };

  onDeleteFile = e => {
    e.preventDefault();
    this.props.onDelete();
  };

  render() {
    const { preview, buttonLabel, name, accept, semantic, onDelete } = this.props;
    const { fileContent } = this.state;

    return (
      <div className="FileUpload">
        {preview && <div className="FileUpload-preview">{React.cloneElement(preview, { fileContent })}</div>}
        <div className="FileUpload-button">
          <input
            className="FileUpload-input"
            name={name}
            type="file"
            accept={accept}
            onChange={this.onInternalChange}
            ref={node => {
              this.inputFile = node;
            }}
          />
          <Button variant="white" onClick={this.onButtonClick}>
            {buttonLabel}
          </Button>
        </div>
        {onDelete && (
          <IconButton
            className="FileUpload-delete"
            icon={DeleteIcon}
            semantic={semantic}
            variant="white"
            dimension="small"
            onClick={e => this.onDeleteFile(e)}
          />
        )}
      </div>
    );
  }
}

export default FileUpload;