import { useState } from 'react';
//Icons
import Antenna from '../../public/icons/antena-azul.svg';
import FacebookIcon from '../../public/icons/fb.svg';
import IgIcon from '../../public/icons/ig.svg';
import PersonIcon from '../../public/icons/person.svg';
import EmailIcon from '../../public/icons/email.svg';
import LocationIcon from '../../public/icons/location.svg';
import PhoneIcon from '../../public/icons/phone.svg';
//Components
import Form from 'components/Form';
import { useTranslation } from 'next-i18next';

const ContratarForm: React.FC = () => {
  const [name, setName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [location, setLocation] = useState('');
  const [message, setMessage] = useState('');
  const { t } = useTranslation('contract');

  return (
    <div className='flex flex-col sm:flex-row bg-white w-full max-w-screen-xl p-4'>
      <div className='flex flex-col justify-between bg-customBlue px-6 py-3 w-auto sm:w-1/3'>
        <h1 className='max-w-xs text-2xl 2xl:text-3xl text-customBlack'>{t('coverage')}</h1>
        <Antenna className='self-end -mt-3 w-14 h-52 sm:w-28 sm:h-full' width='116' height='450' />
        <div className='flex space-x-4 -mt-3 mb-6'>
          {/* <a
            href=''
            target='_blank'
            rel='noopener noreferrer'
          >
            <TwitterIcon className='cursor-pointer' width='20' height='20' fill='#367DEE' />
          </a> */}
          <a href='https://www.facebook.com/CCN-Telecom-100738098785355' target='_blank' rel='noopener noreferrer'>
            <FacebookIcon className='cursor-pointer' width='20' height='20' fill='#367DEE' />
          </a>
          <a href='https://www.instagram.com/ccntelecom210/' target='_blank' rel='noopener noreferrer'>
            <IgIcon className='cursor-pointer' width='20' height='20' fill='#367DEE' />
          </a>
        </div>
      </div>
      <Form
        className='flex flex-col sm:w-2/3 sm:ml-12 sm:mr-8 my-6 text-black text-lg 2xl:text-xl font-light'
        onSubmit={() => {
          console.log('Submit');
        }}
      >
        <div className='flex flex-col xl:flex-row xl:space-x-14 mb-6'>
          <div className='flex flex-col xl:w-1/2 mb-6 xl:mb-0'>
            <label htmlFor='name'>{t('name')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <PersonIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input w-full'
                type='text'
                id='name'
                value={name}
                onChange={e => setName(e.target.value)}
              />
            </div>
          </div>
          <div className='flex flex-col xl:w-1/2'>
            <label htmlFor='lastName'>{t('lastName')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <PersonIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input'
                type='text'
                id='lastName'
                value={lastName}
                onChange={e => setLastName(e.target.value)}
              />
            </div>
          </div>
        </div>
        <div className='flex flex-col xl:flex-row xl:space-x-14 mb-6'>
          <div className='flex flex-col xl:w-1/2 mb-6 xl:mb-0'>
            <label htmlFor='email'>{t('email')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <EmailIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input w-full'
                type='email'
                id='email'
                value={email}
                onChange={e => setEmail(e.target.value)}
              />
            </div>
          </div>
          <div className='flex flex-col xl:w-1/2'>
            <label htmlFor='phone'>{t('phone')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <PhoneIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input'
                type='text'
                id='phone'
                value={phoneNumber}
                onChange={e => setPhoneNumber(e.target.value)}
              />
            </div>
          </div>
        </div>
        <h1 className='text-lg 2xl:text-xl font-bold mb-2'>{t('whichPlan')}</h1>
        <div className='flex justify-between pr-20 mb-6 flex-wrap'>
          <div className='space-x-2 mr-4'>
            <input type='radio' id='basic' name='plan' value='Básico' />
            <label htmlFor='basic'>{t('basic')}</label>
          </div>
          <div className='space-x-2 mr-4'>
            <input type='radio' id='medium' name='plan' value='Medio' />
            <label htmlFor='medium'>{t('medium')}</label>
          </div>
          <div className='space-x-2 mr-4'>
            <input type='radio' id='ultra' name='plan' value='Ultra' />
            <label htmlFor='ultra'>{t('ultra')}</label>
          </div>
          <div className='space-x-2 mr-4'>
            <input type='radio' id='optimum' name='plan' value='Óptimo' />
            <label htmlFor='optimum'>{t('optimum')}</label>
          </div>
        </div>
        <div className='flex flex-col xl:flex-row xl:space-x-14 mb-6'>
          <div className='flex flex-col xl:w-1/2 mb-6 xl:mb-0'>
            <label htmlFor='message'>{t('message')}</label>
            <textarea
              className='g-input g-border w-full resize-none'
              name='message'
              id='message'
              value={message}
              onChange={e => setMessage(e.target.value)}
            />
          </div>
          <div className='flex flex-col xl:w-1/2 mb-6 xl:mb-0'>
            <label htmlFor='location'>{t('location')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <LocationIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input'
                type='text'
                name='location'
                id='location'
                value={location}
                onChange={e => setLocation(e.target.value)}
              />
            </div>
          </div>
        </div>
        <button
          type='submit'
          className={`g-primary-button self-center text-lg 2xl:text-2xl py-2 rounded-none bg-primary text-white`}
        >
          {t('submit')}
        </button>
      </Form>
    </div>
  );
};

export default ContratarForm;