import React, { useState, FC, useEffect } from 'react';
import { validationWithMessages } from '@/utils/validate';
import axios from 'axios';
import * as Yup from 'yup';
import { apiEmailAgents, apiToken } from '@/data/constants';
interface ContactFormProps {
  trans: any;
  cities: any[];
  background?: string;
}
const INITIAL_VALUES = {
  email: '',
  name: '',
  cellPhone: '',
  type: '',
  city: ''
};
const INITIAL_ERRORS = {
  email: '',
  name: '',
  cellPhone: '',
  type: '',
  city: '',
  general: ''
};
const ContactForm: FC<ContactFormProps> = ({ trans, cities, background }) => {
  const types = trans('agents:form.types', { returnObjects: true });
  const [errors, setErrors] = useState(INITIAL_ERRORS);
  const [formData, setFormData] = useState(INITIAL_VALUES);
  const [status, setStatus] = useState('loaded');

  const [citiesOptions, setCitiesOptions] = useState<any[]>([]);

  useEffect(() => {
    if (cities && Array?.isArray(cities) && cities?.length) {
      const citiesArray = cities?.map((city) => {
        return city?.name + ', ' + city?.state?.name;
      });
      setCitiesOptions(citiesArray);
    } else {
      setCitiesOptions([]);
    }
  }, [cities]);

  const handleErrors = (name: string, value: any) => {
    setErrors((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  const yupObjectShape = {
    name: Yup.string().required(trans('common:formMessages.errorRequired')),
    type: Yup.string().required(trans('common:formMessages.errorRequired')),
    city: Yup.string().required(trans('common:formMessages.errorRequired')),
    cellPhone: Yup.string()
      .matches(/^\d{10}$/, trans('common:formMessages.errorcellPhone'))
      .required(trans('common:formMessages.errorRequired')),

    email: Yup.string()
      .email(trans('common:formMessages.errrorEmail'))
      .required(trans('common:formMessages.errorRequired'))
  };
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
    handleErrors(e.target.name, '');
  };

  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    setStatus('sending');
    const validateForm = await validationWithMessages(yupObjectShape, formData);

    if (validateForm?.isValid) {
      setErrors(INITIAL_ERRORS);
      const options = {
        method: 'POST',
        url: apiEmailAgents,
        params: formData,
        headers: {
          Authorization: 'Bearer ' + apiToken,
          'Content-Type': 'multipart/form-data'
        }
      };
      try {
        await axios
          .request(options)
          .then(function (response) {
            if (response?.status == 200) {
              setStatus('sended');
            } else {
              setStatus('loaded');
            }
          })
          .catch(function (error) {
            console.error(error);
            setStatus('loaded');
          });
      } catch (error) {
        console.log(error);
        setStatus('loaded');
        setErrors({ ...INITIAL_ERRORS, general: trans('common:formMessages.generalError') });
      }
    } else {
      setStatus('loaded');
      setErrors({ ...INITIAL_ERRORS, ...validateForm?.errors });
    }
  };

  return (
    <div id="contact-form" className=" contact-agents-form">
      <div className="container py-7 py-md-14">
        <div className="row g-7">
          <div className="col-12 col-md-5 col-lg-5 text-center text-md-start">
            <span className="base-pretitle"> {trans('agents:form.preTitle')}</span>
            <h2 className="base-title !tw-text-main-color tw-my-4">{trans('agents:form.title')}</h2>
            <p className="base-text">{trans('agents:form.text')}</p>
          </div>
          <div className="col-12 col-md-7 col-lg-6 offset-lg-1">
            {(status !== 'sended' && (
              <form className="form needs-validation">
                <div className="messages">
                  {' '}
                  {errors?.general ? (
                    <p className="tw-text-xs tw-text-red-500 tw-font-inter tw-font-light tw-text-center mb-4">
                      {errors?.general}
                    </p>
                  ) : (
                    ''
                  )}
                </div>
                <div className="row gy-3 gx-4">
                  <div className="col-12">
                    <div className="form-floating ">
                      <input
                        required
                        type="text"
                        name="name"
                        id="form_name"
                        placeholder={trans('agents:form.name')}
                        className="form-control tw-main-color tw-font-inter tw-text-sm "
                        value={formData.name}
                        onChange={handleChange}
                      />
                      <label htmlFor="form_name" className="tw-main-color tw-font-inter tw-text-sm">
                        {trans('agents:form.name')} *
                      </label>
                      {errors?.name ? (
                        <p className="tw-text-xs tw-text-red-500 tw-font-inter tw-font-light">{errors?.name}</p>
                      ) : (
                        ''
                      )}
                    </div>
                  </div>
                  <div className="col-12">
                    <div className="form-floating">
                      <input
                        required
                        type="email"
                        name="email"
                        id="form_email"
                        className="form-control tw-main-color tw-font-inter tw-text-sm"
                        placeholder="jane.doe@example.com"
                        value={formData.email}
                        onChange={handleChange}
                      />
                      <label htmlFor="form_email">{trans('agents:form.email')} *</label>
                      {errors?.email ? (
                        <p className="tw-text-xs tw-text-red-500 tw-font-inter tw-font-light">{errors?.email}</p>
                      ) : (
                        ''
                      )}
                    </div>
                  </div>
                  <div className="col-12">
                    <div className="form-floating">
                      <input
                        required
                        type="text"
                        name="cellPhone"
                        placeholder={trans('agents:form.cellPhone')}
                        id="cel"
                        className="form-control tw-main-color tw-font-inter tw-text-sm"
                        value={formData.cellPhone}
                        onChange={handleChange}
                      />
                      <label htmlFor="cel">{trans('agents:form.cellPhone')} *</label>
                      {errors?.cellPhone ? (
                        <p className="tw-text-xs tw-text-red-500 tw-font-inter tw-font-light">{errors?.cellPhone}</p>
                      ) : (
                        ''
                      )}
                    </div>
                  </div>{' '}
                  <div className="col-12">
                    <div className="form-select-wrapper ">
                      <select
                        className="form-select"
                        id="form-select"
                        name="type"
                        required
                        value={formData.type}
                        onChange={handleChange}
                      >
                        <option disabled value="">
                          {trans('agents:form.type')} *
                        </option>
                        {types && Array?.isArray(types)
                          ? types?.map((item: any, key: number) => {
                              return (
                                <option value={item} key={key}>
                                  {item}
                                </option>
                              );
                            })
                          : ''}
                      </select>
                      {errors?.type ? (
                        <p className="tw-text-xs tw-text-red-500 tw-font-inter tw-font-light">{errors?.type}</p>
                      ) : (
                        ''
                      )}
                    </div>
                  </div>{' '}
                  <div className="col-12">
                    <div className="form-select-wrapper ">
                      <select
                        className="form-select"
                        id="form-select"
                        name="city"
                        required
                        value={formData.city}
                        onChange={handleChange}
                      >
                        <option disabled value="">
                          {trans('agents:form.selectCity')} *
                        </option>
                        {citiesOptions && Array?.isArray(citiesOptions)
                          ? citiesOptions?.map((item: any, key: number) => {
                              return (
                                <option value={item} key={key}>
                                  {item}
                                </option>
                              );
                            })
                          : ''}
                      </select>
                      {errors?.city ? (
                        <p className="tw-text-xs tw-text-red-500 tw-font-inter tw-font-light">{errors?.city}</p>
                      ) : (
                        ''
                      )}
                    </div>
                  </div>
                  <div className="col-12 text-center text-md-start">
                    {status === 'sending' ? (
                      <div className="mx-auto mx-md-0 tw-animate-bounce tw-max-w-max tw-rounded-md tw-bg-main-color tw-text-white tw-font-semibold tw-font-inter tw-text-xs tw-py-4 tw-px-8 tw-uppercase   ">
                        {trans('common:formMessages.sending')} ...
                      </div>
                    ) : (
                      <button
                        onClick={handleSubmit}
                        className="tw-rounded-md tw-bg-main-color tw-text-white tw-font-semibold tw-font-inter tw-text-xs tw-py-4 tw-px-8 tw-uppercase  hover:tw-bg-main-dark "
                      >
                        {trans('agents:form.btn')}
                      </button>
                    )}
                  </div>
                </div>
              </form>
            )) ||
              ''}
            {status === 'sended' ? (
              <div className="text-center py-2 py-md-12">
                <i className="tw-block mb-6 uil uil-check-circle tw-text-6xl tw-font-inter tw-text-main-color"></i>
                <p className="tw-font-inter tw-text-4xl tw-text-secondary-dark tw-text-center">
                  {trans('common:formMessages.sended')}
                </p>
              </div>
            ) : (
              ''
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactForm;