import React, { Component } from 'react';
import Input from '../../../src/components/common/input';
import ReactSimpleTooltip from 'react-simple-tooltip';
import segment from '../../../src/segment/segment';

export type FormInfo = {
  userName: string;
  address: string;
  phoneNumber: string;
  email: string;
};

type PropTypes = {
  userName: string;
  address: string;
  email: string;
  phoneNumber: string;
  company: string;
  onSubmit: (formInfo: FormInfo) => void;
};

type StateType = {
  errors: { [key: string]: string };
  formInfo: FormInfo;
  company: string;
  showFullForm: boolean;
  isFormValid: boolean;
  addressIsValid?: boolean;
};

interface OnChangeEvent {
  persist?: () => void;
  target: { value: string; name: string };
  isValid: boolean;
}

class GetStartedForm extends Component<PropTypes> {
  state: StateType = {
    errors: {},
    formInfo: {
      userName: this.props.userName,
      phoneNumber: this.props.phoneNumber,
      address: this.props.address,
      email: this.props.email
    },
    isFormValid: true,
    company: this.props.company,
    showFullForm: false,
    addressIsValid: true
  };

  isFormValid = errors => {
    const isValid = Object.keys(errors).length === 0;
    return isValid;
  };

  toggleForm = () => {
    this.setState((currentState: StateType) => ({
      showFullForm: !currentState.showFullForm
    }));
  };

  onChange = (ev: OnChangeEvent) => {
    ev.persist && ev.persist();

    const name = ev.target.name;
    this.setState((currentState: StateType) => {
      const newFormInfo = {
        ...currentState.formInfo,
        [name]: ev.target.value
      };

      const errors = {
        ...currentState.errors
      };

      if (!ev.isValid) {
        errors[name] = 'invalid field';
      } else {
        delete errors[name];
      }

      return { formInfo: newFormInfo, errors };
    });
  };

  render() {
    return (
      <div className="users-data-container">
        <div className="users-data-input-container">
          <Input
            value={this.state.formInfo.userName}
            placeholder="Name"
            onChange={this.onChange}
            classNames={'info-username'}
            inputName="userName"
            type="name"
            disableErrors={true}
          />
          {!this.state.showFullForm && (
            <img
              onClick={() => {
                segment.trackEvent(
                  'Clicked',
                  'edit your profile',
                  'nta-partners'
                );
                this.setState({ showFullForm: true });
              }}
              src="/static/img/nta-partners/svg-icons/icon-edit-pencil.svg"
              className="info-pencil"
            />
          )}
          {this.state.showFullForm && (
            <Input
              value={this.state.formInfo.email}
              placeholder="Email"
              onChange={this.onChange}
              classNames={'info-username'}
              type="email"
              required={true}
              inputName="email"
              disableErrors={true}
            />
          )}
          {this.state.showFullForm && (
            <div className="info-username no-border info-phone-number">
              {this.state.formInfo.phoneNumber ||
                'You have to validate your phone number!'}
              <ReactSimpleTooltip
                arrow={15}
                background="#3084d5"
                border="none"
                color="white"
                content={
                  this.props.phoneNumber
                    ? 'We`ve already confirmed your phone number'
                    : 'You have to validate your phone number!'
                }
                fadeDuration={0.5}
                fadeEasing="linear"
                fixed={false}
                fontFamily="inherit"
                fontSize="12px"
                offset={0}
                padding={15}
                placement="bottom"
                radius={5}
                zIndex={2}
              >
                <span className="info-wrapper">
                  <i className="info-tooltip">i</i>
                </span>
              </ReactSimpleTooltip>
            </div>
          )}
          {this.state.showFullForm && (
            <Input
              type="address"
              placeholder="Address"
              classNames="info-username"
              value={this.state.formInfo.address}
              onChange={this.onChange}
              inputName={'address'}
              disableErrors={true}
            />
          )}

          {this.state.showFullForm && (
            <div className="toggle-form-out" onClick={this.toggleForm}>
              <i className="fas fa-angle-up" />
            </div>
          )}
        </div>
        <div className="get-started-button-container">
          <button
            disabled={
              !this.props.phoneNumber ||
              Object.keys(this.state.errors).length > 0
            }
            className="info-button"
            onClick={() => {
              segment.trackEvent('Clicked', 'get-started', 'nta-partners');
              this.props.onSubmit(this.state.formInfo);
            }}
          >
            Get Started
          </button>
        </div>
      </div>
    );
  }
}

export default GetStartedForm;