import React, { PureComponent, ChangeEvent } from 'react';
import { connect, MapDispatchToProps } from 'react-redux';
import isEmpty from 'lodash/isEmpty';
import InfoBox from 'components/Audience/InfoBox';
import { updateCustomerMetadata as updateCustomerMetadataAction } from 'actions';
import ConfirmModal from 'components/Modals/ConfirmModal';
import { reduce, map } from 'lodash';
import { CustomerDetails } from 'reducers/types/AudienceState';

interface DispatchProps {
  updateCustomerMetadata: (id: number, metadata: any, fullName?: string) => any;
}

interface OwnProps {
  id: number;
  customerDetails: CustomerDetails;
}

type Props = DispatchProps & OwnProps;

interface State {
  edit: boolean;
  inputValues: {
    [key: string]: string;
  };
}

class CustomerInfoBox extends PureComponent<Props, State> {
  resetMetadataModal: ConfirmModal | null = null;

  constructor(props: Props) {
    super(props);

    this.state = {
      edit: false,
      inputValues: {},
    };
  }

  componentDidUpdate(prevProps: Props) {
    const { customerDetails } = this.props;
    if (prevProps.customerDetails.isFetching && !customerDetails.isFetching) {
      const inputValues = reduce(
        customerDetails,
        (result, value, key) => ({ ...result, [(key as any).toString()]: value }),
        {}
      );

      console.error(inputValues);

      this.setState({
        inputValues,
      });
    }
  }

  handleIconClick = () => {
    this.setState({ edit: true });
  };

  handleCancel = () => {
    this.setState({ edit: false });
  };

  handleCheck = () => {
    const { updateCustomerMetadata, id } = this.props;
    updateCustomerMetadata(id, this.getInputValues());
    this.setState({
      edit: false,
    });
  };

  handleReset = () => {
    const { updateCustomerMetadata, id } = this.props;
    updateCustomerMetadata(id, this.getSpanValues());
    this.hideModal();
  };

  getInputValues = () => {
    const { inputValues } = this.state;
    return inputValues;
  };

  getSpanValues = () => {
    const { customerDetails } = this.props;
    return reduce(
      customerDetails,
      (result, _, key) => ({
        ...result,
        [(key as any).toString()]: '',
      }),
      {}
    );
  };

  showModal = () => {
    if (this.resetMetadataModal) {
      this.resetMetadataModal.show();
    }
  };

  hideModal = () => {
    if (this.resetMetadataModal) {
      this.resetMetadataModal.hide();
    }
  };

  onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    this.setState(({ inputValues }) => ({
      inputValues: {
        ...inputValues,
        [e.currentTarget.name]: e.currentTarget.value,
      },
    }));
  };

  renderInput = (value: string, key: string) => {
    const { edit } = this.state;
    return (
      <div className="ovp-dialog info" key={key}>
        <span>{key.toString()}:</span>
        {edit ? (
          <input onChange={this.onInputChange} type="text" name={key} value={value.toString()} />
        ) : (
          <span>{value.toString()}</span>
        )}
      </div>
    );
  };

  renderInputs = (inputValues: any) => {
    console.error('RERENDERING');
    return map(inputValues, this.renderInput);
  };

  render() {
    const { customerDetails } = this.props;
    const { edit, inputValues } = this.state;

    return (
      <div className="customer-box">
        <div className="info-box">
          {isEmpty(customerDetails) ? (
            [
              <h5 key="1">Info collected</h5>,
              <span className="empty_msg" key="2">
                There are no collected information for this user.
              </span>,
            ]
          ) : (
            <InfoBox
              key="1"
              title="Info collected"
              subtitle="Clear metadata"
              renderContent={() => this.renderInputs(inputValues)}
              handleIconClick={this.handleIconClick}
              handleCheck={this.handleCheck}
              handleCancel={this.handleCancel}
              edit={edit}
              showModal={this.showModal}
            />
          )}
        </div>
        <ConfirmModal
          key="2"
          ref={modal => {
            this.resetMetadataModal = modal;
          }}
          item="metadata"
          handleDelete={this.handleReset}
          noSubheader
        />
      </div>
    );
  }
}

export const PlainCustomerInfoBox = CustomerInfoBox;

const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
  updateCustomerMetadata: updateCustomerMetadataAction,
};

export default connect(
  null,
  mapDispatchToProps
)(CustomerInfoBox);