import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { ArrowLeft, Element3, Messages3, NotificationStatus, Receipt21 } from 'iconsax-react'
import ItemDashboard from './components/ItemDashboard'
import TitleLine from '../../components/TitleLine'
import AccessbilityImage from '../../assets/images/accessbility.jpg'
import BoxNewAccessbility from './components/BoxNewAccessbility'
import DanakLearning from './components/DanakLearning'
import { Carousel } from "@material-tailwind/react";
import { useGetAds } from '../ads/hooks/useAdsData'
import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
import { Pages } from '../../config/Pages'
import { useGetDashboardSummary, useGetQuikAccess } from './hooks/useHomeData'
import { QuikAccessItemType } from './types/HomeTypes'
import ServiceItem from '../../components/ServiceItem'
import PageLoading from '../../components/PageLoading'
import { Helmet } from 'react-helmet-async';
import { useHomeStore } from './store/HomeStore'


const Home: FC = () => {

    const { t } = useTranslation('global')
    const { setShowModal } = useHomeStore()
    const getAds = useGetAds(AdsDisplayLocation.HOMEPAGE_TOP)
    const getQuikAccess = useGetQuikAccess()
    const getDashboard = useGetDashboardSummary()

    return (
        <Fragment>
            <Helmet>
                <title>داناک | پیشخوان</title>
            </Helmet>
            {
                getAds.isPending || getQuikAccess.isPending || getDashboard.isPending ?
                    <div className='mt-5'>
                        <PageLoading />
                    </div>
                    :
                    <div className='w-full flex gap-6'>
                        <div className='flex-1'>
                            <Carousel autoplay className="rounded-3xl carousel overflow-hidden h-fit dltr z-[1]" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
                                {
                                    getAds.data?.data?.ads?.map((item: AdsItemType) => {
                                        return (
                                            <div key={item.id} className='relative drtl'>
                                                <img src={item.imageUrl} className='w-full rounded-3xl min-h-[190px] max-h-[300px] h-full object-cover' />
                                                <div className='absolute bg-black bg-opacity-20 size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
                                                    <div></div>

                                                    <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
                                                        <div className='xl:text-lg text-sm'>
                                                            {item.title}
                                                        </div>
                                                        {
                                                            <a href={item.link}>
                                                                <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
                                                                    <div>
                                                                        {t('home.detail')}
                                                                    </div>
                                                                    <ArrowLeft size={14} color='white' />
                                                                </button>
                                                            </a>
                                                        }

                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </Carousel>

                            <div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
                                <ItemDashboard
                                    title={t('home.myservice')}
                                    icon={<Element3 size={20} color='black' />}
                                    color='#00D16C'
                                    count={getDashboard.data?.data?.subscriptionCount}
                                    description={t('home.active_service')}
                                    link={Pages.services.mine}
                                />

                                <ItemDashboard
                                    title={t('home.ticket')}
                                    icon={<Messages3 size={20} color='black' />}
                                    color='#FF7B00'
                                    count={getDashboard.data?.data?.ticketCount}
                                    description={t('home.unread_messages')}
                                    link={Pages.ticket.list}
                                />

                                <ItemDashboard
                                    title={t('receip.receip')}
                                    icon={<Receipt21 size={20} color='black' />}
                                    color='#0047FF'
                                    count={getDashboard.data?.data?.invoiceCount}
                                    description={t('home.receip')}
                                    link={Pages.receipts.index}
                                />

                                <ItemDashboard
                                    title={t('home.announcement')}
                                    icon={<NotificationStatus size={20} color='black' />}
                                    color='#FF0000'
                                    count={getDashboard.data?.data?.announcementCount}
                                    description={t('home.unread_announcement')}
                                    link={Pages.announcement.list}
                                />

                            </div>

                            <div className='w-full mt-8'>
                                <TitleLine title={t('home.access')} />
                            </div>

                            <div className='mt-8 flex flex-wrap gap-6 items-stretch'>
                                {
                                    getQuikAccess?.data?.data?.quickAccesses?.length === 0 &&
                                    <div className='flex-1 min-w-[40%] xl:!min-w-[20%] xl:p-6 p-4 min-h-[152px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
                                        <img src={AccessbilityImage} className='w-10' />
                                        <div className='text-xs text-center'>
                                            {t('home.add_access')}
                                        </div>
                                    </div>
                                }
                                {
                                    getQuikAccess.data?.data?.quickAccesses?.map((item: QuikAccessItemType) => {
                                        return (
                                            <ServiceItem
                                                key={item.service.id}
                                                item={item.service}
                                                className='flex-1 min-w-[40%] xl:!min-w-[20%] xl:p-6 p-4 flex flex-col'
                                                isQuikAccess
                                                businessName={item.userSubscription.businessName}
                                                isLinkPanel
                                                onMoreClick={() => setShowModal(true)}
                                            />
                                        )
                                    })
                                }
                                {Array.from({ length: 4 - (getQuikAccess.data?.data?.quickAccesses?.length || 1) }).map((_, index) => (
                                    <BoxNewAccessbility key={index} />
                                ))}

                                <div className='flex-1 min-w-[40%] xl:min-w-[20%] xl:p-6 p-4'></div>
                                <div className='flex-1 min-w-[40%] xl:min-w-[20%] xl:p-6 p-4'></div>
                            </div>
                        </div>
                        <DanakLearning />
                    </div>
            }
        </Fragment>
    )
}

export default Home