import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import uuidV4 from 'uuid/v4';

import { InputGroup } from '../../../../../components';

import ConditionGroup from './ConditionGroup';
import Accordion from '../../../../Accordion';
import { defaultCondition, actionSelectOptionsIds, rowFieldNames } from '../../../constants';

import { selectTabBlockConfig } from '../../../actions';

import './style/style.css';
import OtherPeriods from './timeConditionOtherPeriods';

/**
 * This function represents the Configuration Tab of the API.
 *
 * @param {Object} props - Object with props of the component.
 * @param {Object} props.translations - The translations.
 *
 * @returns {Object} Returns the JSX.
 */
class ConditionSet extends React.Component {
  constructor(props) {
    super(props);

    this.bind();
    this.rowUuidTest = '';

    this.rowRules = {
      condition: row => this.props.plugin.startValidation(this.rowFieldNames.condition, row.uuid).setValue(row.condition).isRequired(true).end(),
    };

    this.rowFieldNames = {
      label: rowFieldNames.LABEL,
      condition: rowFieldNames.CONDITION,
      action: rowFieldNames.ACTION,
      varOps: rowFieldNames.VAROPS,
      playSsml: rowFieldNames.TTS,
      continue: rowFieldNames.CONTINUE,
      ddiOrExtension: rowFieldNames.DDI_OR_EXTENSION,
      queueId: rowFieldNames.QUEUE_ID,
      alternateAction: rowFieldNames.ALTERNATE_ACTION,
    };

    this.props.plugin.registerOnSubmitAction((end) => {
      this.props.plugin.values.forEach((row) => {
        if (!row.label) {
          this.handleDeleteConditon(row);
        }

        row.condition.forEach((condition) => {
          const error = (row.label && this.rowRules.condition(condition)) || {};
          const existsError = !!Object.keys(error.result || {}).filter(elem => error.result[elem] === false).length;
          if (existsError) {
            this.expandAccordion && this.expandAccordion(row.uuid);
            this.props.selectTabBlockConfig(this.props.flowUuid, 'CONDITIONS');
          }
        });
      });
      end();
    });
  }

  componentDidMount() {
    const newConditionSet = this.props.blockConfigs[this.props.flowUuid]
      && this.props.blockConfigs[this.props.flowUuid].tab
      && this.props.blockConfigs[this.props.flowUuid].tab.originOfTheClick === 'CLICK_ADD_CONDITIONSET_BLOCK';

    if (newConditionSet) {
      !this.didMoutActions && this.handleAddNewCondition();
      this.didMoutActions = this.props.plugin.didMoutActions(this.handleAddNewCondition);
    }
  }

  /**
   * This function runs a given rule on the rowRules object.
   *
   * @param {string} column - The column to run rule for.
   * @param {Object} row - The row ro run the rule
   */
  runRowRules(column, row) {
    this.rowRules[column] && this.rowRules[column](row);
  }

  /**
   * This function adds one new temporal rule to the condition row.
   *
   * @param {string} parentRowUuid - The condition row uuid.
   * @param {Object} row - The new row.
   */
  handleOnAddTemporalCondition(parentRowUuid, row) {
    this.props.plugin.addRow(row, {
      parentRowKey: this.rowFieldNames.condition,
      parentRowUuid,
    });
  }

  /**
   * This function edits one temporal rule on one condition row on the condition column
   *
   * @param {string} parentRowUuid - The condition row uuid.
   * @param {any} value - The value to be updated.
   * @param {string} temporalConditionUuid - The uuid of the value to be updated
   */
  handleOnEditTemporalCondition(parentRowUuid, value, temporalConditionUuid) {
    this.props.plugin.editRow(temporalConditionUuid, this.rowFieldNames.condition, value, {
      parentRowKey: this.rowFieldNames.condition,
      parentRowUuid,
    });

    const newRow = { uuid: temporalConditionUuid, [this.rowFieldNames.condition]: value };
    this.runRowRules(this.rowFieldNames.condition, newRow);
  }

  /**
   * This funtion deletes one temporal rule from one given condition row.
   *
   * @param {string} parentRowUuid - The condition row uuid.
   * @param {string} temporalConditionUuid - The uuid of the temporal conditon to be deleted
   */
  handleOnDeleteTemporalCondition(parentRowUuid, temporalConditionUuid) {
    this.props.plugin.deleteRow(temporalConditionUuid, {
      parentRowKey: this.rowFieldNames.condition,
      parentRowUuid,
    });
  }

  /**
   * Handles the add of one new condition row.
   */
  handleAddNewCondition() {
    const uuid = uuidV4();

    this.rowUuidTest = uuid;
    this.props.plugin.values.forEach((elem) => {
      if (!elem.label) {
        this.props.plugin.deleteRow(elem.uuid);
      }
    });

    this.props.plugin.addRow({
      uuid,
      label: '',
      condition: [{
        uuid: uuidV4(),
        condition: defaultCondition.message,
      }],
      action: '',
      varOps: '',
      playSsml: '',
      continue: false,
    }).then(() => {
      this.empty = uuid;
      this.expandAccordion(uuid);
      this.scrollIntoView(uuid);

      this.props.plugin.values.forEach((row) => {
        if (row.uuid === uuid) {
          return;
        }
        this.collapseAccordion(row.uuid);
      });
    });
  }

  /**
   * Handle the change on one conditon set item.
   *
   * @param {string} column - The column key.
   * @param {any} value - The value of the condition to edit.
   * @param {Object} row - The coplete row where the conditon is.
   */
  handleEditCondition(column, value, row) {
    if (this.rowUuidTest === row.uuid) {
      this.rowUuidTest = '';
    }
    const newRow = { ...row, [column]: value };
    this.runRowRules(column, newRow);
    this.props.plugin.editRow(row.uuid, column, value);
  }

  /**
   * Handle the full condition delete.
   *
   * @param {Object} condition - The condition to be deleted.
   * @param {Object} condition.uuid - The condition uuid to be deleted
   */
  handleDeleteConditon(condition) {
    this.props.plugin.deleteRow(condition.uuid);
  }

  /**
   * This function is used to handle the value change in the action select.
   *
   * @param {string} uuid - String with the row uuid.
   * @param {string} value - String with the selected value.
   */
  handleActionSelectOnChange(uuid, value) {
    this.props.plugin.editRow(uuid, this.rowFieldNames.action, value);
  }

  /**
   * This function is used to get the action select options with the respective ids and
   * translated name.
   *
   * @returns {Object} - Object with the select options.
   */
  getSelectActionObject() {
    const actionSelectOptions = Object.values(actionSelectOptionsIds);

    return actionSelectOptions.map(option => ({
      id: option,
      name: this.props.translations[option],
    }));
  }

  /**
   * Builds the accordeons dataset based on the plugin
   * data.
   *
   * @param {Object} datasource - The plugin datasource.
   */
  accordeons(datasource) {
    const others = {
      uuid: 'otherPeriods',
      label: this.props.translations.groupTitles.label,
      content: <OtherPeriods
        title={this.props.translations.groupTitles.label}
        placeholder={this.props.translations.groupTitles.otherPeriods}
      />,
      number: null,
    };

    const noOher = datasource.filter(row => row.label !== 'Outros Períodos');

    return [others, ...noOher].map(row => ({
      uuid: row.uuid,
      top: row.label,
      number: row.number,
      content: row.content || (
        <ConditionGroup
          fieldNames={this.rowFieldNames}
          handleChange={this.handleEditCondition}
          validateStates={this.props.plugin.validationStates}
          values={row}
          titles={this.props.translations.groupTitles}
          placeholders={this.props.translations.placeholders}
          isTimeConditionSet={this.props.isTimeConditionSet}
          // eslint-disable-next-line react/jsx-no-bind
          onAddTemporalCondition={this.handleOnAddTemporalCondition.bind(this, row.uuid)}
          // eslint-disable-next-line react/jsx-no-bind
          onEditTemporalCondition={this.handleOnEditTemporalCondition.bind(this, row.uuid)}
          // eslint-disable-next-line react/jsx-no-bind
          onDeleteTemporalCondition={this.handleOnDeleteTemporalCondition.bind(this, row.uuid)}
          // eslint-disable-next-line react/jsx-no-bind
          onActionSelectChange={this.handleActionSelectOnChange.bind(this, row.uuid)}
          actionSelectOptions={this.getSelectActionObject()}
        />
      ),
    }));
  }

  /**
   * Handle the onDrop the condition.
   *
   * @param {Object} fromRow - Object with row to move.
   * @param {Object} toRow - Object with destination of the row.
   */
  handleOnDrop(fromRow, toRow) {
    this.props.plugin.moveRow(fromRow.uuid, toRow.uuid);
  }

  /**
   * Binds all the methods with this context.
   */
  bind() {
    this.accordeons = this.accordeons.bind(this);

    this.handleAddNewCondition = this.handleAddNewCondition.bind(this);
    this.handleEditCondition = this.handleEditCondition.bind(this);
    this.handleDeleteConditon = this.handleDeleteConditon.bind(this);

    this.handleOnAddTemporalCondition = this.handleOnAddTemporalCondition.bind(this);
    this.handleOnEditTemporalCondition = this.handleOnEditTemporalCondition.bind(this);
    this.handleOnDeleteTemporalCondition = this.handleOnDeleteTemporalCondition.bind(this);
    this.handleOnDrop = this.handleOnDrop.bind(this);
  }

  render() {
    return (
      <InputGroup
        title={this.props.translations.title}
        className="gof-blockCardForm-textTitles"
      >
        <Accordion
          id="conditionset_accordion"
          data={this.accordeons(this.props.plugin.values)}
          onDelete={this.handleDeleteConditon}
          onClickAdd={this.handleAddNewCondition}
          onDrop={this.handleOnDrop}
          interface={(int) => {
            this.expandAccordion = int.expand;
            this.collapseAccordion = int.collapse;
            this.scrollIntoView = int.scrollIntoView;
          }}
        />
      </InputGroup>
    );
  }
}

ConditionSet.propTypes = {
  plugin: PropTypes.object.isRequired,
  translations: PropTypes.object.isRequired,
  isTimeConditionSet: PropTypes.bool,
};

ConditionSet.defaultProps = {
  isTimeConditionSet: false,
};

const mapStateToProps = state => ({
  blockConfigs: state.flowConstructorPage.blockConfig,
});

const mapDispatchToProps = dispatch => ({
  selectTabBlockConfig: (flowUuid, tabId) => dispatch(selectTabBlockConfig(flowUuid, tabId)),
});

export default connect(mapStateToProps, mapDispatchToProps)(ConditionSet);