import React, { useEffect, useState } from 'react'
import { __, sprintf } from '@wordpress/i18n'
import ChannelInterface from 'Interfaces/ChannelInterface'

export interface ChannelDropdownComponentProps {
    channels: ChannelInterface[]
    isOpen: boolean
    appliedIds: string[]
    onToggle: () => void
    onApply: (ids: string[]) => void
}

const SearchGlyph = () => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
        <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.525Z"
            fill="#A8A8A8"
        />
    </svg>
)

const ChannelDropdownComponent = ({ channels, isOpen, appliedIds, onToggle, onApply }: ChannelDropdownComponentProps) => {
    const [filterText, setFilterText] = useState('')
    const [pending, setPending] = useState<string[]>(appliedIds)

    const prevOpen = React.useRef(false)
    useEffect(() => {
        if (isOpen && !prevOpen.current) {
            setPending([...appliedIds])
            setFilterText('')
        }
        prevOpen.current = isOpen
    }, [isOpen, appliedIds])

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

    const toggleChannel = (value: string) => {
        if (value === 'all') {
            setPending(pending.length === channels.length ? [] : channels.map((c) => c.id))
            return
        }
        setPending(
            pending.includes(value) ? pending.filter((id) => id !== value) : [...pending, value]
        )
    }

    const selectedCount = pending.length
    const countLabel =
        selectedCount === 0
            ? __('No channels selected', 'textdomain')
            : sprintf(
                  /* translators: %d: number of channels */
                  __('%d Channel Selected', 'textdomain'),
                  selectedCount
              )

    if (channels.length === 0) {
        return null
    }

    return (
        <>
            <button
                className={`btn btn-icon drop-down hidden-on-focus owner-btn${isOpen ? ' is-active' : ''}`}
                id="ownerBtn"
                title={__('Select Channels', 'textdomain')}
                type="button"
                onClick={onToggle}
                aria-expanded={isOpen}
            >
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
                    <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"
                        fill="#606060"
                    />
                </svg>
            </button>

            {isOpen && (
                <div className="channel-panel drop-down-wrapper channel-wrapper" id="channelsWrapper">
                    <div className="dropdown-panel__stack">
                        <div className="dropdown-panel__intro">
                            <h6>{__('Show Channel in Results', 'textdomain')}</h6>
                            <p>{__('Choose the Channels you would like to see in your search results.', 'textdomain')}</p>
                            <p className="dropdown-panel__selection-summary">{countLabel}</p>
                        </div>
                        <div className="dropdown-panel__list-card">
                            <div className="dropdown-panel__filter-row">
                                <input
                                    type="text"
                                    className="dropdown-panel__filter-input"
                                    placeholder={__('Find channel', 'textdomain')}
                                    value={filterText}
                                    onChange={(e) => setFilterText(e.target.value)}
                                    aria-label={__('Find channel', 'textdomain')}
                                />
                                <span className="dropdown-panel__filter-icon" aria-hidden>
                                    <SearchGlyph />
                                </span>
                            </div>
                            <div className="dropdown-panel__divider" />
                            <div className="dropdown-panel__scroll">
                                <label className="dropdown-panel__row">
                                    <input
                                        type="checkbox"
                                        className="dropdown-panel__checkbox"
                                        checked={pending.length === channels.length && channels.length > 0}
                                        onChange={() => toggleChannel('all')}
                                    />
                                    <span className="dropdown-panel__row-label">{__('Select All', 'textdomain')}</span>
                                </label>
                                {filteredChannels.map((channel) => (
                                    <label key={channel.id} className="dropdown-panel__row dropdown-panel__row--indented">
                                        <input
                                            type="checkbox"
                                            className="dropdown-panel__checkbox"
                                            value={channel.id}
                                            checked={pending.includes(channel.id)}
                                            onChange={() => toggleChannel(channel.id)}
                                        />
                                        <span className="dropdown-panel__row-label">{channel.screenname}</span>
                                    </label>
                                ))}
                            </div>
                        </div>
                        <button
                            type="button"
                            className="dropdown-panel__apply"
                            onClick={() => onApply(pending)}
                        >
                            {__('Apply', 'textdomain')}
                        </button>
                    </div>
                </div>
            )}
        </>
    )
}

export default ChannelDropdownComponent