import Dropdown from 'react-bootstrap/Dropdown'
import { useState } from 'react';

const Sorting = ({onChange}) => {

    const [currentSort, setSort] = useState("...");

    return (
        <>
            <Dropdown className='sorting-dropdown'>
                <Dropdown.Toggle id="dropdown-sort">
                    {currentSort}
                </Dropdown.Toggle>

                <Dropdown.Menu className='sorting-menu'>
                    <Dropdown.Item key="0" onClick={() => {
                        setSort("Prix ascendants"); // Mets le nom afficher quand le dropdown est fermé
                        onChange("Price"); // Trigger le handler pour trier
                    }}>
                        Prix ascendants {/*Le nom de l'option*/}
                    </Dropdown.Item>
                    <Dropdown.Item  key="1" onClick={() => {
                        setSort(" Prix déscendants");
                        onChange("PriceDesc");
                    }}>
                        Prix déscendants
                    </Dropdown.Item>
                    <Dropdown.Item  key="2" onClick={() => {
                        setSort("Titre a -> z");
                        onChange("Title");
                    }}>
                        Titre a -{'>'} z
                    </Dropdown.Item>
                    <Dropdown.Item key="3" onClick={() => {
                        setSort("Titre z -> a");
                        onChange("TitleDesc");
                    }}>
                        Titre z -{'>'} a
                    </Dropdown.Item>
                    <Dropdown.Item key="4" onClick={() => {
                        setSort("Catégorie a -> z");
                        onChange("Category");
                    }}>
                        Catégorie a -{'>'} z
                    </Dropdown.Item>
                    <Dropdown.Item key="5" onClick={() => {
                        setSort("Catégorie z -> a");
                        onChange("CategoryDesc");
                    }}>
                        Catégorie z -{'>'} a
                    </Dropdown.Item>
                    <Dropdown.Item key="6" onClick={() => {
                        setSort("...");
                        onChange("");
                    }}>
                        ...
                    </Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
        </>
    );
}

export default Sorting;