import { FC, useState } from 'react'
import TitleLine from '../../../components/TitleLine'
import { useTranslation } from 'react-i18next'
import { useGetCategoriesPublic, useGetServicesByCategory } from '../hooks/useServiceData'
import { SwiperSlide, Swiper } from 'swiper/react'
import { CategoryItemType, ItemServiceType } from '../types/ServiecTypes'
import { clx } from '../../../helpers/utils'
import ServiceItem from '../../../components/ServiceItem'

const OtherServicesComponent: FC = () => {

    const { t } = useTranslation('global')
    const [categoryId, setCategoryId] = useState<string>('')
    const getCategory = useGetCategoriesPublic()
    const getServices = useGetServicesByCategory(categoryId)

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

            <div className='mt-6'>
                <Swiper
                    className='w-full'
                    spaceBetween={15} // فاصله پیش‌فرض بین اسلایدها
                    slidesPerView='auto'
                >
                    <SwiperSlide className='max-w-[158px]'>
                        <div onClick={() => setCategoryId('')} className={clx(
                            'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
                            '' === categoryId && 'bg-white'
                        )}>
                            <div className='text-sm'>{t('all')}</div>
                        </div>
                    </SwiperSlide>
                    {
                        getCategory.data?.data?.categories?.map((item: CategoryItemType) => {
                            return (
                                <SwiperSlide key={item.id} className='max-w-[158px]'>
                                    <div onClick={() => setCategoryId(item.id)} className={clx(
                                        'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
                                        item.id === categoryId && 'bg-white'
                                    )}>
                                        <img src={item.icon} className='size-5 rounded-full object-cover' />
                                        <div className='text-sm'>{item.title}</div>
                                    </div>
                                </SwiperSlide>
                            )
                        })
                    }

                </Swiper>
            </div>



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

            </div>

            {/* <a target='_blank' key={item.id} href={item.status === 'ACTIVE' ? item.plan.service.link + item.id : '#'} className={clx(
                                        'flex-1  min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6 flex flex-col items-center self-stretch',
                                        item.status === 'INACTIVE' && 'opacity-50'
                                    )}>
                                        <div className="flex-grow">
                                            <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,
                                                    title: item.plan.service.title,
                                                }}
                                            />
                                        </div>
                                        <div className='mt-6 flex gap-1 items-center'>
                                            <StatusCircle
                                                color={item.status === 'ACTIVE' ? '#00BA4B' : '#FF0000'}
                                            />
                                            <div className='text-xs text-description'>
                                                {
                                                    item.status === 'ACTIVE' ?
                                                        t('active')
                                                        :
                                                        t('inactive')
                                                }
                                            </div>
                                        </div>
                                    </a> */}
        </div >
    )
}

export default OtherServicesComponent