import { Building, CloseCircle, InfoCircle, TickCircle } from 'iconsax-react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation as SwiperNavigation } from 'swiper/modules';
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { buildPath, clx } from '../../helpers/utils'
import TitleSeeAll from '../../components/TitleSeeAll'
import { useGetCompanies, useGetIndustry, useGetCompanyRequest, useGetSliders } from './hooks/useHomeData'
import { CompanyItemType, IndustryItemType, SliderItemType } from './types/HomeTypes'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { CompanyRequestStatus } from './enum/Enum'
import { Button } from '@headlessui/react';

const Home: FC = () => {

    const { t } = useTranslation('global')
    const [activeIndustry, setActiveIndustry] = useState<string>('')
    const { data: industry } = useGetIndustry()
    const { data: companies } = useGetCompanies(activeIndustry)
    const { data: companyRequest } = useGetCompanyRequest()
    const { data: sliders } = useGetSliders()

    return (
        <div className='mt-4'>

            <Swiper navigation={true} modules={[SwiperNavigation]} className="mySwiper">
                {
                    sliders?.data?.sliders?.map((item: SliderItemType) => {
                        return (
                            <SwiperSlide
                                key={item.id}>
                                <div className='relative rounded-3xl'>
                                    <img
                                        src={item.imageUrl}
                                        alt='banner'
                                        width={1920}
                                        height={1080}
                                        className='w-full rounded-3xl object-cover min-h-[210px] max-h-[500px]'
                                    />

                                    <div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-3xl'>
                                        <div className='max-w-maxWidth flex flex-col mt-1 xl:mt-0 xl:items-start items-center w-full mx-auto px-10 xl:text-4xl text-lg text-white'>
                                            <p className='xl:text-lg text-sm'>{item.title}</p>
                                            <p className='xl:mt-5 mt-2 xl:text-2xl text-sm font-bold'>{item.description}</p>

                                            <Link to={item.link}>
                                                <Button
                                                    className='xl:mt-5 mt-2 !w-fit xl:px-10 px-5 h-8 rounded-full text-sm xl:h-10 bg-white !text-black'
                                                >
                                                    بیشتر بدانید
                                                </Button>
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            </SwiperSlide>
                        )
                    })
                }
            </Swiper>

            {
                companyRequest?.data?.requests &&
                <div className={clx(
                    'w-full h-10 flex gap-2 items-center px-4 rounded-xl ',
                    companyRequest?.data?.requests?.requestStatus === CompanyRequestStatus.PENDING ? 'bg-[#FCE7CE] text-[#FF7B00]'
                        : companyRequest?.data?.requests?.requestStatus === CompanyRequestStatus.APPROVED ? 'bg-[#E6FFF4] text-[#039855]'
                            : 'bg-[#FFE6E6] text-[#FF0000]'
                )}>
                    {
                        companyRequest?.data?.requests?.requestStatus === CompanyRequestStatus.PENDING ?
                            <InfoCircle
                                size={22}
                                color='#FF7B00'
                            />
                            : companyRequest?.data?.requests?.requestStatus === CompanyRequestStatus.APPROVED ?
                                <TickCircle
                                    size={22}
                                    color='#039855'
                                />
                                : companyRequest?.data?.requests?.requestStatus === CompanyRequestStatus.REJECTED ?
                                    <CloseCircle
                                        size={22}
                                        color='#FF0000'
                                    />
                                    : null
                    }
                    <div className="text-xs">
                        {companyRequest?.data?.requests?.requestStatus === CompanyRequestStatus.PENDING
                            ? t('home.request_pending')
                            : companyRequest?.data?.requests?.requestStatus === CompanyRequestStatus.APPROVED
                                ? t('home.request_approved')
                                : t('home.request_rejected')}
                    </div>
                </div>
            }

            {/* <div className='mt-6'>
                <TitleSeeAll
                    title={t('home.last_announcement')}
                    link='/'
                />
            </div> */}


            {/* <div className='mt-4'>
                <div className={clx(
                    'p-4 rounded-2xl',
                    'bg-[#F8F9FB]'
                )}>
                    <div className='flex justify-between'>
                        <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        </div>

                        <div className='flex gap-1'>
                            <StatusWithText
                                variant='error'
                                text={t('announcement.important')}
                            />
                            <StatusWithText
                                variant='success'
                                text={t('announcement.new')}
                            />
                        </div>
                    </div>

                    <div className='m-2 flex justify-between items-center text-[11px]'>
                        <div className='max-w-[70%] truncate text-description'>
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        </div>
                        <div className='text-description'>
                            ۱۴۰۳/۰۹/۲۴
                        </div>
                    </div>
                </div>
            </div> */}

            <div className='mt-6'>
                <TitleSeeAll
                    title={t('home.companies')}
                />
            </div>

            <div className='flex gap-2 mt-4 overflowX'>
                <div className={clx(
                    'h-9 bg-white rounded-full px-5 flex gap-2 items-center cursor-pointer',
                    activeIndustry === '' ? 'bg-opacity-100' : 'bg-opacity-50'
                )} onClick={() => setActiveIndustry('')}>
                    <Building
                        size={20}
                        color='black'
                    />
                    <div className='text-sm'>
                        همه
                    </div>
                </div>
                {
                    industry?.data?.industries?.map((item: IndustryItemType) => {
                        return (
                            <div key={item.id} className={clx(
                                'h-9 bg-white rounded-full px-5 flex gap-2 items-center cursor-pointer',
                                activeIndustry === item.id ? 'bg-opacity-100' : 'bg-opacity-50'
                            )} onClick={() => setActiveIndustry(item.id)}>
                                <img src={item.iconUrl} alt={item.title} className='size-5' />
                                <div className='text-sm'>
                                    {item.title}
                                </div>
                            </div>
                        )
                    })
                }
            </div>

            <div className='mt-6 flex gap-4 flex-wrap'>
                {
                    companies?.data?.companies?.map((item: CompanyItemType) => {
                        return (
                            <Link to={buildPath(Pages.company.detail + item.id)} key={item.id} className='flex-1 gap-2.5 bg-white min-w-[40%] h-20 flex items-center p-2 rounded-xl'>
                                <div className='size-[64px] rounded-xl overflow-hidden'>
                                    <img src={item.profileImageUrl} alt={item.name} className='size-full object-cover' />
                                </div>
                                <div className='text-xs'>
                                    <div>
                                        {item.name}
                                    </div>
                                    <div className='text-description mt-2'>
                                        {item.address}
                                    </div>
                                </div>
                            </Link>
                        )
                    })
                }
            </div>

        </div>
    )
}

export default Home