import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'
import { ParsedUrlQuery } from 'querystring'

import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import { useState } from 'react'

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

import {loadMenu, loadProjects} from '../../constants/constants'
import {loadProjectById} 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'
import { useRouter } from 'next/router'

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

}

// Define the dynamic route parameter
interface Params extends ParsedUrlQuery {
  id: any,
  slug: any
}

// Generate the paths to pre-render at build time
export const getStaticPaths: GetStaticPaths = async () => {
  const projects: ContentProp = await loadProjects()
  //projects.data because it always makes a object on top of an array for now 
  const paths = projects.data.map((project) => ({
    params: { id: project.id.toString(), slug: project.attributes.slug},
  }))
  return { paths, fallback: false }
}

//  API acall
export const getStaticProps: GetStaticProps = async (context) =>{
  const menu: Menu = await loadMenu()
  const {id} = context.params as Params
  const projects: ContentProp = await loadProjectById(id)
// Returns props to the actual page
  return {
    props: {
      menu:menu,
      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 [projects, setProjects] = useState(props.projects.data)
  const router = useRouter();
  const {id} = router.query;
  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}>

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



export default Aboutus
