import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Rate from 'rc-rate'
import ServiceImages from './components/ServiceImages'
import ServiceAudios from './components/ServiceAudios'
import AvatarImage from '../../assets/images/avatar_image.png'
import ServiceHeader from './components/ServiceHeader'
import { useGetServiceBySlug } from './hooks/useServiceData'
import { useParams } from 'react-router-dom'
import PageLoading from '../../components/PageLoading'
import moment from 'moment-jalaali'
import { useGetAds } from '../ads/hooks/useAdsData'
import { AdsDisplayLocation } from '../ads/types/AdsTypes'
import CreateReview from './components/CreateReview'
import { ReviewItemType } from './types/ServiecTypes'

const DetailService: FC = () => {

    const { id } = useParams()
    const { t } = useTranslation('global')
    const getAdsLeft = useGetAds(AdsDisplayLocation.SINGLE_SERVICE_PAGE)

    const getDetailService = useGetServiceBySlug(id ? id : '')
    const [isExpanded, setIsExpanded] = useState(false)

    return (
        <div className='w-full flex gap-6 mt-4'>

            {
                getDetailService.isPending ?
                    <PageLoading />
                    :
                    <Fragment>
                        <div className='flex-1 max-w-full'>

                            <ServiceHeader data={getDetailService?.data?.data?.danakService} />
                            <div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                    <div className='text-description xl:text-xs text-[11px]'>
                                        {t('service.company_develop')}
                                    </div>
                                    <div className='mt-3 text-sm'>
                                        {t('service.company_danak')}
                                    </div>
                                </div>
                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                    <div className='text-description xl:text-xs text-[11px]'>
                                        {t('service.user_count')}
                                    </div>
                                    <div className='mt-3 text-sm'>
                                        +{getDetailService?.data?.data?.danakService?.userCount}
                                    </div>
                                </div>
                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                    <div className='text-description xl:text-xs text-[11px]'>
                                        {t('service.year_make')}
                                    </div>
                                    <div className='mt-3 text-sm'>
                                        {moment(getDetailService?.data?.data?.danakService?.createDate, 'jYYYY-jMM-jDD').format('jYYYY')}
                                    </div>
                                </div>
                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                    <div className='text-description xl:text-xs text-[11px]'>
                                        {t('service.lang_app')}
                                    </div>
                                    <div className='mt-3 text-sm'>
                                        {getDetailService?.data?.data?.danakService?.serviceLanguage === 'fa' ? t('service.persian') : t('service.english')}
                                    </div>
                                </div>
                                <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
                                    <div className='text-description xl:text-xs text-[11px]'>
                                        {t('service.score')}
                                    </div>
                                    <div className='mt-3 dltr flex gap-1 text-sm'>
                                        <Rate
                                            count={5}
                                            style={{ fontSize: 15 }}
                                            value={getDetailService?.data?.data?.averageRating}
                                            disabled
                                            allowHalf
                                        />
                                    </div>
                                </div>
                            </div>

                            <ServiceImages item={getDetailService?.data?.data?.danakService} />

                            <div className='mt-8 bg-white p-6 rounded-3xl'>
                                <div>
                                    {t('service.compelete_description')}
                                </div>

                                <ServiceAudios item={getDetailService?.data?.data?.danakService} />

                                <p
                                    dangerouslySetInnerHTML={{ __html: getDetailService.data?.data?.danakService?.metaDescription }}
                                    className={`text-[13px] mt-4 leading-6 ${!isExpanded ? 'line-clamp-4' : ''}`}
                                >
                                </p>
                                {
                                    (getDetailService.data?.data?.danakService?.metaDescription?.length || 0) > 0 && (
                                        <div className='mt-3'>
                                            <button
                                                onClick={() => setIsExpanded(prev => !prev)}
                                                className='text-xs text-blue-600'
                                            >
                                                {isExpanded ? 'کمتر' : 'دیدن بیشتر'}
                                            </button>
                                        </div>
                                    )
                                }
                            </div>

                            <div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
                                {
                                    getDetailService.data?.data?.purchased &&
                                    <CreateReview refetch={() => getDetailService.refetch()} />
                                }
                                <div className='flex-1 w-full max-w-full bg-white p-6 rounded-3xl'>
                                    <div className='text-sm'>
                                        {t('service.users_comments')}
                                    </div>

                                    {
                                        getDetailService.data?.data?.danakService?.reviews?.map((item: ReviewItemType) => {
                                            return (
                                                <div className='mt-5 border border-border rounded-3xl p-6'>
                                                    <div className='flex gap-2 items-center'>
                                                        <img src={item.user.profilePic || AvatarImage} className='size-6 rounded-full object-cover' />
                                                        <div className='text-description text-xs'>
                                                            {item.user?.firstName + ' ' + item.user?.lastName}
                                                        </div>
                                                    </div>

                                                    <div className='mt-4 flex justify-between'>
                                                        <div className='text-sm max-w-[70%] truncate'>
                                                            {item.title}
                                                        </div>
                                                        <div className='text-xs text-description'>
                                                            {moment(item.createdAt).fromNow()}
                                                        </div>
                                                    </div>

                                                    <div className='mt-2'>
                                                        <Rate
                                                            disabled
                                                            value={item.rating}
                                                            count={5}
                                                            style={{ fontSize: 14 }}
                                                        />
                                                    </div>

                                                    <div className='mt-4 text-[11px] leading-6'>
                                                        {item.comment}
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </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-4'>
                                <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>
                        }
                    </Fragment>
            }


        </div>
    )
}

export default DetailService