import React from 'react'
import {__} from "@wordpress/i18n"
import {useEffect, useState} from "@wordpress/element"
import {useForm, useWatch} from "react-hook-form"
import {languages} from "countries-list"
import {fetchApi} from "../../Libs/ApiCall"
import ChannelInterface from "Interfaces/ChannelInterface"

interface SearchFormProps {
    onSearching?: (formData) => void
    feedbackController?: (type: string, message: string) => void
    channels: ChannelInterface[]
}

const LanguageList = ({
                          languages,
                          selectedOption,
                          onOptionChange,
                      }: {
    languages: Record<string, { name: string; native: string }>;
    selectedOption: string;
    onOptionChange: (value: string) => void;
}) => {
    // Handle change event
    const handleLanguageOptions = (event: React.ChangeEvent<HTMLInputElement>) => {
        onOptionChange(event.target.value)
    };

    return (
        <div className="language-wrapper drop-down-wrapper" id="languagesWrapper">
            <h6>Sort By Language</h6>
            {Object.keys(languages).map((code) => (
                <div className="option-wrapper" key={code}>
                    <input type="radio" name="language" value={code} id={`${code}Language`}
                           checked={selectedOption === code}
                           onChange={handleLanguageOptions}/>
                    <label htmlFor={`${code}Sort`}>{languages[code].name}</label>
                </div>
            ))}
        </div>
    )
}

const ChannelList = ({onOptionChange, selectedOptions, channels}: {
    onOptionChange: (value: string[]) => void
    selectedOptions: string[]
    channels: ChannelInterface[]
}) => {
    const [filterText, setFilterText] = useState('')

    const handleChannelOptions = (event: React.ChangeEvent<HTMLInputElement>) => {
        const value = event.target.value
        let newSelectedOptions: string[]

        if (value === 'all') {
            // If "Select All" is clicked, toggle between all channels and none
            newSelectedOptions = selectedOptions.length === channels.length ? [] : channels.map(channel => channel.id);
        } else {
            // For individual channels, toggle their selection
            newSelectedOptions = selectedOptions.indexOf(value) !== -1
                ? selectedOptions.filter(id => id !== value)
                : [...selectedOptions, value];        }

        onOptionChange(newSelectedOptions)
    }

    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setFilterText(event.target.value.toLowerCase())
    }

    const clearFilter = () => {
        setFilterText('')
    }

    const filteredChannels = channels.filter(channel => channel.screenname.toLowerCase().includes(filterText))

    return (
        <div className="channel-wrapper drop-down-wrapper" id="channelsWrapper">
            <h6>Show Channel in Results</h6>
            <p>Choose the Channels you would like to see in your search results.</p>

            <div className="input-wrapper">
                <input type="text" placeholder="Find channel" name="find_channel" className="input-form__finder" onChange={handleFilterChange} value={filterText} />
                {filterText && (
                    <button
                        type="button"
                        className="btn clear-button"
                        onClick={clearFilter}
                        aria-label="Clear filter"
                    >
                        ×
                    </button>
                )}
            </div>
            <div className="options-wrapper">
                <div className="option-wrapper">
                    <input
                    type="checkbox"
                    name="channel"
                    value="all"
                    id={`AllChannel`}
                    checked={selectedOptions.length === channels.length}
                    onChange={handleChannelOptions}
                />
                    <label htmlFor={`AllChannel`}>Select All</label>
                </div>
            {filteredChannels.map((channel) => (
                <div className="option-wrapper sub-options" key={channel.id}>
                    <input
                        type="checkbox"
                        name="channel"
                        value={channel.id}
                        id={`${channel.id}Channel`}
                        checked={selectedOptions.indexOf(channel.id) !== -1}
                        onChange={handleChannelOptions}
                    />
                    <label htmlFor={`${channel.id}Channel`}>{channel.screenname}</label>
                </div>
            ))}
            </div>
        </div>
    );
};

const SearchFormComponent = ({onSearching, feedbackController, channels}: SearchFormProps) => {
    // ...) => {
    const {register, handleSubmit, control, setValue} = useForm()
    const [selected, setSelected] = useState('recent')
    // const [selectedLanguage, setSelectedLanguage] = useState('')
    const [selectedChannels, setSelectedChannels] = useState<string[]>([])
    const [showSort, setShowSort] = useState(false)
    const [showLanguages, setShowLanguages] = useState(false)
    const [showChannels, setShowChannels] = useState(false)
    const [isLoading, setIsLoading] = useState(true);


    const submitForm = formData => {
        onSearching(formData)
    }

    const formValues = useWatch({control})

    useEffect(() => {
        setSelected(formValues.sort)

        if (formValues.channel) {
            // The selected channels are stored as a comma-separated string in the form value
            const channelsConvertToArray = formValues.channel.split(',').map(id => id.trim())
            setSelectedChannels(channelsConvertToArray)
        }
    }, [formValues.sort, formValues.channel])

    useEffect(() => {
        if (channels.length > 0) {
            setSelectedChannels([channels[0].id])
            setIsLoading(false)
        }
    }, [channels])

    useEffect(() => {
        const handleClickOutside = (event) => {
            // Get references to the dropdown buttons and wrappers
            const sortBtn = document.getElementById('sortBtn')
            const ownerBtn = document.getElementById('ownerBtn')
            const sortWrapper = document.getElementById('sortWrapper')
            const channelsWrapper = document.getElementById('channelsWrapper')

            // Check if click is outside the buttons and their dropdowns
            if (
                showSort &&
                sortBtn &&
                sortWrapper &&
                !sortBtn.contains(event.target) &&
                !sortWrapper.contains(event.target)
            ) {
                setShowSort(false)
            }

            if (
                showChannels &&
                ownerBtn &&
                channelsWrapper &&
                !ownerBtn.contains(event.target) &&
                !channelsWrapper.contains(event.target)
            ) {
                setShowChannels(false)
            }
        }

        // Add event listener
        document.addEventListener('mousedown', handleClickOutside)

        // Clean up
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        }
    }, [showSort, showChannels, showLanguages])

    const handleSortOptions = (event) => {
        const newValue = event.target.value;
        setSelected(newValue)
        setValue('sort', newValue)
    }

    // const handleLanguageOption = (value: string) => {
    //     setSelectedLanguage(value)
    // }

    const handleChannelOption = (values: string[]) => {
        setSelectedChannels(values)
        setValue('channel', values.join(','))
    }

    const toggleSort = () => {
        setShowChannels(false)
        setShowLanguages(false)
        setShowSort(!showSort)
    }

    const toggleLanguages = () => {
        setShowSort(false)
        setShowChannels(false)
        setShowLanguages(!showLanguages)
    }

    const toggleChannels = () => {
        setShowSort(false)
        setShowLanguages(false)
        setShowChannels(!showChannels)
    }

    const expandInput = () => {
        const searchWrapper = document.getElementById('searchWrapper');
        if (searchWrapper) {
            searchWrapper.classList.toggle('active');
        }
    }

    return (
        <form className="action-wrapper  sidebar-search__form" id="controlMainWrapper"
              onSubmit={handleSubmit(submitForm)}>
            <div className="input-group--wrapper input-wrapper" id="searchWrapper" role="group">
                <input type="text" id="search" className="input-form search-input" name="search" onFocus={expandInput}
                       placeholder={__("Search Video", "textdomain")} {...register("search")} />
                <button className="btn search-btn" id="searchBtn" title={__("Search", "textdomain")}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                            d="M10.1234 5.77502C9.58344 5.77502 9.14844 6.21002 9.14844 6.75002C9.14844 7.29002 9.58344 7.72502 10.1234 7.72502C11.4434 7.72502 12.5234 8.80502 12.5234 10.125C12.5234 10.665 12.9584 11.1 13.4984 11.1C14.0384 11.1 14.4734 10.665 14.4734 10.125C14.4734 7.72502 12.5234 5.77502 10.1234 5.77502ZM20.5034 16.995L16.7534 13.245C17.2034 12.3 17.4734 11.235 17.4734 10.125C17.4734 6.07502 14.1734 2.77502 10.1234 2.77502C6.07344 2.77502 2.77344 6.07502 2.77344 10.125C2.77344 14.175 6.07344 17.475 10.1234 17.475C11.2484 17.475 12.2984 17.205 13.2434 16.755L16.9934 20.505C17.4584 20.97 18.0884 21.225 18.7484 21.225C19.4084 21.225 20.0234 20.97 20.5034 20.505C20.9684 20.04 21.2234 19.41 21.2234 18.75C21.2234 18.09 20.9684 17.475 20.5034 16.995ZM10.1234 15.525C7.13844 15.525 4.72344 13.11 4.72344 10.125C4.72344 7.14002 7.13844 4.72502 10.1234 4.72502C13.1084 4.72502 15.5234 7.14002 15.5234 10.125C15.5234 13.11 13.1084 15.525 10.1234 15.525ZM19.1234 19.125C18.9284 19.32 18.5834 19.32 18.3884 19.125L14.9234 15.66C15.1934 15.435 15.4334 15.18 15.6584 14.925L19.1234 18.39C19.2284 18.495 19.2734 18.615 19.2734 18.765C19.2734 18.915 19.2134 19.035 19.1234 19.14V19.125Z"
                            fill="white"/>
                    </svg>
                </button>
            </div>
            {/*{!channels[0] && (*/}
            {/*<button className="btn drop-down hidden-on-focus language-btn" id="languageBtn" title={__("Language", "textdomain")} type="button"*/}
            {/*        onClick={toggleLanguages}>*/}
            {/*    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">*/}
            {/*        <path*/}
            {/*            d="M13.73 10.21C14 9.51998 14.15 8.77998 14.15 7.99998C14.15 7.21998 14 6.47998 13.73 5.78998C13.73 5.76998 13.72 5.73998 13.71 5.71998C12.8 3.44998 10.59 1.84998 8.00001 1.84998C5.41001 1.84998 3.20001 3.45998 2.29001 5.71998C2.28001 5.73998 2.27001 5.75998 2.27001 5.78998C2.00001 6.47998 1.85001 7.21998 1.85001 7.99998C1.85001 8.77998 2.00001 9.51998 2.27001 10.21C2.27001 10.23 2.28001 10.26 2.29001 10.28C3.20001 12.55 5.41001 14.15 8.00001 14.15C10.59 14.15 12.8 12.54 13.71 10.28C13.72 10.26 13.73 10.24 13.73 10.21ZM8.00001 12.85C7.74001 12.85 7.23001 12.08 6.92001 10.65H9.08001C8.77001 12.08 8.26001 12.85 8.00001 12.85ZM6.72001 9.34998C6.68001 8.92998 6.65001 8.48998 6.65001 7.99998C6.65001 7.50998 6.68001 7.06998 6.72001 6.64998H9.28001C9.32001 7.06998 9.35001 7.50998 9.35001 7.99998C9.35001 8.48998 9.32001 8.92998 9.28001 9.34998H6.72001ZM3.15001 7.99998C3.15001 7.52998 3.24001 7.07998 3.36001 6.64998H5.41001C5.37001 7.08998 5.35001 7.54998 5.35001 7.99998C5.35001 8.44998 5.37001 8.90998 5.41001 9.34998H3.36001C3.23001 8.91998 3.15001 8.46998 3.15001 7.99998ZM8.00001 3.14998C8.26001 3.14998 8.77001 3.91998 9.08001 5.34998H6.92001C7.23001 3.91998 7.74001 3.14998 8.00001 3.14998ZM10.59 6.64998H12.64C12.77 7.07998 12.85 7.52998 12.85 7.99998C12.85 8.46998 12.76 8.91998 12.64 9.34998H10.59C10.63 8.90998 10.65 8.44998 10.65 7.99998C10.65 7.54998 10.63 7.08998 10.59 6.64998ZM12.05 5.34998H10.41C10.28 4.67998 10.1 4.05998 9.87001 3.52998C10.77 3.90998 11.52 4.54998 12.05 5.34998ZM6.13001 3.52998C5.90001 4.05998 5.72001 4.67998 5.59001 5.34998H3.95001C4.48001 4.54998 5.23001 3.89998 6.13001 3.52998ZM3.95001 10.65H5.59001C5.72001 11.32 5.90001 11.94 6.13001 12.47C5.23001 12.09 4.48001 11.45 3.95001 10.65ZM9.87001 12.47C10.1 11.94 10.28 11.32 10.41 10.65H12.05C11.52 11.45 10.77 12.1 9.87001 12.47Z"*/}
            {/*            fill="#606060"/>*/}
            {/*    </svg>*/}

            {/*</button>*/}
            {/*)}*/}

            {/*{showLanguages && <LanguageList languages={languages} selectedOption={selectedLanguage}*/}
            {/*                                onOptionChange={handleLanguageOption}/>}*/}

            { channels.length > 0 && (
            <button className="btn drop-down hidden-on-focus owner-btn" id="ownerBtn" title={__("Select Channels", "textdomain")}
                    type="button" onClick={toggleChannels}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path
                        d="M12.0016 2.84998H4.00156C3.09156 2.84998 2.35156 3.58998 2.35156 4.49998V11.5C2.35156 12.41 3.09156 13.15 4.00156 13.15H12.0016C12.9116 13.15 13.6516 12.41 13.6516 11.5V4.49998C13.6516 3.58998 12.9116 2.84998 12.0016 2.84998ZM12.3516 11.5C12.3516 11.69 12.1916 11.85 12.0016 11.85H4.00156C3.81156 11.85 3.65156 11.69 3.65156 11.5V4.49998C3.65156 4.30998 3.81156 4.14998 4.00156 4.14998H12.0016C12.1916 4.14998 12.3516 4.30998 12.3516 4.49998V11.5ZM1.00156 4.34998C0.641562 4.34998 0.351562 4.63998 0.351562 4.99998V11C0.351562 11.36 0.641562 11.65 1.00156 11.65C1.36156 11.65 1.65156 11.36 1.65156 11V4.99998C1.65156 4.63998 1.36156 4.34998 1.00156 4.34998ZM15.0016 4.34998C14.6416 4.34998 14.3516 4.63998 14.3516 4.99998V11C14.3516 11.36 14.6416 11.65 15.0016 11.65C15.3616 11.65 15.6516 11.36 15.6516 11V4.99998C15.6516 4.63998 15.3616 4.34998 15.0016 4.34998Z"/>
                </svg>
            </button>
            )}

            {!isLoading && showChannels && channels.length > 0 && <ChannelList selectedOptions={selectedChannels} onOptionChange={handleChannelOption} channels={channels}/>}

            <button className="btn drop-down sort-btn" id="sortBtn" title={__("Sort", "textdomain")} type="button"
                    onClick={toggleSort}>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path
                        d="M7.53906 9.28998L5.39906 11.43V3.49998C5.39906 3.13998 5.10906 2.84998 4.74906 2.84998C4.38906 2.84998 4.09906 3.13998 4.09906 3.49998V11.43L1.95906 9.28998C1.70906 9.03998 1.28906 9.03998 1.03906 9.28998C0.789063 9.53998 0.789063 9.95998 1.03906 10.21L4.28906 13.46C4.41906 13.59 4.57906 13.65 4.74906 13.65C4.91906 13.65 5.07906 13.59 5.20906 13.46L8.45906 10.21C8.70906 9.95998 8.70906 9.53998 8.45906 9.28998C8.20906 9.03998 7.78906 9.03998 7.53906 9.28998ZM14.9591 5.78998L11.7091 2.53998C11.4591 2.28998 11.0391 2.28998 10.7891 2.53998L7.53906 5.78998C7.28906 6.03998 7.28906 6.45998 7.53906 6.70998C7.78906 6.95998 8.20906 6.95998 8.45906 6.70998L10.5991 4.56998V12.5C10.5991 12.86 10.8891 13.15 11.2491 13.15C11.6091 13.15 11.8991 12.86 11.8991 12.5V4.56998L14.0391 6.70998C14.1691 6.83998 14.3291 6.89998 14.4991 6.89998C14.6691 6.89998 14.8291 6.83998 14.9591 6.70998C15.2091 6.45998 15.2091 6.03998 14.9591 5.78998Z"
                        fill="#606060"/>
                </svg>
            </button>

            {showSort && (
                <div className="sort-wrapper drop-down-wrapper" id="sortWrapper">
                    <h6>Short By</h6>
                    <div className="option-wrapper">
                        <input type="radio" name="sort" value="recent" id="recentSort"
                               checked={selected === "recent" || !selected} onChange={handleSortOptions}/>
                        <label htmlFor="recentSort">Recent</label>
                    </div>
                    <div className="option-wrapper">
                        <input type="radio" name="sort" value="relevance" id="relevanceSort"
                               checked={selected === "relevance"} onChange={handleSortOptions}/>
                        <label htmlFor="relevanceSort">Relevance</label>
                    </div>
                    <div className="option-wrapper">
                        <input type="radio" name="sort" value="random" id="randomSort"
                               checked={selected === "random"} onChange={handleSortOptions}/>
                        <label htmlFor="randomSort">Random</label>
                    </div>
                </div>
            )}
            <input type="hidden" id="sort" defaultValue={selected} {...register("sort")}/>
            <input type="hidden" id="channel" defaultValue={selectedChannels} {...register("channel")}/>
            {/*<input type="hidden" id="owners" value={selectedLanguage} {...register("language")} />*/}
            {/*<div className="owner-wrapper" id="ownerWrapper"></div>*/}

            <div className="checkbox-group"><input type="checkbox" id="global" {...register("global", {
                onChange: (e) => {
                    if (e.target.checked) {
                        feedbackController && feedbackController('feedback-success', 'Global Search <strong>Actived</strong>')
                    } else {
                        feedbackController && feedbackController('feedback-success', 'Global Search <strong>Inactived</strong>')
                    }
                }
            })} /><label htmlFor="global" className="checkbox-label">Global
                Search</label></div>
        </form>
    )
}

export default SearchFormComponent