"use client"
import React from "react"
import ProjectsData from '../../projects.json'
import Link from "next/link"
import Image from "next/image"
import { useState } from "react"
import { useEffect } from "react"
import MainMenu from "@/components/mainMenu"
import Footer from "@/components/footer"



type project = {
    title: string,
    description: string,
    location: string,
    client: string, 
    images: string[],
    category : string,
    scope : string,
}

const ProjectsPage = () => {

    const [categories, setCategories] = useState<string[] >([])
    const [projects, setProjects] = useState<project[]>(ProjectsData)
    



    
    useEffect(()=> {
       
        const fetchCategories  = ()  => {
            const cats : string[]  = []
            for (let index = 0; index < projects.length; index++) {
                
                if(!cats.includes(projects[index].category)){
                    cats.push(projects[index].category)
                }
                
            }
            setCategories(cats)
            
            
        }
        
        fetchCategories()
        
    }, [])

    

    const handleCategoryClick = (e : string) => {

        let projs : project[] = [];
        console.log(e);
        if(e == 'all'){
            projs = ProjectsData
            
        } else {
            projs = ProjectsData.filter((val) => val.category == e)
            console.log(projs.length);

        }
        setProjects(projs)
        
        
    }

    return (
        <div>
          <MainMenu/>
        <div className="mt-36 mx-40 mb-20">
            <div className="flex flex-row justify-end items-center">
                <p className="ml-8 cursor-pointer hover:text-deeba-main" onClick={()=>handleCategoryClick('all')}>All</p>
                {categories.map((val, index)=> (
                    <p key={index} className="ml-8 hover:text-deeba-main cursor-pointer" onClick={()=>handleCategoryClick(val)}>{val}</p>
                ))}
            </div>

        <div className={(projects.length%2 === 0? 'grid-cols-2 ' : 'grid-cols-3 ') + "grid gap-6  mt-10" }>
            {
                projects.map((proj, index) => (
                    <Link key={index} href={`/project?project=${proj.title.toLowerCase().replace(/ /g, '')}`}>
                    <div  className="w-full h-[320px] group">
                        <div className="w-full h-full group-hover:h-[260px] relative">
                            <Image alt={proj.title} src={proj.images[0]} layout="fill" objectFit="cover"/>
                        </div>
                        <div className="hidden group-hover:block mt-2">
                            <p className="text-2xl font-light">{proj.title}</p>
                            <p>{proj.scope}</p>
                        </div>

                    </div>
                    </Link>
                ))
            }
        </div>
        </div>
        <Footer/>
        </div>
    )
}

export default ProjectsPage