import { useState } from 'react';
//Icons
import OrangeAntenna from '../../public/icons/antena-naranja.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 MessageIcon from '../../public/icons/message.svg';
import PhoneIcon from '../../public/icons/phone.svg';
//Components
import Form from 'components/Form';
import { useTranslation } from 'next-i18next';

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

  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-customPink 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>
        <OrangeAntenna className='self-end -mt-3 w-14 h-52 sm:w-28 sm:h-full' />
        <div className='flex space-x-4 -mt-3 mb-6'>
          {/* <Link href=''>
            <TwitterIcon className='cursor-pointer' width='20' height='20' fill='#FF6700' />
          </Link> */}
          <a href='https://www.facebook.com/CCN-Telecom-100738098785355' target='_blank' rel='noopener noreferrer'>
            <FacebookIcon className='cursor-pointer' width='20' height='20' fill='#FF6700' />
          </a>
          <a href='https://www.instagram.com/ccntelecom210/' target='_blank' rel='noopener noreferrer'>
            <IgIcon className='cursor-pointer' width='20' height='20' fill='#FF6700' />
          </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'
                name='name'
                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'
                name='lastName'
                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'
                name='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'
                name='phone'
                id='phone'
                value={phoneNumber}
                onChange={e => setPhoneNumber(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='company'>{t('company')}</label>
            <div className='flex items-center pl-3 g-border'>
              <div>
                <MessageIcon className='cursor-pointer' width='24' height='24' fill='#CCCCCC' />
              </div>
              <input
                required
                className='g-input w-full'
                type='text'
                name='company'
                id='company'
                value={company}
                onChange={e => setCompany(e.target.value)}
              />
            </div>
          </div>
          <div className='flex flex-col xl:w-1/2'>
            <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>
        <div className='flex flex-col mb-12'>
          <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>
        <button
          type='submit'
          className={`g-primary-button self-center text-lg 2xl:text-2xl py-2 rounded-none bg-customOrange text-white`}
        >
          {t('submit')}
        </button>
      </Form>
    </div>
  );
};

export default ContactForm;
