import { Building, InfoCircle } from 'iconsax-react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { buildPath, clx } from '../../helpers/utils'
import StatusWithText from '../../components/StatusWithText'
import TitleSeeAll from '../../components/TitleSeeAll'
import { useGetCompanies, useGetIndustry } from './hooks/useHomeData'
import { CompanyItemType, IndustryItemType } from './types/HomeTypes'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
const Home: FC = () => {

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

    return (
        <div className='mt-4'>
            <div className='w-full h-10 flex gap-2 items-center px-4 rounded-xl bg-[#FCE7CE] text-[#FF7B00]'>
                <InfoCircle
                    size={24}
                    color='#FF7B00'
                />
                <div className='text-xs'>
                    درخواست شما برای ثبت شرکت، هنوز تایید نشده است
                </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')}
                    link='/'
                />
            </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