import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Dropzone from 'react-dropzone';
import { withStyles } from '@material-ui/core/styles';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Send from '@material-ui/icons/Send';
import ActionDelete from '@material-ui/icons/Delete';
import dummy from 'ba-api/dummyContents';
import { IconButton, Fab, MenuItem, FormControl, Avatar, Paper, Select, Tooltip } from '@material-ui/core';
import styles from './jss/writePost-jss';


function isImage(file) {
  const fileName = file.name || file.path;
  const suffix = fileName.substr(fileName.indexOf('.') + 1).toLowerCase();
  if (suffix === 'jpg' || suffix === 'jpeg' || suffix === 'bmp' || suffix === 'png') {
    return true;
  }
  return false;
}

class WritePost extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      privacy: 'public',
      files: [],
      message: ''
    };
    this.onDrop = this.onDrop.bind(this);
  }

  onDrop(filesVal) {
    const { files } = this.state;
    let oldFiles = files;
    const filesLimit = 2;
    oldFiles = oldFiles.concat(filesVal);
    if (oldFiles.length > filesLimit) {
      console.log('Cannot upload more than ' + filesLimit + ' items.');
    } else {
      this.setState({ files: filesVal });
    }
  }

  handleRemove(file, fileIndex) {
    const thisFiles = this.state.files;
    // This is to prevent memory leaks.
    window.URL.revokeObjectURL(file.preview);

    thisFiles.splice(fileIndex, 1);
    this.setState({ files: thisFiles });
  }

  handleChange = event => {
    this.setState({ privacy: event.target.value });
  };

  handleWrite = event => {
    this.setState({ message: event.target.value });
  };

  handlePost = (message, files, privacy) => {
    // Submit Post to reducer
    this.props.submitPost(message, files, privacy);
    // Reset all fields
    this.setState({
      privacy: 'public',
      files: [],
      message: ''
    });
  }

  render() {
    const { classes } = this.props;
    let dropzoneRef;
    const { privacy, files, message } = this.state;
    const acceptedFiles = ['image/jpeg', 'image/png', 'image/bmp'];
    const fileSizeLimit = 3000000;
    const deleteBtn = (file, index) => (
      <div className={classNames(classes.removeBtn, 'middle')}>
        <IconButton onClick={() => this.handleRemove(file, index)}>
          <ActionDelete className="removeBtn" />
        </IconButton>
      </div>
    );
    const previews = filesArray => filesArray.map((file, index) => {
      const path = URL.createObjectURL(file) || '/pic' + file.path;
      if (isImage(file)) {
        return (
          <div key={index.toString()}>
            <figure><img src={path} alt="preview" /></figure>
            {deleteBtn(file, index)}
          </div>
        );
      }
      return false;
    });
    return (
      <div className={classes.statusWrap}>
        <Paper>
          <Avatar alt="avatar" src={dummy.user.avatar} className={classes.avatarMini} />
          <textarea
            row="2"
            placeholder="What's on your mind?"
            value={message}
            onChange={this.handleWrite}
          />
          <Dropzone
            className={classes.hiddenDropzone}
            accept={acceptedFiles.join(',')}
            acceptClassName="stripes"
            onDrop={this.onDrop}
            maxSize={fileSizeLimit}
            ref={(node) => { dropzoneRef = node; }}
          >
            {({ getRootProps, getInputProps }) => (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
              </div>
            )}
          </Dropzone>
          <div className={classes.preview}>
            {previews(files)}
          </div>
          <div className={classes.control}>
            <Tooltip id="tooltip-upload" title="Upload Photo">
              <IconButton
                className={classes.button}
                component="button"
                onClick={() => {
                  dropzoneRef.open();
                }}
              >
                <PhotoCamera />
              </IconButton>
            </Tooltip>
            <div className={classes.privacy}>
              <FormControl className={classes.formControl}>
                <Select
                  value={privacy}
                  onChange={this.handleChange}
                  name="privacy"
                  className={classes.selectEmpty}
                >
                  <MenuItem value="public">Public</MenuItem>
                  <MenuItem value="friends">Friends</MenuItem>
                  <MenuItem value="private">Only Me</MenuItem>
                </Select>
              </FormControl>
            </div>
            <Tooltip id="tooltip-post" title="Post">
              <Fab onClick={() => this.handlePost(message, files, privacy)} size="small" color="secondary" aria-label="send" className={classes.sendBtn}>
                <Send />
              </Fab>
            </Tooltip>
          </div>
        </Paper>
      </div>
    );
  }
}

WritePost.propTypes = {
  classes: PropTypes.object.isRequired,
  submitPost: PropTypes.func.isRequired
};

export default withStyles(styles)(WritePost);