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

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

import {settings, loadAbout, loadPartners, loadMenu} from './../constants/constants'

// Components

import Layout from '../components/Layout/Layout'
import axios from 'axios'
import HeroText from '../components/HeroText/HeroText'
import MidTitle from '../components/MidTitle/midTitle'
import ThreeImg from '../components/Threeimg/threeImg'
import Partners from '../components/partners/partners'
import ContactNow from '../components/ContactNow/ContactNow'
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 ContentProp = {
  [key:string]: any,
  title:string,
  main_description:string,
  createdAt: string,  
  updatedAt: string,
  publishedAt:string
}

type Props = {
  [key:string]:any; 
  menu: any,
  content:any,
  partners: any
}


//  API acall
export const getStaticProps: GetStaticProps = async (context) =>{
  const menu: Menu = await loadMenu()
  const content: ContentProp = await loadAbout()
  const partners: ContentProp = await loadPartners()
// Returns props to the actual page
  return {
    props: {
      menu: menu,
      content: content,
      partners: partners,

    },
    // 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 Aboutus:NextPage<Props> = (props: Props) => {
  if(props.propsMore){
    props=props.propsMore;
  }

  const [content, setContent] = useState(props.content.data.attributes)
  const [menu, setMenu] = useState(props.menu.data.attributes)
  const [partners, setPartners] = useState(props.partners.data.attributes)

  const columns = [
    {title:content.sobrenos.column1_title, content:content.sobrenos.column1_desc},
    {title:content.sobrenos.column2_title, content:content.sobrenos.column2_desc},
    {title:content.sobrenos.column3_title, content:content.sobrenos.column3_desc},
  ]


  return (
    <div className={styles.container}>
      <Head>
        <title>Creative Discovery</title>
        <meta name="description" content="Creative Discovery" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout menu={props.menu}>
          <HeroText title={content.title} maindesc={content.main_description} imageSrc={content.image.data} active={true}/>
          <MidTitle text={content.mid_heading}/>
          <section className={'sec_container'}>
            <div className={'columns'}>
              {columns.map((item,index)=>{return(
                <div key={`${item}-${index}`} className={'column'}>
                    <div className={'column_title'} ><h3>{item.title}</h3></div>
                    <div className={'column_content'} ><p>{item.content}</p></div>
                  </div>
                  )
                }
                )}
            </div>
          </section>
          <ThreeImg imagesSrc={content.threeimages.data}/>
          <Partners {...partners} /> 
          <ContactNow/>
          <SocialMedia/>
      </Layout>
    </div>
  )
}

export default Aboutus
