import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import BannerImage from '../../assets/images/banner.png'
import Input from '../../components/Input'
import { useGetLearnings } from './hooks/useLearningData'
import PageLoading from '../../components/PageLoading'
import { LearningItemType } from './types/LearningTypes'
import moment from 'moment-jalaali'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { Helmet } from 'react-helmet-async'

const LearningList: FC = () => {

    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const getLearnings = useGetLearnings(search)

    return (
        <div className='w-full flex gap-6 mt-4'>
            <Helmet>
                <title>
                    داناک | آموزش
                </title>
            </Helmet>
            <div className='flex-1'>
                <div>
                    {t('learning.learning')}
                </div>

                <div className='xl:mt-8 mt-4 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>

                {
                    getLearnings.isPending ?
                        <div className='mt-5'>
                            <PageLoading />
                        </div>
                        :
                        <div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
                            {
                                getLearnings.data?.data?.learnings?.map((item: LearningItemType) => {
                                    return (
                                        <Link to={Pages.learning.detail + item.id} className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
                                            <img src={item.coverUrl} className='w-full rounded-[20px]' />
                                            <div className='mt-4'>
                                                {item.title}
                                            </div>
                                            <div className='flex gap-1 text-xs text-description mt-2'>
                                                <div>{item.category.name} ,</div>
                                                <div>{item.videoDuration} دقیقه</div>
                                            </div>

                                            <div className='mt-3 text-xs text-description'>
                                                {moment(item.createdAt).format('jYYYY/jMM/jDD')}
                                            </div>
                                        </Link>
                                    )
                                })
                            }


                            <div className='min-w-[30%] flex-1 px-4'></div>
                            <div className='min-w-[30%] flex-1 px-4'></div>
                        </div>
                }
                <div className='h-14 xl:hidden'></div>
            </div>

            <div className='bg-white w-sidebar hidden xl:block h-fit rounded-3xl overflow-hidden relative'>
                <img
                    src={BannerImage}
                    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'>
                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                    </div>
                </div>
            </div>

        </div>
    )
}

export default LearningList