'use client'
import { Profile, Calendar, Tag, ExportCurve, Whatsapp, Send2 } from 'iconsax-react'
import { FC } from 'react'
import Image from 'next/image'
// import MostVisited from '../components/MostVisited'
import ContactUs from '../components/ContactUs'
import { useGetBlogSingle } from '../hooks/useBlogsData'
import { timeAgo, toJalaliDate } from '@/config/func'
import MostVisited from './MostVisited'
import { TelegramShareButton, WhatsappShareButton } from 'react-share'
import CreateReview from './CreateReview'

type Props = {
    id: string
}

const SingleBlogPage: FC<Props> = ({ id }) => {
    const { data, refetch } = useGetBlogSingle(id)

    if (!data) return null

    return (
        <div className='mt-24 max-w-maxWidth mx-auto'>
            <h1 className='text-2xl font-bold'>
                {data?.data?.blog?.title}
            </h1>

            <div className='mt-10 flex xl:flex-row flex-col gap-8'>
                <div className='flex-1 bg-white rounded-4xl p-10'>
                    <div className='flex gap-4'>
                        <div className='flex gap-1'>
                            <div className='size-5 overflow-hidden rounded-full'>
                                <Image
                                    src={data?.data?.blog?.category?.iconUrl}
                                    alt={data?.data?.blog?.category?.title}
                                    width={20}
                                    height={20}
                                />
                            </div>
                            <h6 className='text-[#7D818C] text-sm'>{data?.data?.blog?.category?.title}</h6>
                        </div>

                        <div className='flex gap-1'>
                            <Profile size={20} color='#7D818C' />
                            <h6 className='text-[#7D818C] text-sm'>{data?.data?.blog?.author.firstName} {data?.data?.blog?.author.lastName}</h6>
                        </div>

                        <div className='flex gap-1'>
                            <Calendar size={20} color='#7D818C' />
                            <h6 className='text-[#7D818C] text-sm'>{toJalaliDate(data?.data?.blog?.createdAt)}</h6>
                        </div>
                    </div>

                    <div className='mt-6'>
                        <Image
                            src={data?.data?.blog?.imageUrl}
                            alt={data?.data?.blog?.title}
                            width={1000}
                            height={1000}
                            className='w-full rounded-4xl max-h-[400px] object-cover'
                        />
                    </div>

                    <p id='blog-content' dangerouslySetInnerHTML={{ __html: data?.data?.blog?.content }} className='mt-8 text-sm leading-6'>

                    </p>

                    <div className='mt-6 flex items-center gap-2  text-description text-sm'>
                        <Tag size={20} color='#7D818C' />
                        <div>برچسب ها :</div>
                        {
                            data?.data?.blog?.tags.map((tag) => {
                                return (
                                    <div key={tag} className='text-xs flex items-center h-6 rounded-md  bg-[#EAEDF5] text-[#999999] px-4'>
                                        {tag}
                                    </div>
                                )
                            })
                        }
                    </div>

                    <div className='mt-6 flex gap-4 border-y border-[#E5E5E5] py-4'>
                        <div className='text-sm'>اشتراک گذاری</div>

                        <WhatsappShareButton url={`${window.location.origin}/blogs/${id}`}>
                            <Whatsapp
                                size={20}
                                color='black'
                            />
                        </WhatsappShareButton>
                        <TelegramShareButton url={`${window.location.origin}/blogs/${id}`}>
                            <Send2
                                size={20}
                                color='black'
                            />
                        </TelegramShareButton>

                        {navigator.share && (
                            <button
                                onClick={() =>
                                    navigator.share({
                                        title: data?.data?.blog?.title,
                                        text: 'Check out this blog!',
                                        url: `${window.location.origin}/blogs/${id}`,
                                    })
                                }
                                className='cursor-pointer'
                            >
                                <ExportCurve size={20} color='black' />
                            </button>
                        )}
                    </div>


                </div>

                <div className='xl:w-[261px]'>
                    <MostVisited />
                    <div className='mt-6'>
                        <ContactUs />
                    </div>
                    <div className='mt-6'>
                        {/* <MostVisited /> */}
                    </div>
                </div>
            </div>

            <div className='flex gap-8'>
                <div className='mt-8 flex flex-1 flex-col gap-8 items-start'>
                    <div className='flex-1 flex flex-col w-full max-w-full bg-white p-6 rounded-3xl'>
                        <div className='text-sm'>
                            نظرات کاربران
                        </div>

                        {
                            data?.data?.comments?.length === 0 ?
                                <div className='flex justify-center items-center h-full mt-7'>
                                    <div className='text-description text-sm'>
                                        هیچ نظری ثبت نشده است
                                    </div>
                                </div>
                                :
                                data?.data?.comments?.map((comment) => {
                                    return (
                                        <div key={comment.id} className='mt-5 border border-[#EAEDF5] rounded-3xl p-6'>
                                            <div className='flex gap-2 items-center'>
                                                <Image alt='avatar' width={24} height={24} src={comment.user?.profilePic || '/images/default-avatar.png'} className='size-6 rounded-full object-cover' />
                                                <div className='text-description text-xs'>
                                                    {comment.user?.firstName + ' ' + comment.user?.lastName}
                                                </div>
                                            </div>

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

                                            <div className='mt-4 text-[11px] leading-6'>
                                                {comment.content}
                                            </div>
                                        </div>
                                    )
                                })
                        }
                    </div>

                    <CreateReview id={data?.data?.blog?.id} refetch={refetch} />
                </div>

                <div className='xl:w-[261px] hidden xl:block'></div>
            </div>
        </div>
    )
}

export default SingleBlogPage