'use client'

import Input from '@/Components/Inputs/Input'
import React, { type ReactElement, useRef, useEffect } from 'react'
import { randomWords } from '@/utils/randomArray'
import { Cross2Icon } from '@radix-ui/react-icons'




const AutoCompleteTest = (): ReactElement => {
    const [showDropdown, setShowDropdown] = React.useState<boolean>(false)
    const [search, setSearch] = React.useState<string | undefined>(undefined)
    const [selectedValues, setSelectedValues] = React.useState<string[]>([])
    const results = search !== undefined && search.length > 0
        ? randomWords.filter(word => word.toLowerCase().includes(search.toLowerCase()))
        : randomWords.slice(0)
    const resultsToShow = search !== undefined && search.length > 0
        ? results
        : results.slice(0, 10)
    const containerRef = useRef<HTMLDivElement | null>(null)
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent): void => {
            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
                setShowDropdown(false)
            }
        }

        document.addEventListener('mousedown', handleClickOutside)
        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [containerRef])
    return (
        <div className='p-20 flex flex-col gap-4'>
            <div className='flex flex-wrap py-2 gap-2 h-12'>
                <p><strong>{results.length} results</strong></p>
                {selectedValues.map((value, index) => (
                    <div
                        key={index}
                        className='bg-blue-500 text-white rounded-full px-3 py-1 mr-2 flex items-center'
                    >
                        <span>{value}</span>

                        <button
                            className='ml-2 focus:outline-none'
                            onClick={() => {
                                setSelectedValues(selectedValues.filter((_, i) => i !== index))
                            }}
                        >
                            <Cross2Icon className='cursor-pointer' />
                        </button>
                    </div>
                ))}

            </div>
            <div
                className='relative'
                ref={containerRef}
                onFocus={() => {
                    setShowDropdown(true)
                }}
                onBlur={() => {
                    // setShowDropdown(false)
                }}
            >

                <Input
                    id='search'
                    testId='search'
                    placeholder='Type to search...'
                    value={search}
                    onChange={(v) => {
                        setSearch(v)
                    }}
                />

                {
                    showDropdown
                        ? <div
                            className='bg-white shadow-lg absolute left-0 right-0 max-h-50 overflow-y-auto'>
                            {
                                resultsToShow.map((word, index) => (
                                    <div
                                        key={index}
                                        className={`p-2  cursor-pointer${selectedValues.includes(word) ? ' bg-slate-600 hover:bg-slate-500 text-white' : ' hover:bg-slate-200'}`}
                                        onMouseDown={() => {
                                            if (selectedValues.includes(word)) {
                                                setSelectedValues(selectedValues.filter(v => v !== word))
                                                return
                                            }
                                            setSelectedValues([...selectedValues, word])
                                        }}
                                    >
                                        {word}
                                    </div>
                                ))
                            }
                        </div>
                        : ''
                }

            </div>
            <p>I am below</p>
        </div>
    )
}


export default AutoCompleteTest