import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import { GetStaticProps, NextPage } from 'next'
import { useState } from 'react'

// FontAwesome 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab, faFacebookF, faInstagram, faLinkedin, faYoutube } from '@fortawesome/free-brands-svg-icons'
import { fas, faPhone,faEnvelope } from '@fortawesome/free-solid-svg-icons'

library.add( fab, fas, faEnvelope,faPhone,faFacebookF,faInstagram, faLinkedin,faYoutube)

// Style modules 
import styles from '../styles/contacts.module.css'

// Constants
import {settings, loadServices, loadAbout } from './../constants/constants'

// Components

import Layout from '../components/Layout/Layout'
import axios from 'axios'
import Marquee from '../components/Marquee/Marquee'
import ContactForm from '../components/ContactForm/ContactForm'
import ContactDetails from '../components/ContactDetails/ContactDetails'
import SocialMedia from '../components/SocialMedia/SocialMedia'

// Struturing and typing of the props called on the api
type Menu = {
  id: number,
  attributes: AttributesMenu,
	meta: Object
}

interface AttributesMenu {
  structure: Structure[],
  createdAt: string,  
  updatedAt: string,
  publishedAt:string
}

interface Structure extends AttributesMenu{
  link:string;
  title:string;
}

// [key:string]: any - this adds tolerance when the prop received has more than we asked for.

type Content = {
  [key:string]:any;
  title:string;
  main_description:string;
  createdAt: string,  
  updatedAt: string,
  publishedAt:string
}

type Prop = {
  [key:string]: any,
  menu:any,
  content:any
}

export const getStaticProps: GetStaticProps = async (context) =>{
  const token = process.env.STRAPI_TOKEN; // Replace with your actual token
  const headers = { Authorization: `Bearer ${token}` };

  let res = await axios.get( `${process.env.NEXT_PUBLIC_BASE_URL}/api/mainmenu/`, { headers });
  const menu: Menu = await res.data

  const about: Content = await loadAbout()

  return {
    props: {
      menu: menu,
      about:about,
      // Next.js will attempt to re-generate the page:
      // - When a request comes in
      // - At most once every 10 seconds
      revalidate: 10, // In seconds
    }
  }
}


export const Contacts:NextPage = (props: Prop) => {
    const [about, setAbout] = useState(props.about.data.attributes)
    return (
        <Layout menu={props.menu}>
            <Marquee images={about.image.data}/>
            <ContactForm/>
            <ContactDetails/>
            <SocialMedia/>
        </Layout>

      )
}

export default Contacts
