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


type MessageFilterProps = {
    currentTag: string;
    tagList: MessageTag[];
    setTag: (s: string) => void;
};

const MessagesFilters = ({currentTag, tagList, setTag}: MessageFilterProps) => {
	
	//pagination & filtering
    const [isOpen, setIsOpen] = useState(false);
    useEffect(() => {
		window.addEventListener("click", () => {
			if (isOpen) {
				setIsOpen(false);
			}
		});
	}, [isOpen]);

    return (
		<div className={"select-tag"}>
			<div
				className={`select-header `}
				onClick={(e) => {
					e.stopPropagation();
					setIsOpen(true);
				}}
			>
				{currentTag === "" ? (
					<>
						<span>ΕΠΙΛΟΓΗ ΚΑΤΗΓΟΡΙΑΣ</span>
						<span className={isOpen.toString()}>
							<img
								alt="arrow"
								src={open}
								className={"open "}
								onClick={(e) => {
									e.stopPropagation();
									setIsOpen(true);
								}}
							/>
						</span>
					</>
				) : (
					<>
						<span>{currentTag}</span>
						<img
							alt="close"
							src={close}
							className={"close"}
							onClick={(e) => {
								e.stopPropagation();
								setIsOpen(false);
								setTag("");
							}}
						/>
					</>
				)}
			</div>
			{isOpen && (
				<ul className="options">
					{
						tagList.length === 0 
						? <div className="without-tags"> No Tags </div>
						: 
						tagList.map((tag, index) => {
							return (
								<li key={index}
									onClick={() => {
										setIsOpen(false);
										setTag(tag.name);
									}}
								>
									{tag.name}
								</li>
							);
						})
					}
				</ul>
			)}
		</div>
	);
};

export default MessagesFilters;