import * as React from 'react';
import { Mutation } from '@apollo/client/react/components';
import { Button, FormWrapper, Payment, PaymentSection, TextBox } from '@nova-hf/ui';
import NationalRegistryInfo from 'beta/containers/nationalRegistryInfo/NationalRegistryInfo';
import UpdateBusinessCategory from 'beta/containers/update-business-category/UpdateBusinessCategory';
import { UPDATE_ACCOUNT } from 'graphql/mutations/account';
import { observer } from 'mobx-react';
import { IUserProfile } from 'typings';
import { formElementsToObject } from 'utils/helpers';
import { WithTranslation, withTranslation } from 'utils/i18n';

interface IAboutProps extends WithTranslation {
  color: string;
  user: IUserProfile;
}

interface IAboutState {
  status: string;
  message: string;
}

class About extends React.Component<IAboutProps, IAboutState> {
  state: IAboutState = {
    status: '',
    message: '',
  };

  onSubmit = async (e: any, updateAccount: any) => {
    e.preventDefault();

    const { user, t } = this.props;
    const payload = formElementsToObject(e.target.elements as HTMLCollectionOf<HTMLInputElement>);

    try {
      await updateAccount({ variables: { input: payload, ssn: user.ssn } });

      this.setState({ status: 'success', message: t('about.successfullyUpdated') });
    } catch (e) {
      this.setState({ status: 'error', message: t('about.error') });
    }
  };

  render() {
    const { color, user, t } = this.props;
    const { status, message } = this.state;

    return (
      <>
        <Mutation mutation={UPDATE_ACCOUNT}>
          {(updateAccount: any, { loading }: any) => {
            return (
              <Payment
                noContainer
                noSpacingTop
                onSubmit={(e: React.FormEvent<HTMLInputElement>) => {
                  this.onSubmit(e, updateAccount);
                }}
              >
                <PaymentSection
                  title={t('about.nameAddress')}
                  smallerTitle
                  subtitle={t('about.nameAddressSub')}
                  fullWidth
                  noSpacingTop
                >
                  <FormWrapper>
                    <TextBox name="ssn" label={t('about.ssn')} defaultValue={user.ssn} disabled />
                    <TextBox
                      name="name"
                      label={t('about.name')}
                      defaultValue={user.name}
                      disabled
                    />
                    <TextBox
                      name="address"
                      label={t('about.address')}
                      defaultValue={user.streetAddress}
                      disabled
                    />
                    <TextBox
                      name="postalCode"
                      label={t('about.postalCode')}
                      defaultValue={user.postalCode}
                      disabled
                    />
                    <TextBox
                      name="city"
                      label={t('about.city')}
                      defaultValue={user.city}
                      disabled
                    />
                  </FormWrapper>
                </PaymentSection>
                <PaymentSection
                  smallerTitle
                  fullWidth
                  title={t('about.payerEmail')}
                  subtitle={t('about.payerEmailSub')}
                >
                  <FormWrapper>
                    <TextBox
                      name="email"
                      type="email"
                      data-key="email"
                      label={t('about.email')}
                      defaultValue={user.email}
                      status={status}
                      message={message}
                    />
                    <Button big fill background={color} type="submit" loading={loading}>
                      {t('about.saveChanges')}
                    </Button>
                  </FormWrapper>
                </PaymentSection>
              </Payment>
            );
          }}
        </Mutation>
        <NationalRegistryInfo />
        <UpdateBusinessCategory />
      </>
    );
  }
}

export default withTranslation('settings')(observer(About));