import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import StatusWithText from '../../components/StatusWithText'
import { clx, buildPath } from '../../helpers/utils'
import { useNavigate, useParams } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetAnnoncement } from './hooks/useAnnoncementData'
import { AnnoncementItemType } from './types/AnnoncementTypes'
import moment from 'moment-jalaali'
import AnouncementSkeleton from './components/AnouncementSkeleton'

const AnnouncementtList: FC = () => {

    const { slug } = useParams()
    const navigate = useNavigate()
    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const [itemSelected, setItemSelected] = useState<AnnoncementItemType>()
    const getAnnoncements = useGetAnnoncement(search)

    const handleChange = (item: AnnoncementItemType) => {
        if (window.innerWidth < 1280) {
            navigate(buildPath(Pages.announcement.detail + item.announcement.id, slug))
        } else {
            setItemSelected(item)
        }
    }

    return (
        <div className='mt-4 text-sm'>
            <div className='text-base'>
                {t('announcement.announcements')}
            </div>

            <div className='mt-10 flex gap-8'>
                <div className='bg-white xl:w-[400px] w-full rounded-2xl p-6'>
                    <div className='flex gap-3 items-center'>
                        <div className='flex-1'>
                            <Input
                                variant='search'
                                placeholder={t('announcement.search')}
                                className='-mt-1'
                                onChangeSearchFinal={(value) => setSearch(value)}
                            />
                        </div>

                        {/* <div>
                            <Select
                                items={[
                                    { value: '1', label: 'همه' },
                                    { value: '2', label: 'فعال' },
                                    { value: '3', label: 'غیر فعال' },
                                ]}
                                className='bg-[#EEF0F7] w-[68px]'
                            />
                        </div> */}
                    </div>

                    <Fragment>
                        <div className='mt-8'>
                            {
                                getAnnoncements.isPending ?
                                    <Fragment>
                                        <AnouncementSkeleton />
                                        <AnouncementSkeleton />
                                        <AnouncementSkeleton />
                                    </Fragment>
                                    :
                                    getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
                                        return (
                                            <div onClick={() => handleChange(item)} className={clx(
                                                'p-4 border-b cursor-pointer',
                                                item.id === itemSelected?.id && 'bg-[#F8F9FB]'
                                            )}>
                                                <div className='flex justify-between'>
                                                    <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
                                                        {item.announcement.title}
                                                    </div>

                                                    <div className='flex gap-1'>
                                                        {
                                                            item.announcement.isImportant &&
                                                            <StatusWithText
                                                                variant='error'
                                                                text={t('announcement.important')}
                                                            />
                                                        }
                                                        {
                                                            !item.isRead &&
                                                            <StatusWithText
                                                                variant='success'
                                                                text={t('announcement.new')}
                                                            />
                                                        }
                                                    </div>
                                                </div>

                                                <div className='m-2 flex justify-between items-center text-[11px]'>
                                                    <div dangerouslySetInnerHTML={{ __html: item.announcement.content }} className='max-w-[70%] truncate text-description'>
                                                    </div>
                                                    <div className='text-description'>
                                                        {moment(item.announcement.publishAt).format('jYYYY/jMM/jDD')}
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })
                            }

                        </div>
                    </Fragment>
                </div>

                {
                    itemSelected &&
                    <div className='flex-1 hidden xl:block bg-white py-7 px-5 rounded-2xl'>
                        <div className='flex justify-between items-center'>
                            <div className='text-lg'>
                                متن اطلاعیه
                            </div>
                            {
                                itemSelected.announcement.isImportant &&
                                <StatusWithText
                                    variant='error'
                                    text={t('announcement.important')}
                                />
                            }
                        </div>

                        <div className='mt-8'>
                            {itemSelected.announcement.title}
                        </div>

                        <div dangerouslySetInnerHTML={{ __html: itemSelected.announcement.content }} className='mt-5 leading-7 text-xs font-light'>

                        </div>
                    </div>
                }
            </div>

        </div>
    )
}

export default AnnouncementtList