import styles from "./Filter.module.css";
import Button from "../ui/button/button";
import React from "react";

type FiltersType = {
    alphabetical: "asc" | "desc" | null;
    yearOrder: "asc" | "desc" | null;
    [key: string]: any;
};

type FilterProps = {
    isFilterVisible: boolean;
    filters: FiltersType;
    setFilters: React.Dispatch<React.SetStateAction<FiltersType>>;
};

function Filter({ isFilterVisible, filters, setFilters }: FilterProps): any {

    const setAlphabeticalOrder = (order: "asc" | "desc"): void => {
        setFilters((prev) => ({
            ...prev,
            alphabetical: prev.alphabetical === order ? null : order
        }));
    };

    const setYearOrder = (order: "asc" | "desc"): void => {
        setFilters((prev) => ({
            ...prev,
            yearOrder: prev.yearOrder === order ? null : order
        }));
    };

    return (
        <div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
            <abbr title="Tri alphabétique croissant (A à Z)">
                <Button
                    className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
                    variant={"default"}
                    onClick={() => setAlphabeticalOrder("asc")}
                >
                    <img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)" />
                </Button>
            </abbr>

            <abbr title="Tri alphabétique décroissant (Z à A)">
                <Button
                    className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
                    variant={"default"}
                    onClick={() => setAlphabeticalOrder("desc")}
                >
                    <img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)" />
                </Button>
            </abbr>

            <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
                <Button
                    className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
                    variant={"default"}
                    onClick={() => setYearOrder("desc")}
                >
                    <img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)" />
                </Button>
            </abbr>

            <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
                <Button
                    className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
                    variant={"default"}
                    onClick={() => setYearOrder("asc")}
                >
                    <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)" />
                </Button>
            </abbr>
        </div>
    );
}

export default Filter;
