import { Notification } from 'iconsax-react'
import { FC, useState } from 'react'
import XIcon from '../../assets/images/close-circle.svg'
import { useTranslation } from 'react-i18next'
import { clx } from '../../helpers/utils'
import StatusCircle from '../../components/StatusCircle'
import { useOutsideClick } from '../../hooks/useOutSideClick'

const Notifications: FC = () => {

    const { t } = useTranslation('global')
    const ref = useOutsideClick(() => setShowModal(false))
    const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all')
    const [showModal, setShowModal] = useState<boolean>(false)

    return (
        <div ref={ref}>
            <Notification onClick={() => setShowModal(!showModal)} size={18} color='black' />

            {
                showModal && (
                    <div className='xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 '>
                        <div className='flex justify-between items-center'>
                            <div>
                                {t('notif.natification')}
                            </div>
                            <div className='size-7 rounded-full bg-white bg-opacity-35  flex justify-center items-center'>
                                <img src={XIcon} alt='close' className='w-4 h-4' onClick={() => setShowModal(false)} />
                            </div>
                        </div>

                        <div className='mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden'>
                            <div onClick={() => setActiveTab('all')} className={clx(
                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
                                activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
                            )}>
                                همه
                            </div>
                            <div onClick={() => setActiveTab('unread')} className={clx(
                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
                                activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
                            )}>
                                خوانده نشده
                            </div>
                            <div onClick={() => setActiveTab('read')} className={clx(
                                'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
                                activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
                            )}>
                                خوانده شده
                            </div>
                        </div>

                        <div className='mt-6 flex flex-col gap-4 text-xs'>
                            <div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
                                <div className='mt-1'>
                                    <StatusCircle color='#00BA4B' />
                                </div>
                                <div className=''>
                                    <div className='truncate'>
                                        لورم ایپسوم متن ساختگی با تولید سادگی
                                    </div>
                                    <div className='mt-2 flex gap-2 text-[10px] text-description'>
                                        <div>۲ ساعت پیش</div>
                                        <div className='flex gap-1 items-center'>
                                            <StatusCircle color='#8C90A3' />
                                            <div>دیزاین</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
                                <div className='mt-1'>
                                    <StatusCircle color='#00BA4B' />
                                </div>
                                <div className=''>
                                    <div className='truncate'>
                                        لورم ایپسوم متن ساختگی با تولید سادگی
                                    </div>
                                    <div className='mt-2 flex gap-2 text-[10px] text-description'>
                                        <div>۲ ساعت پیش</div>
                                        <div className='flex gap-1 items-center'>
                                            <StatusCircle color='#8C90A3' />
                                            <div>دیزاین</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
                                <div className='mt-1'>
                                    <StatusCircle color='#00BA4B' />
                                </div>
                                <div className=''>
                                    <div className='truncate'>
                                        لورم ایپسوم متن ساختگی با تولید سادگی
                                    </div>
                                    <div className='mt-2 flex gap-2 text-[10px] text-description'>
                                        <div>۲ ساعت پیش</div>
                                        <div className='flex gap-1 items-center'>
                                            <StatusCircle color='#8C90A3' />
                                            <div>دیزاین</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )
            }
        </div>
    )
}

export default Notifications