import Divider from '@/components/Divider'
import { ArrowLeft, DocumentText } from 'iconsax-react'
import { useState, type FC } from 'react'
import PdfIcon from '@/assets/images/PDF.svg'
import Button from '@/components/Button'
import Input from '@/components/Input'
import { toast } from '@/components/Toast'
import { useCreateCatalog } from './hooks/useHomeData'
import { useNavigate } from 'react-router-dom'
import { Paths } from '@/config/Paths'
import DirectLogin from '../auth/components/DirectLogin'

const Home: FC = () => {

    const navigate = useNavigate()
    const [active, setActive] = useState<string>('a4')
    const [name, setName] = useState<string>('')
    const { mutate: createCatalog, isPending } = useCreateCatalog()

    const handleSubmit = () => {
        if (!name) {
            toast('نام کاتالوگ را وارد کنید', 'error')
        } else {
            createCatalog({ name: name, size: active, content: '' }, {
                onSuccess: (data) => {
                    toast('کاتالوگ با موفقیت ساخته شد', 'success')
                    navigate(Paths.editor + `/${data?.data?.id}`)
                },
                onError: () => {
                    toast('خطا در ساخت کاتالوگ', 'error')
                }
            })
        }
    }

    return (
        <div className='mt-4 w-full'>
            <div className='flex justify-between'>
                <h1 className='text-lg font-light'>
                    ساخت  کاتالوگ ب ویرایشگر داناک
                </h1>
                <DirectLogin />
            </div>

            <div className='mt-20 bg-white rounded-4xl p-10'>
                <div className='text-center'>
                    سایز و نام مورد نظر را  انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید
                </div>

                <div>
                    <div className='mt-8 flex justify-center gap-8'>
                        <div onClick={() => setActive('a4')} className={`
                            w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
                            ${active === 'a4' && 'border-black!'}
                            `}>
                            <div>
                                <div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
                                    <DocumentText size={24} color='black' />
                                </div>

                                <div className='mt-3 text-center text-sm'>
                                    A4
                                </div>
                            </div>
                        </div>
                        <div onClick={() => setActive('a3')} className={`
                            w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
                            ${active === 'a3' && 'border-black!'}
                            `}>
                            <div>
                                <div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
                                    <DocumentText size={24} color='black' />
                                </div>

                                <div className='mt-3 text-center text-sm'>
                                    A3
                                </div>
                            </div>
                        </div>
                        <div onClick={() => setActive('a5')} className={`
                            w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center
                            ${active === 'a5' && 'border-black!'}
                            `}>
                            <div>
                                <div className='size-[94px] bg-[#EEF0F7] rounded flex justify-center items-center'>
                                    <DocumentText size={24} color='black' />
                                </div>

                                <div className='mt-3 text-center text-sm'>
                                    A5
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className='mt-5'>
                        <Input
                            label='نام کاتالوگ'
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                        />
                    </div>

                    <div className='flex justify-center'>
                        <Button disabled={isPending} onClick={handleSubmit} className='mt-8 rounded-xl'>
                            <div className='flex gap-2 items-center'>
                                ادامه
                                <ArrowLeft size={16} color='white' />
                            </div>
                        </Button>
                    </div>
                </div>

                <Divider label='یا' className='mt-10' />

                <div className='mt-20 flex justify-center'>
                    <div className='w-[183px] h-[193px] rounded-[18px] border flex flex-col items-center justify-center'>
                        <img src={PdfIcon} alt='upload' className='w-12' />
                        <div className='text-sm mt-3'>
                            آپلود PDF
                        </div>

                        <div className='h-5 px-5 rounded-full flex items-center bg-[#D4EDDE] text-[#01973D] text-[10px] mt-3'>
                            رایگان
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Home