import React, { Component, ReactNode } from 'react';
import axios from 'axios';

import FormLayoutCentered from './layouts/form-layout-centered';
import FormLayoutFullWidth from './layouts/form-layout-full-width';
import FormLayoutTextAside from './layouts/form-layout-text-aside';
import BegoniaCentered from './layouts/begonia-centered';

import { FIELDS } from './form-module.constants';
import { EmailStatus, FormLayoutConfig, FormModuleProps, FormModuleState } from './form-module.types';
import { CONTACT_FORM } from '../../../../utils/constants/layouts-names';

export default class FormModule extends Component<FormModuleProps, FormModuleState> {
  formLayouts: FormLayoutConfig = {
    [CONTACT_FORM.CENTRED]: FormLayoutCentered,
    [CONTACT_FORM.FULL_WIDTH]: FormLayoutFullWidth,
    [CONTACT_FORM.TEXT_ASIDE]: FormLayoutTextAside,
    [CONTACT_FORM.BEGONIA_CENTER]: BegoniaCentered
  };

  state: FormModuleState = {
    values: {},
    status: EmailStatus.NONE
  };

  componentWillMount() {
    this.setFieldValues();
  }

  onChange = (value: string, id: string): void => {
    this.setFieldValue(id, value);
  };

  setFieldValues = (): void => {
    FIELDS.forEach((field): void => this.setFieldValue(field.id));
  };

  delayAndNormaliseState = (): void => {
    setTimeout(() => {
      this.setState({
        status: EmailStatus.NONE
      });
    }, 3000);
  };

  onSubmit = (event: React.FormEvent): void => {
    event.preventDefault();

    if (this.state.status === EmailStatus.NONE || this.state.status === EmailStatus.FAILED) {
      this.setState({
        status: EmailStatus.SENDING,
        error: false
      });

      axios.post('/.netlify/functions/contact-email-handler',
        {
          'Page-origin': this.props.data.pageKey,
          ...this.state.values
        })
        .then(() => {
          this.setState({
            status: EmailStatus.SENT,
            values: {...this.setFieldValuesAllBackToNothing()},
            error: false
          });
          this.delayAndNormaliseState();
        })
        .catch(() => {
          this.setState({
            status: EmailStatus.FAILED,
            error: true
          });
          this.delayAndNormaliseState();
        });
    }
  };

  setFieldValuesAllBackToNothing = (): any => {
    const newValues: any = {};
    for (const key of Object.keys(this.state.values)) {
      newValues[key] = '';
    }
    return newValues;
  };

  setFieldValue = (id: string, val = ''): void =>
    this.setState(state => ({
      values: {
        ...state.values,
        [id]: val
      }
    }));

  render(): ReactNode {
    const FormLayout: any = this.formLayouts[this.props.data.layoutOption];

    if (FormLayout) {
      return (
        <FormLayout
          onSubmit={this.onSubmit}
          onChange={this.onChange}
          fields={FIELDS}
          formData={this.state.values}
          {...this.props}
          status={this.state.status}
          error={this.state.error}
        />
      );
    }

    return null;
  }
}