import styles from "./Filter.module.css";

function Filter({isFilterVisible, filters, setFilters}){
    const setAlphabeticalOrder = (order) => {
        setFilters(prev => ({
            ...prev,
            alphabetical : prev.alphabetical === order ? null : order
        }));
    };

    const setYearOrder = (order) => {
        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}`}
                        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}`}
                        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}`}
                        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}`}
                        onClick={() => setYearOrder("asc")}>
                    <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
                </button>
            </abbr>
        </div>
    )
}

export default Filter;