import { Carousel } from '@material-tailwind/react'
import { FC, Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { ArrowLeft } from 'iconsax-react'
import TitleLine from '../../components/TitleLine'
import { useGetSuggestedServices } from './hooks/useServiceData'
import PageLoading from '../../components/PageLoading'
import { ItemServiceType } from './types/ServiecTypes'
import ServiceItem from '../../components/ServiceItem'
import OtherServicesComponent from './components/OtherServices'
import { useGetAds } from '../ads/hooks/useAdsData'
import { AdsDisplayLocation, AdsItemType } from '../ads/types/AdsTypes'
import { Helmet } from 'react-helmet-async'


const OtherServices: FC = () => {

    const { t } = useTranslation('global')

    const getSuggestedServices = useGetSuggestedServices()
    const getAds = useGetAds(AdsDisplayLocation.OTHER_SERVICES_TOP)
    const getAdsLeft = useGetAds(AdsDisplayLocation.OTHER_SERVICES_LEFT)

    return (
        <div className='w-full flex gap-6'>
            <Helmet>
                <title>داناک | لیست سرویس ها
                </title>
            </Helmet>
            <div className='flex-1'>
                {
                    getSuggestedServices.isPending || getAdsLeft.isPending ?
                        <PageLoading />
                        :
                        <Fragment>
                            <Carousel autoplay className="rounded-xl 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-xl 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'>
                                                    <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">

                                                    </button>

                                                    <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='w-full mt-8'>
                                <TitleLine title={t('service.selected_danak')} />
                            </div>

                            <div className='flex flex-wrap xl:gap-6 gap-4 items-center mt-8'>
                                {
                                    getSuggestedServices.data?.data?.danakServices?.map((item: ItemServiceType) => (
                                        <ServiceItem
                                            key={item.id}
                                            item={item}
                                        />
                                    ))
                                }
                                <div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
                            </div>



                            <OtherServicesComponent />



                            <div className='h-16 xl:hidden'></div>
                        </Fragment>
                }


            </div>
            {
                getAdsLeft.isSuccess && getAdsLeft.data.data.ads[0] &&
                <a href={getAdsLeft.data?.data?.ads[0].link} target='_blank' className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden sticky top-0'>
                    <img
                        src={getAdsLeft.data.data.ads[0].imageUrl}
                        className='w-full backdrop-blur-[100px] h-[550px] object-cover'
                    />

                    <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
                        <div className='max-w-[80%] text-sm leading-6 text-white'>
                            {getAdsLeft.data.data.ads[0].title}
                        </div>
                    </div>
                </a>
            }
        </div>
    )
}

export default OtherServices