import Layout from '@/Layouts/Layout';
import Searchbar from '@/Components/Searchbar';
import CreateButton from '@/Components/CreateButton';
import CategoryForm from '@/Components/CategoryForm';
import CategoryCard from '@/Components/CategoryCard';

import { useState } from 'react'
import { router } from '@inertiajs/react'

export default function Index({ categories }){

    let [createOpen, setCreateOpen] = useState(false);

    function handleCancel(){
        setCreateOpen(false);
    }
    function handleCreateClick(){
        setCreateOpen(true);
    }

    function handleCreate(){
        setCreateOpen(false);
        router.refresh();
    }
    const category_list = categories.map((category) => (
        <CategoryCard category={ category } />
    ));

    return (
        <div className="relative flex flex-col h-full w-full space-y-6">
            {createOpen ? <div className="flex items-center justify-center absolute top-0 z-50 backdrop-blur h-full w-full rounded-lg backdrop-brightness-75">
                <CategoryForm onCancel = {handleCancel}/>
            </div> : ''}
            <div className="flex  justify-between h-fit">
                <Searchbar />
                <CreateButton onClick={ handleCreateClick } title="افزودن دسته بندی"/>
            </div>
            <div className="grid grid-cols-2 gap-8 ">
                {category_list}
            </div>
            
        </div>  
    );
}

Index.layout = page => <Layout children={page} />