"use client"

import React from 'react'
import { SearchSVG } from '@/assets/svg'
import { P } from '@/components/ui/typography'
import { Input } from '@/components/ui/input'
import { useLocale, useTranslations } from 'next-intl'
import { useRouter, useSearchParams } from 'next/navigation'

const GlossaireSearch = () => {
    const t = useTranslations()
    const locale = useLocale()
    const searchParams = useSearchParams()
    const router = useRouter()
    
    const search = searchParams.get('search')
    const innovation = searchParams.get('innovation')

    const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
        const params = new URLSearchParams(searchParams.toString())
        
        if (event.target.value) {
            params.set("search", event.target.value)
        } else {
            params.delete("search")
        }
        
        const basePath = locale === 'en' ? '/en/glossary' : '/glossaire'
        router.replace(`${basePath}?${params.toString()}`, { scroll: false })
    }

    const handleInnovation = (event: React.ChangeEvent<HTMLInputElement>) => {
        const params = new URLSearchParams(searchParams.toString())
        
        if (event.target.checked) {
            params.set("innovation", "true")
        } else {
            params.delete("innovation")
        }
        
        const basePath = locale === 'en' ? '/en/glossary' : '/glossaire'
        router.replace(`${basePath}?${params.toString()}`, { scroll: false })
    }

    return (
        <div className='bg-white rounded-[12px] border-[1px] border-[#E2E8F0]'>
            <div className='flex items-center gap-2 py-[16px] px-[24px]'>
                <div>
                    <SearchSVG />
                </div>
                <P className='text-[18px] font-[600] text-[#27272A] mt-[2px]'>{t("Search")}</P>
            </div>
            <div className='w-full h-[1px] bg-[#E2E8F0]' />
            <div className='pt-[16px] pb-[24px] px-[24px]'>
                <Input 
                    value={search || ""} 
                    placeholder={`${t("Search for a term")}...`} 
                    className='h-[48px]' 
                    onChange={handleSearch} 
                />
                <div className='mt-5 flex items-center gap-2'>
                    <Input 
                        checked={innovation ? true : false} 
                        type='checkbox' 
                        className='w-[18px] h-[18px]' 
                        onChange={handleInnovation} 
                    />
                    <P className='!text-[16px] !font-[400] text-[#27272A]'>{t("Innovation only")}</P>
                </div>
            </div>
        </div>
    )
}

export default GlossaireSearch