import { useState } from 'react';

export default function SortButton({ setSort }){
    let [open, setOpen] = useState(false);

    function toggleOpen(){
        if(!open){
            document.getElementById('sort_dropdown').classList.remove('scale-0');
            document.getElementById('sort_dropdown').classList.add('scale-100');
            document.getElementById('sort_dropdown').classList.remove('opacity-0');
            document.getElementById('sort_dropdown').classList.add('opacity-100');
            setOpen(true);
        }
        else {
            document.getElementById('sort_dropdown').classList.remove('scale-100');
            document.getElementById('sort_dropdown').classList.add('scale-0');
            document.getElementById('sort_dropdown').classList.remove('opacity-100');
            document.getElementById('sort_dropdown').classList.add('opacity-0');
            setOpen(false);
        }
    }
    return (
        <div className="relative">
            <button id="sort_button" onClick={ toggleOpen } className="transition duration-300 ease-in-out flex w-fit px-2 py-1 pb-0.5 text-sm text-white bg-gradient-to-tr from-rose-900 to-orange-700 rounded-lg">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-4 h-4">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
                </svg>
                <span className="pr-1 text-sm">مرتب سازی</span>
            </button>
            <div id="sort_dropdown" onClick={e => toggleOpen()} className="mt-1 flex flex-col text-sm items-center absolute bg-white border w-full rounded-xl origin-top scale-0 opacity-0 duration-600 transition ease-in-out translate">
            <button onClick={ e => setSort('default') } className="border-b py-1 pt-2 border-gray-300 w-full">پیشفرض </button>
            <button onClick={ e => setSort('price') } className="border-b py-1 pt-2 border-gray-300 w-full">قیمت </button>
            <button onClick={ e => setSort('popularity') } className="py-2 w-full">محبوبیت </button>
            </div>
        </div>
    )
}