import { FC, useEffect, useState } from 'react'
import { useWorkspaces } from './hooks/useHomeData'
import { workspaceItem } from './types/HomeTypes'
import moment from 'moment-jalaali'
import { toast } from 'react-toastify'

const Home: FC = () => {

    const getWorkspaces = useWorkspaces()
    const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(null)

    useEffect(() => {
        setSelectedWorkspace(localStorage.getItem(import.meta.env.VITE_WORKSPACE_ID))
    }, [])

    useEffect(() => {
        if (getWorkspaces.isError && getWorkspaces.error instanceof Error) {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const error = getWorkspaces.error as any;
            if (error.response?.status === 403) {
                toast.error(error.response?.data?.error.message[0])
                localStorage.removeItem(import.meta.env.VITE_WORKSPACE_ID)
                window.location.href = 'https://console.danakcorp.com'
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [getWorkspaces.isError, getWorkspaces.data])


    const handleChangeWorkspace = (id: string) => {
        localStorage.setItem(import.meta.env.VITE_WORKSPACE_ID, id)
        setSelectedWorkspace(id)
        window.location.reload()
    }

    return (
        <div className='w-full flex gap-6'>
            <div className='flex-1'>

                <div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
                    {
                        getWorkspaces.data?.data?.workspaces?.map((item: workspaceItem) => {
                            return (
                                <div className={`p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl cursor-pointer transition-all duration-300 hover:shadow-lg ${selectedWorkspace === item.id ? 'border border-black' : ''}`}
                                    onClick={() => handleChangeWorkspace(item.id)}
                                >
                                    <div className='mt-5'>
                                        {item.businessName}
                                    </div>

                                    <div className='mt-5'>
                                        {item.plan?.name}
                                    </div>

                                    <div className='mt-5 flex gap-1'>
                                        <div>تاریخ پایان: </div>
                                        <div className='text-description text-sm'>{moment(item?.endDate).format('jYYYY/jMM/jDD')}</div>
                                    </div>
                                </div>
                            )
                        })
                    }

                    <div className='px-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px]'></div>
                </div>
            </div>
        </div>
    )
}

export default Home