import React from 'react'
import { __ } from '@wordpress/i18n'

const SORT_OPTIONS = [
    { value: 'recent', label: __('Recent', 'textdomain') },
    { value: 'relevance', label: __('Relevance', 'textdomain') },
    { value: 'random', label: __('Random', 'textdomain') },
] as const

export interface SortDropdownComponentProps {
    selected: string
    isOpen: boolean
    onToggle: () => void
    onSelect: (value: string) => void
}

const SortIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
        <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>
)

const SortDropdownComponent = ({ selected, isOpen, onToggle, onSelect }: SortDropdownComponentProps) => {
    const effective = selected || 'recent'

    return (
        <>
            <button
                className={`btn drop-down sort-btn ${isOpen ? ' is-active' : ''}`}
                id="sortBtn"
                title={__('Sort', 'textdomain')}
                type="button"
                onClick={onToggle}
                aria-expanded={isOpen}
                aria-haspopup="listbox"
            >
                <SortIcon />
            </button>

            {isOpen && (
                <div className="sort-panel drop-down-wrapper" id="sortWrapper" role="listbox" aria-label={__('Sort by', 'textdomain')}>
                    <div className="sort-panel__header">
                        <span className="sort-panel__title">{__('Sort By', 'textdomain')}</span>
                        <span className="sort-panel__icon" aria-hidden>
                            <SortIcon />
                        </span>
                    </div>
                    <div className="sort-panel__divider" />
                    {SORT_OPTIONS.map((opt) => {
                        const isSel = effective === opt.value
                        return (
                            <button
                                key={opt.value}
                                type="button"
                                role="option"
                                aria-selected={isSel}
                                className={`sort-panel__option${isSel ? ' is-selected' : ''}`}
                                onClick={() => onSelect(opt.value)}
                            >
                                {opt.label}
                            </button>
                        )
                    })}
                </div>
            )}
        </>
    )
}

export default SortDropdownComponent