import React, { Component } from 'react';
import '../../css/Components/sort.css'

class Sort extends Component {

    constructor(props){
        super(props)
        this.state = {
            
        }
    }

    render() {
        return (
            <div id="sortBox">
                <div id="sortTxt">
                    Trier par 
                </div>
                <div id="selectAndOrder">
                    <div id="selectBlock">
                        <div id="selectBox">
                            <select id="sortSelect" onChange={this.props.handleChangeSortType}>
                                <option className="optionSort" value="name">Ordre Alphabétique</option>
                                <option className="optionSort" value="category_id">Catégorie</option>
                                <option className="optionSort" value="quantity">Quantité</option>
                                <option className="optionSort" value="price">Prix</option>
                            </select>
                        </div>
                    </div>
                    <p id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
                       {this.props.lowToHigh ? "A-Z" : "Z-A"}   
                    </p>
                </div>
            </div>
        );
    }
}

export default Sort;