import * as React from 'react';
import { Field, reduxForm } from 'redux-form';
import { withStyles } from '@material-ui/core/styles';
import * as _ from 'lodash';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import { translate } from 'react-i18next';

import { FILES_FORM } from 'datasets/constants';

import ItemsEditor from 'ui/common/ItemsEditor';
import { TextField } from 'ui/common/text-field';
import Dataset from 'model/catalog/Dataset';
import RepositoryFile from 'model/repository/RepositoryFile';

interface IFilesFormProps extends React.ClassAttributes<any> {
  initialValues: any;
  fields: any;
  classes: any;
  dataset: Dataset;
  uploadRepositoryFile: (file: File) => any;
  updateRepositoryFile: (repositoryFile: RepositoryFile) => any;
  deleteRepositoryFile: (fileRepositoryUUID: string) => any;
  t: any;
}

const styleSheet = (theme) => ({
  /*tslint:disable*/
  root: {
    padding: '20px',

    '& > div > div.items-editor-item + div.items-editor-additem': {
      marginTop: '20px',
    },
  },
});

class FilesForm extends React.Component<IFilesFormProps, any> {

  protected update = (fields, index) => () => {
    const { updateRepositoryFile, dataset } = this.props;

    const value = fields.get(index);
    const repositoryFile = dataset.repositoryFiles.find((e) => e.uuid === value.uuid);

    if (!_.isEqual({ ...repositoryFile }, { ...value })) {
      updateRepositoryFile(value);
    }
  };

  protected upload = (e) => {
    const { uploadRepositoryFile } = this.props;
    const file = e.target.files[0];
    uploadRepositoryFile(file);
  };

  protected onAddMember = () => {
    return new RepositoryFile();
  };

  protected onRemoveMember = (item) => {
    const { dataset, deleteRepositoryFile } = this.props;
    const uuid = _.get(dataset, `${item}.uuid`);
    if (uuid) {
      deleteRepositoryFile(uuid);
    }
  };

  private FilesEditor = (member, index, fields) => {
    const { t } = this.props;

    return (
      fields.get(`[${index}].uuid`) ? (
        <Grid container key={ index } justify="space-between" alignItems="flex-end">
          <Grid item xs={ 12 } lg={ 4 }>
            <Field
              name={ `${member}.originalFilename` }
              type="text"
              component={ TextField }
              disabled label={ t('datasets.dashboard.p.stepper.attachments.name') }
            />
          </Grid>
          <Grid item xs={ 12 } sm={ 6 } lg={ 2 }>
            <Field
              name={ `${member}.title` }
              type="text"
              component={ TextField }
              label={ t('datasets.dashboard.p.stepper.attachments.label') }
              onBlur={ this.update(fields, index) }
              disabled={ !fields.get(`[${index}].uuid`) }
            />
          </Grid>
          <Grid item xs={ 12 } sm={ 6 } lg={ 6 }>
            <Field
              name={ `${member}.description` }
              type="text"
              component={ TextField }
              label={ t('datasets.dashboard.p.stepper.attachments.description') }
              onBlur={ this.update(fields, index) }
              disabled={ !fields.get(`[${index}].uuid`) }
            />
          </Grid>
        </Grid>
      ) : (
        <div>
          <input
            id="file"
            type="file"
            accept=".csv, .xls, .xlsx, .docx, .doc, .pdf, .txt"
            style={ { display: 'none' } }
            onChange={ this.upload }
          />
          <label htmlFor="file">
            <Button variant="contained" component="span">
              { t('datasets.dashboard.p.stepper.attachments.upload') }
            </Button>
          </label>
        </div>
      )
    );
  };

  public render() {
    const { classes, t } = this.props;

    return (
      <form className={ classes.root }>
        <ItemsEditor
          name="repositoryFiles"
          itemLabel={ t('datasets.dashboard.p.stepper.attachments.datasetFile') }
          addItem={ this.onAddMember }
          removeItem={ this.onRemoveMember }
          component={ this.FilesEditor }
        />
      </form>
    );
  }
}

const styled = withStyles(styleSheet)(FilesForm);

export default translate()(reduxForm({
  form: FILES_FORM,
  enableReinitialize: true,
})(styled));