import Layout from '@/components/layout';
import { get, post } from '@/lib/fetch';
import { useRouter } from 'next/router';
import RightArrow from 'public/icons/right-arrow.svg';
import { useEffect, useState } from 'react';

export default function Contact({ contact }) {
  const { title, phone, address, email, seoGoogleTags, seoFacebookTags, seoTwitterTags } = contact?.acf;
  const [pName, setName] = useState('');
  const [pEmail, setEmail] = useState('');
  const [pDescription, setDescription] = useState('');
  const router = useRouter();

  useEffect(() => {
    const elements = document.querySelectorAll('[data-transition]');
    elements.forEach((item, index) => setTimeout(() => item.classList.add('play-transition'), 120*(index+1)));
  }, []);

  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    
    if (pName && pEmail) {
      
      const bodyFormData = new FormData();

      bodyFormData.append('fullname', pName);
      bodyFormData.append('email', pEmail);
      bodyFormData.append('description', pDescription);

      await post('contact-form-7/v1/contact-forms/44/feedback', bodyFormData);
      router.push('/sent');
    }

  };

  return (
    <Layout type="two" seoGoogleTags={seoGoogleTags} seoFacebookTags={seoFacebookTags} seoTwitterTags={seoTwitterTags}>
      <div className="contact">
        <section className="main-content">
          <div className="columns">
            <div className="column contact-title" data-transition="down-to-up">
              <h1>{title}</h1>
            </div>
          </div>
          <form className="contact-form" onSubmit={onSubmit} data-transition="fade-in">
            <div className="columns is-multiline">
              <div className="column is-6 contact-input">
                <input
                  required
                  type="text" 
                  placeholder="your name" 
                  autoComplete="nope" 
                  value={pName} 
                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setName(event.currentTarget.value)}/>
              </div>
              <div className="column is-6 contact-input">
                <input
                  required
                  type="email" 
                  placeholder="your email" 
                  autoComplete="nope" 
                  value={pEmail} 
                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setEmail(event.currentTarget.value)}/>
              </div>
              <div className="column is-12 contact-input">
                <textarea 
                  placeholder="message" 
                  rows={4} 
                  autoComplete="nope" 
                  value={pDescription} 
                  onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(event.currentTarget.value)}></textarea>
              </div>
            </div>
            <div className="columns">
              <div className="column is-offset-6 is-6 contact-button">
                <button type="submit">
                  send
                  <span className="button-icon">
                    <RightArrow />
                  </span>
                </button>
              </div>
            </div>
          </form>
          <div className="columns" data-transition="fade-in">
            <div className="column">
              <div className="contact-line"></div>
            </div>
          </div>
          <div className="contact-info-block" data-transition="fade-in">
            <div className="contact-info">
              <h1>phone</h1>
              <span>{phone}</span>
            </div>
            <div className="contact-info">
              <h1>address</h1>
              <span>{address}</span>
            </div>
            <div className="contact-info">
              <h1>email</h1>
              <span>{email}</span>
            </div>
          </div>
        </section>
      </div>
    </Layout>
  );
}

export async function getServerSideProps() {
  // const response = await get('contact');
  const response = await get('wp/v2/pages/158');

  if (!response) {
    return { notFound: true }
  }

  const { data, error } = response;

  if (data) {
    return {
      props: { contact: data }
    }
  }

  if (error) {
    return { notFound: true }
  }
}