import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { FieldArray, Field, withFormik } from 'formik';
import { TextField } from 'redux-form-material-ui';
import Button from '@material-ui/core/Button';
import SvgIcon from '@material-ui/core/SvgIcon';
import { withStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import Dropzone from 'react-dropzone';
import PropTypes from 'prop-types';
import { DropZoneTitle, AttachmentItem } from '../../components/DropZone';
import { svgIconPath, countDays } from '../../helpers';
import { playerActions, revisionActions, videoActions } from '../../actions';

const styles = {
  colorPrimary: {
    backgroundColor: '#2C8B3F',
    borderRadius: '50%'
  },
  circleStatic: {
    color: 'rgba(0,0,0,0.2)',
    borderRadius: 5
  },
  raised: {
    backgroundColor: '#212121',
    color: '#fff'
  },
  outlined: {
    backgroundColor: 'rgba(98,2,238,0)',
    border: '1px solid rgba(0,0,0,0.12)',
    marginRight: 10
  }
};

class RevisionPage extends Component {
  componentDidMount() {
    const {
      currentVideo: { _id: videoId },
      match: {
        params: { id }
      },
      getVideoById,
      getRevision,
      videoContentId
    } = this.props;
    if (!videoId && id) {
      getVideoById(id).then(() => {
        if (!videoContentId) getRevision(id);
      });
    }
  }

  componentWillUnmount() {
    this.props.clearCurVideo();
    this.props.clearContentId();
  }

  addRevision = (fields) => {
    const {
      player: { markerPosition },
      addMarker
    } = this.props;
    fields.push({
      timeCode: markerPosition,
      request: '',
      files: []
    });
    addMarker(markerPosition, fields.length);
  };

  deleteRevision = (arrayHelpers, ind) => {
    const { deleteMarker } = this.props;
    arrayHelpers.remove(ind);
    deleteMarker(ind);
  };

  onChange = setFieldValue => (name, value) => setFieldValue(name, value);

  renderRevisionFields = (arrayHelpers) => {
    const {
      player: { durationInt },
      updateMarker,
      values: { revisions: values },
      setFieldValue
    } = this.props;
    return (
      <Fragment>
        {values.map((revision, ind) => (
          <div key={`revision${ind}`} className="d-flex p-30-0 revision-fields">
            <div className="d-flex w-50 align-items-start revision-fields-title">
              <div className="d-flex flex-row align-items-center">
                <p>Revision 4.2.1</p>
                <SvgIcon onClick={() => this.deleteRevision(arrayHelpers, ind)}>
                  <path d={svgIconPath.cancel.path} />
                </SvgIcon>
              </div>
            </div>
            <div className="w-50">
              <Field
                name={`revisions[${ind}].timeCode`}
                helperText="You can choose time code or full video"
                margin="none"
                variant="filled"
                label="Time Code"
                fullWidth
                value={revision.timeCode}
                onChange={({ currentTarget: { value } }) => setFieldValue(`revisions[${ind}].timeCode`, value)}
                onBlur={({ currentTarget: { value } }) => updateMarker(value, ind, durationInt)}
                component={TextField}
                style={{ marginBottom: 20 }}
              />
              <Field
                name={`revisions[${ind}].request`}
                helperText="Please add description of revision"
                margin="none"
                variant="filled"
                label="Revision"
                fullWidth
                value={revision.request}
                onChange={({ currentTarget: { value } }) => setFieldValue(`revisions[${ind}].request`, value)}
                component={TextField}
                style={{ marginBottom: 20 }}
              />
              <Field
                name={`revisions${[ind]}.files`}
                component={() => (
                  <Dropzone
                    name={`revisions[${ind}].files`}
                    className="react-drop-zone"
                    onDrop={file => setFieldValue(`revisions[${ind}].files`, revision.files.concat(file))}
                  >
                    <DropZoneTitle />
                  </Dropzone>
                )}
              />
              <div className="d-flex flex-column">
                {revision.files.map(f => (
                  <AttachmentItem
                    key={f.name}
                    file={f}
                    onDelete={() => setFieldValue(`revisions[${ind}].files`, revision.files.filter(rf => rf.name !== f.name))
                    }
                  />
                ))}
              </div>
            </div>
          </div>
        ))}
        <div className="d-flex add-revision-block p-30-0 with-border-top with-border-bottom add-revision-button">
          <div className="w-50" />
          <div className="d-flex w-50" onClick={() => this.addRevision(values)}>
            <SvgIcon>
              <path d={svgIconPath.addCircle.path} />
            </SvgIcon>
            Add Another Revision
          </div>
        </div>
      </Fragment>
    );
  };

  render() {
    const {
      currentVideo,
      classes: { colorPrimary, circleStatic, raised, outlined },
      handleSubmit,
      setFieldValue
    } = this.props;
    return (
      <div className="revision-video-page p-0-20">
        <div className="d-flex justify-content-between align-items-center video-brief-title">
          <h1>{currentVideo ? 'Revision 4.2' : 'New Video Revision:'}</h1>
          <CircularProgress
            variant="static"
            value={-75}
            thickness={10}
            size={60}
            classes={{ colorPrimary, circleStatic }}
          />
        </div>
        <div className="d-flex video-brief-subtitle align-items-start">
          <div className="d-flex w-50">
            <div className="d-flex align-items-center video-brief-subtitle-icon">
              <SvgIcon style={{ fontSize: 40 }}>
                <path d={svgIconPath.accountCircle.path} />
              </SvgIcon>
            </div>
            <div className="d-flex flex-column video-brief-subtitle-info">
              <span>Reviewed by:</span>
              <h3>Unknown</h3>
              {/** TODO should be admin name here */}
            </div>
          </div>
          <div className="d-flex w-50">
            <div className="d-flex align-items-center video-brief-subtitle-icon">
              <SvgIcon style={{ fontSize: 40 }}>
                <path d={svgIconPath.calendarToday.path} />
              </SvgIcon>
            </div>
            <div className="d-flex flex-column video-brief-subtitle-info w-100">
              <span>Revision on:</span>
              <h3>{currentVideo ? countDays(currentVideo.createdAt) : ''}</h3>
            </div>
          </div>
        </div>
        <div className="d-flex flex-column with-border-bottom p-30-0">
          <div className="d-flex revision-question-block revision-data-block">
            <div className="w-50">
              <span>Video Title:</span>
            </div>
            <div className="w-50">
              <p>{currentVideo.title || ''}</p>
            </div>
          </div>
        </div>
        <form onSubmit={handleSubmit}>
          <FieldArray name="revisions" render={arrayHelpers => this.renderRevisionFields(arrayHelpers)} />
          <div className="d-flex justify-content-end p-30-0">
            <Button classes={{ outlined }} variant="outlined" type="submit">
              Save
            </Button>
            <Button
              classes={{ raised }}
              variant="contained"
              type="submit"
              onClick={() => setFieldValue('revisionState', 'inEdit')}
            >
              Submit
            </Button>
          </div>
        </form>
      </div>
    );
  }
}

RevisionPage.propTypes = {
  player: PropTypes.objectOf(PropTypes.any).isRequired,
  currentVideo: PropTypes.objectOf(PropTypes.any).isRequired,
  videoContentId: PropTypes.string,
  addMarker: PropTypes.func.isRequired,
  updateMarker: PropTypes.func.isRequired,
  deleteMarker: PropTypes.func.isRequired,
  clearCurVideo: PropTypes.func.isRequired,
  clearContentId: PropTypes.func.isRequired,
  getRevision: PropTypes.func.isRequired
};

RevisionPage.defaultProps = {
  videoContentId: undefined
};

const WithStyles = withStyles(styles)(RevisionPage);

WithStyles.propTypes = {
  saveRevisions: PropTypes.func.isRequired
};

const withFormikForm = withFormik({
  mapPropsToValues: () => ({
    revisions: [
      {
        timeCode: 0,
        request: '',
        files: []
      }
    ],
    revisionState: 'clientEditReview'
  }),
  handleSubmit: (values, { props, setSubmitting }) => {
    const {
      saveRevisions,
      user: {
        userData: { _id: userId }
      },
      videoContentId,
      match: {
        params: { id: videoDraftId }
      }
    } = props;
    setSubmitting(false);
    return saveRevisions({ ...values, userId, videoDraftId, videoContentId });
  },

  displayName: 'revisionForm'
})(WithStyles);

const mapStateToProps = ({ user, video: { currentVideo }, player, revision: { videoContentId } }) => ({
  user,
  currentVideo,
  player,
  videoContentId
});

const mapDispatchToProps = dispatch => ({
  addMarker: (markerTime, revisionIndex) => dispatch(playerActions.addRevisionMarker(markerTime, revisionIndex)),
  updateMarker: (markerTime, revisionIndex, duration) => dispatch(playerActions.updateRevisionMarkerPosition(markerTime, revisionIndex, duration)),
  deleteMarker: ind => dispatch(playerActions.removeRevisionMarker(ind)),
  saveRevisions: data => dispatch(revisionActions.saveRevision(data)),
  getVideoById: videoId => dispatch(videoActions.getVideoById(videoId)),
  clearCurVideo: () => dispatch(videoActions.leaveVideoPage()),
  clearContentId: () => dispatch(revisionActions.leaveVideoPage()),
  getRevision: videoId => dispatch(revisionActions.getRevisionByVideoDraftId(videoId))
});

const connected = connect(
  mapStateToProps,
  mapDispatchToProps
)(withFormikForm);

export { connected as RevisionPage };