import { FC } from 'react'
import { useParams } from 'react-router-dom'
import { useGetLearningDetail } from './hooks/useLearningData'
import PageLoading from '../../components/PageLoading'
import DanakLearning from '../home/components/DanakLearning'
import { Calendar2, Clock, Element3 } from 'iconsax-react'
import moment from 'moment-jalaali'
import { Helmet } from 'react-helmet-async'

const LearningDetail: FC = () => {

    const { id } = useParams()
    const getLearningDetail = useGetLearningDetail(id ? id : '')

    return (
        <div className='mt-4'>
            <Helmet>
                <title>
                    داناک | آموزش
                </title>
            </Helmet>
            {
                getLearningDetail.isPending ?
                    <PageLoading />
                    :
                    <div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
                        <div className='flex-1'>


                            <div className='bg-white p-8 rounded-3xl'>
                                <video className='w-full rounded-3xl' controls>
                                    <source src={getLearningDetail.data?.data?.learning?.videoUrl} />
                                </video>

                                <div className='mt-7 flex xl:flex-row flex-col gap-4 justify-between'>
                                    <div className='xl:text-lg'>
                                        {getLearningDetail.data?.data?.learning?.title}
                                    </div>

                                    <div className='flex xl:flex-row flex-col xl:max-h-5 gap-3 text-description text-xs'>

                                        <div className='flex gap-2 items-center'>
                                            <Clock
                                                size={18}
                                                color={'#888888'}
                                            />
                                            <div>
                                                {getLearningDetail.data?.data?.learning?.videoDuration + ' دقیقه'}
                                            </div>
                                        </div>

                                        <div className='flex gap-2 items-center xl:border-r xl:pr-3 border-description'>
                                            <Element3
                                                size={18}
                                                color={'#888888'}
                                            />
                                            <div>
                                                {getLearningDetail.data?.data?.learning?.category?.name}
                                            </div>
                                        </div>

                                        <div className='flex gap-2 items-center xl:border-r xl:pr-3 border-description'>
                                            <Calendar2
                                                size={18}
                                                color={'#888888'}
                                            />
                                            <div>
                                                {moment(getLearningDetail.data?.data?.learning?.createdAt).format('jYYYY-jMM-jDD')}
                                            </div>
                                        </div>

                                    </div>


                                </div>
                                <div className='mt-6 text-description'>
                                    {getLearningDetail.data?.data?.learning.description}
                                </div>

                            </div>
                        </div>
                        <DanakLearning />
                    </div>
            }
        </div>
    )
}

export default LearningDetail