import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../components/Input'
import ServiceSection from '../../components/ServiceSection'
import StatusCircle from '../../components/StatusCircle'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetMyServices } from './hooks/useServiceData'
import { MyServicesItem } from './types/ServiecTypes'
import { useGetAds } from '../ads/hooks/useAdsData'
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
import { Helmet } from 'react-helmet-async'

const MyServices: FC = () => {

    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const getServices = useGetMyServices(search)
    const getAdsLeft = useGetAds(AdsDisplayLocation.MY_SERVICES_PAGE)

    return (
        <div className='w-full flex gap-6 mt-4'>
            <Helmet>
                <title>
                    داناک | سرویس های من
                </title>
            </Helmet>
            <div className='flex-1'>
                <div>
                    {t('service.my_service')}
                </div>

                <div className='mt-8 flex  xl:gap-6 gap-4 items-center'>
                    <div className='xl:w-[300px] w-full'>
                        <Input
                            variant='search'
                            placeholder={t('service.search')}
                            className='bg-white w-full'
                            onChangeSearchFinal={(value) => setSearch(value)}
                        />
                    </div>

                    {/* <div>
                        <Select
                            items={[
                                { label: t('all'), value: 'all' },
                                { label: 'Active', value: 'active' },
                                { label: 'Inactive', value: 'inactive' },
                            ]}
                            className='max-w-[100px]'
                        />
                    </div> */}
                </div>

                <div className='flex items-stretch flex-wrap xl:gap-6 gap-4 xl:items-center mt-8'>

                    {
                        getServices.data?.data?.subscriptions?.map((item: MyServicesItem) => {
                            return (
                                <Link key={item.id} to={Pages.services.detail + item.id} className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
                                    <ServiceSection
                                        item={{
                                            author: item.plan.service.author,
                                            createDate: item.plan?.service?.createDate,
                                            createdAt: item.createdAt,
                                            description: item.plan?.service?.title,
                                            icon: item.plan?.service.icon,
                                            id: item.plan.service.id,
                                            isActive: item.plan.isActive,
                                            isDanakSuggest: item.plan.service.isDanakSuggest,
                                            link: item.plan.service.link,
                                            metaDescription: item.plan.service.metaDescription,
                                            name: item.plan.service.name,
                                            serviceLanguage: item.plan.service.serviceLanguage,
                                            softwareLanguage: item.plan.service.softwareLanguage,
                                            updatedAt: item.plan.service.updatedAt,
                                            userCount: item.plan.service?.userCount
                                        }}
                                    />
                                    <div className='mt-6 flex gap-1 items-center'>
                                        <StatusCircle
                                            color='#00BA4B'
                                        />
                                        <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
                                    </div>

                                </Link>
                            )
                        })
                    }


                </div>
            </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 MyServices