import {useEffect, useState} from "react";
import close from "../../../assets/images/x.png";
import open from "../../../assets/images/right-arrow-white.svg";

type CategoryProps = {
	options: { [key: string]: string };
	currentCategory: string;
	setCategory: (s: string) => void;
};
const FilterSelect = ({
	setCategory,
	currentCategory,
	options,
}: CategoryProps) => {
	const [isOpen, setIsOpen] = useState(false);
	useEffect(() => {
		window.addEventListener("click", () => {
			if (isOpen) {
				setIsOpen(false);
			}
		});
	}, [isOpen]);

	return (
		<div className={"select-category"}>
			<div
				className={`select-header `}
				onClick={(e) => {
					e.stopPropagation();
					setIsOpen(true);
				}}
			>
				{currentCategory === "" ? (
					<>
						<span>ΕΠΙΛΟΓΗ ΚΑΤΗΓΟΡΙΑΣ</span>
						<span className={isOpen.toString()}>
							<img
								alt="arrow"
								src={open}
								className={"open "}
								onClick={(e) => {
									e.stopPropagation();
									setIsOpen(true);
								}}
							/>
						</span>
					</>
				) : (
					<>
						<span>{options[currentCategory]}</span>
						<img
							alt="close"
							src={close}
							className={"close"}
							onClick={(e) => {
								e.stopPropagation();
								setIsOpen(false);
								setCategory("");
							}}
						/>
					</>
				)}
			</div>
			{isOpen && (
				<ul className="options">
					{Object.entries(options).map(([id, categoryName]) => {
						if (categoryName === "Uncategorized") return null;
						return (
							<li key={categoryName}
								onClick={() => {
									setIsOpen(false);
									setCategory(id);
								}}
							>
								{categoryName}
							</li>
						);
					})}
				</ul>
			)}
		</div>
	);
};
export default FilterSelect;