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/project.module.css'

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

// Components

import Layout from './../../components/Layout/Layout'
import axios from 'axios'
import HeroText from './../../components/HeroText/HeroText'
import ContactNow from '../../components/ContactNow/ContactNow'

// 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

}


//  API acall
export const getStaticProps: GetStaticProps = async (context) =>{
  const menu: Menu = await loadMenu()
  const content: ContentProp = await loadProjectPage()
  const projects: ContentProp = await loadProjects()
// Returns props to the actual page
  return {
    props: {
      menu: menu,
      content: content,
      projects: projects,
    },
    // 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) => {
  const [content, setContent] = useState(props.content.data.attributes)
  const [menu, setMenu] = useState(props.menu.data.attributes)
  const [projects, setProjects] = useState(props.projects.data)

  const columns = [
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
    {title:'test', content:'what'},
  ]


  return (
      <>
        <Head>
          <title>Creative Discovery</title>
          <meta name="description" content="Creative Discovery" />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Layout menu={props.menu}>
            <div className={styles.container}>
            <HeroText title={content.title} maindesc={content.main_description} />
            <ul className={styles.projects_grid}>

            {columns.map((item, index)=>{
                return(
                  <Link key={index} href={`/projects/1`}>
                      <Image src="https://placekitten.com/1080/1080"  width="1080" height="1080" alt="" />
                  </Link>

                )
              {/* {projects.map((item, index)=>{
                return(
                  <Link key={index+item.id} href={`/projects/${item.attributes.slug}`}>
                      <Image src="https://placekitten.com/512/512"  width="300" height="300" alt="" />
                      <li>{item.attributes.title}</li>
                  </Link>

                ) */}
              })}
            </ul>
            <ContactNow/>
            </div>
        </Layout>
      </>
  )
}

export default Aboutus
