import Button from '@/components/Button'
import { AddCircle } from 'iconsax-react'
import { FC, useState, useEffect } from 'react'
import { useGetTemplates } from './hooks/usePersonalityData'
import { Link } from 'react-router-dom'
import { Paths } from '@/utils/Paths'
import { TemplateResponseType } from './types/Types'
import Templete from './components/Templete'

const List: FC = () => {
    const { data } = useGetTemplates()
    const [optimisticSelectedId, setOptimisticSelectedId] = useState<string | null>(null)

    // پیدا کردن template انتخاب شده از سرور
    const serverSelectedTemplateId = data?.data?.templates?.find(
        (template: TemplateResponseType) => template.selected
    )?.id

    // استفاده از optimistic state یا server state
    const selectedTemplateId = optimisticSelectedId || serverSelectedTemplateId

    // وقتی داده‌های جدید از سرور می‌آید، optimistic state را پاک کن
    useEffect(() => {
        if (data?.data?.templates) {
            setOptimisticSelectedId(null)
        }
    }, [data])

    return (
        <div className='mt-2 md:mt-4 px-2 md:px-0'>
            <div className='flex justify-between items-center'>
                <div>قالب ها</div>
                <Link
                    to={Paths.settingPersonality}
                >
                    <Button
                        className='w-fit px-5'
                    >
                        <div className='flex gap-2'>
                            <AddCircle size={18} color='white' />
                            <div className='text-sm'>اضافه کردن قالب جدید</div>
                        </div>
                    </Button>
                </Link>
            </div>

            <div className='mt-9 flex flex-col lg:flex-row flex-wrap lg:gap-10 gap-5'>
                {
                    data?.data?.templates?.map((item: TemplateResponseType) => {
                        return (
                            <Templete
                                key={item.id}
                                item={item}
                                selectedTemplateId={selectedTemplateId}
                                onOptimisticSelect={setOptimisticSelectedId}
                            />
                        )
                    })
                }
                <div className='flex-1 max-w-[25%] min-w-[20%] w-full px-4'></div>
                <div className='flex-1 max-w-[25%] min-w-[20%] w-full px-4'></div>
                <div className='flex-1 max-w-[25%] min-w-[20%] w-full px-4'></div>

            </div>
        </div>
    )
}

export default List