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

import documentAction from 'actions/files';
import modalAction from 'actions/modals';

import CPInputFile from 'components/InputFile/inputMassa';

import documentService from 'services/DocumentService';


class InputFile extends Component {
  setServerId = (fileId, serverId) => {
    const { dispatch } = this.props;
    dispatch(documentAction.setServerId(fileId, serverId));
  };

  sendToS3 = (companyId, token, file, cb) => {
    const { dispatch } = this.props;
    documentService.create(companyId, token, file, dispatch)
      .then((response) => {
        this.setServerId(file._id, response[0].id);
      }).catch(() => cb());
  };


  toogleFileModal = state => this.props.dispatch(modalAction.toggle('inputFile', state))


  handleDeleteFile = (id) => {
    const { dispatch } = this.props;
    dispatch(documentAction.removeFile(id));
    return id;
  }

  // TODO: Upload no arquivo após clicar em salvar. Retornar key do amazon e link. Transação recebe os dados da amazon e cria documento no banco com eles.

  addFilesToState = (files) => {
    const { dispatch } = this.props;
    dispatch(documentAction.addFiles(files));
  };

  render() {
    const { modals, files } = this.props;
    const inputFileProps = {
      files,
      addFilesToState: this.addFilesToState,
      sendToS3: this.sendToS3,
      setServerId: this.setServerId,
      toogleFileModal: this.toogleFileModal,
      fileModalProps: {
        files,
        isOpen: modals.inputFile.isOpen,
        toogleFileModal: this.toogleFileModal,
        handleUpdateLoading: this.handleUpdateLoading,
        handleDeleteFile: this.handleDeleteFile,
        handleChangeCheckbox: this.handleChangeCheckbox,
      },
    };

    return (
      <CPInputFile {...inputFileProps} />
    );
  }
}

InputFile.propTypes = {
  dispatch: PropTypes.func.isRequired,
  modals: PropTypes.shape().isRequired,
  files: PropTypes.shape().isRequired,
};

const inputFile = connect(state => ({
  modals: state.modals,
  company: state.main.userCompanyId,
  token: state.auth.userToken,
  files: state.files.files,
}))(InputFile);

export default inputFile;

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CSSModules from 'react-css-modules';
import async from 'async';
import _ from 'lodash';

import CSSModulesConfig from 'config/cssModules';
import Icon from 'components/Icon';
import FileModal from './FileModal';

import style from './style.styl';

@CSSModules(style, CSSModulesConfig)
class InputFile extends Component {
  uploadFiles = (companyId, token, filesToUpload) => {
    const { sendToS3 } = this.props;
    async.each(filesToUpload, (file, cb) => {
      sendToS3(companyId, token, file, cb);
    }, (err) => {
      console.log(err);
    });
  };

  checkedFileType = (files) => {
    const types = ['.pdf', '.jpeg'];
    let validated = false;

    return _.map(files, (file) => {
      _.map(types, (type) => {
        const valid = file.name.indexOf(type);
        if (valid >= 0) {
          validated = ({
            _id: Math.random() * Date.now(),
            filename: file.name,
            filesize: file.size,
            isPayment: false,
            isExpense: false,
            loading: 0,
            file,
          });
        }
      });

      return validated;
    });
  }

  openFileWindow = () => this.inputFile.click();

  shouldOpenFileWindow = () => {
    const { toogleFileModal, files } = this.props;
    if (files.length === 0) this.openFileWindow();
    else toogleFileModal(false);
  };

  handleChangeInputFile = (event) => {
    const {
      addFilesToState,
      toogleFileModal,
    } = this.props;

    const files = this.checkedFileType(event.target.files);
    _.remove(files, file => file === false);
    if (files !== []) {
      addFilesToState(files);
      this.uploadFiles(this.props.company, this.props.token, files);
    }


    // TODO:  Apagar os dados do input DEPOIS que o upload for finalizado
    this.inputFile.value = '';
    toogleFileModal(false);
  }

  handleChangeCheckbox = (id, checked, checkbox) =>

    // files[index][checkbox] = checked;

    id

    // dispatch para mudar tipo de documento

  ;


  render() {
    const {
      fileModalProps,
      shouldOpenFileWindow,
    } = this.props;

    return (
      <label styleName="inputFile">
        <Icon name="attachment" />
        <button
          type="button"
          styleName="button"
          onClick={this.shouldOpenFileWindow}
        >
          Anexar documentos comprobatórios
        </button>

        <input
          ref={(input) => {
            this.inputFile = input;
            return this.inputFile;
          }}
          type="file"
          multiple
          onChange={this.handleChangeInputFile}
        />

        <FileModal
          openFileWindow={this.openFileWindow}
          {...fileModalProps}
        />
      </label>
    );
  }
}

InputFile.propTypes = {
  handleChangeInputFile: PropTypes.func.isRequired,
  shouldOpenFileWindow: PropTypes.func.isRequired,
  addFilesToState: PropTypes.func.isRequired,
  toogleFileModal: PropTypes.func.isRequired,
  sendToS3: PropTypes.func.isRequired,
  fileModalProps: PropTypes.shape().isRequired,
  files: PropTypes.arrayOf(Object).isRequired,
};

export default InputFile;

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';


import Modal from 'components/Modal';
import Button from 'components/Button';
import ButtonGroup from 'components/ButtonGroup';
import File from '../File';
import Empty from '../Empty';

const FileModal = (props) => {
  const {
    isOpen,
    files,
    handleChangeCheckbox,
    handleDeleteFile,
    openFileWindow,
    toogleFileModal,
  } = props;


  return (<Modal
    contentLabel="inputFileModal"
    isOpen={isOpen}
    onRequestClose={() => toogleFileModal(true)}
    file
  >
    <div>
      <section>
        <h3 >Anexar documentos</h3>

        {
          files.length > 0
            ? (
              _.map(files, file => (
                <File
                  key={file._id}
                  id={file._id}
                  handleChangePayment={event => handleChangeCheckbox(file._id, event.target.checked, 'isPayment')}
                  handleChangeExpense={event => handleChangeCheckbox(file._id, event.target.checked, 'isExpense')}
                  handleDeleteFile={() => handleDeleteFile(file._id)}
                />
              ))
            ) : <Empty openFileWindow={openFileWindow} />
        }
      </section>
      <footer>
        <ButtonGroup right>
          <Button
            basic
            label="Anexar mais documentos"
            onClick={openFileWindow}
          />
          <Button
            label="Salvar"
            onClick={() => toogleFileModal(true)}
          />
        </ButtonGroup>
      </footer>
    </div>
  </Modal>);
};

FileModal.defaultProps = {
  isOpen: false,
};

FileModal.propTypes = {
  isOpen: PropTypes.bool,
};

export default FileModal;

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

import CSSModulesConfig from 'config/cssModules';
import Icon from 'components/Icon';
import Loading from 'components/Loading';

import style from './style';

@CSSModules(style, CSSModulesConfig)
class File extends Component {
  render() {
    const {
      handleChangeExpense,
      handleChangePayment,
      handleDeleteFile,
    } = this.props;

    const {
      filename,
      filesize,
      isExpense,
      isPayment,
      loading,
    } = this.props.fileData;

    let size = filesize / 1000;
    size = `${size.toFixed(2)} KB`;
    return (
      <section styleName="container">
        <Icon className={style.icon} name="lion" />

        <div>
          {
            loading === 100
              ? (
                <div styleName="info">
                  <div styleName="name is-primary">{filename}</div>
                  <div styleName="size is-primary">{size}</div>
                </div>
              ) : (
                <div styleName="info">
                  <div styleName="name">{filename}</div>
                  <div styleName="bar">
                    <div style={{ width: `${loading}%` }} data-percent={`${loading}%`} />
                  </div>
                  <Loading />
                </div>
              )
          }

          <div>
            <span styleName="label">Tipo de documento:</span>
            <div styleName="check">
              <div className="u-mr20">
                <input
                  className="u-mr5"
                  type="checkbox"
                  onChange={handleChangePayment}
                  checked={isPayment}
                />
                Comprovante de pagamento
              </div>
              <div>
                <input
                  className="u-mr5"
                  type="checkbox"
                  onChange={handleChangeExpense}
                  checked={isExpense}
                />
                Comprovante de despesa
              </div>
            </div>
          </div>

        </div>

        <div styleName="icons" onClick={handleDeleteFile}>
          <Icon name="trash" />
        </div>
      </section>
    );
  }
}

File.propTypes = {
  handleChangeExpense: PropTypes.func.isRequired,
  handleChangePayment: PropTypes.func.isRequired,
  handleDeleteFile: PropTypes.func.isRequired,
  fileData: PropTypes.shape({
    filename: PropTypes.string.isRequired,
    filesize: PropTypes.number.isRequired,
    isExpense: PropTypes.bool.isRequired,
    isPayment: PropTypes.bool.isRequired,
    loading: PropTypes.number.isRequired,
  }).isRequired,
};

export default File;