import React, { Component, useEffect, useState } from 'react';
import './style.scss';
import Icon from '../../../components/Icon/Icon';
import useToggle from '../../../hooks/Toggle/useToggle';
import { TranslatableText } from '../../../providers/LanguageProvider';

class SearchBar extends Component {
    state = {
        filterDrawerShow: this.props.checkedBrewbarOption
    }
    componentDidMount() {

        if (this.props.checkedBrewbarOption) {
            console.log('filter show')
            this.setState((prevState) => {
                return { filterDrawerShow: true };
            })
        }
    }

    toggleFilterDrawer = () => {
        this.setState((prevState) => {
            return { filterDrawerShow: !prevState.filterDrawerShow };
        })
    }



    render() {
        const { filterDrawerShow } = this.state;
        //const { filterDrawerShow } = (this.props.checkedBrewbarOption === true) ? true : this.state;
        const {checkedIsOpen, checkedWithDriveThru, checkedBrewbarOption} = this.props;
        let classIsOpen = checkedIsOpen ? 'checked' : '';
        let classInputIsOpen = checkedIsOpen ? 'checked' : 'outline';
        let classWithDriveThru = checkedWithDriveThru ? 'checked' : '';
        let classInputWithDriveThru = checkedWithDriveThru ? 'checked' : 'outline';
        let classBrewbarOption = checkedBrewbarOption ? 'checked' : '';


        return (
            <React.Fragment>
                <div className="search-block">
                    <div className="input-wrap">
                        <Icon className="aw" type="compass-inverted"/>
                        {/* <i class="aw  compass-inverted" title=""><span></span></i> */}
                        {this.props.lang === 'en' && <input className="search" type="text" placeholder="City or postal code..." onChange={e => this.props.onChange(e)} />}
                        {this.props.lang === 'fr' && <input className="search" type="text" placeholder="Une ville ou un code postal..." onChange={e => this.props.onChange(e)} />}
                        <button type="submit" title="submit" className={`submit`}><i className="aw  gt-inverted" title=""><span></span></i></button>
                    </div>
                    <div className="filter-btn-wrap">
                        <button className={`btn-filter ${filterDrawerShow ? 'active' : ''}`} onClick={this.toggleFilterDrawer}>
                            <TranslatableText dictionary={{
                                en: "Filter",
                                fr: "Filtres" }}>
                            </TranslatableText> <Icon type="plus-inverted" />
                        </button>
                    </div>
                </div>


                <div className={`restaurant-options ${filterDrawerShow ? 'open' : 'close'}`}>
                    <p>
                        <TranslatableText dictionary={{
                            en: "Only show restaurants",
                            fr: "Seulement montrer les restaurants:" }}>
                        </TranslatableText>
                    </p>

                    <div className="input-wrap">
                        <label className={classIsOpen} ><i className={`aw ${classInputIsOpen}`} title=""><span></span></i><input type="checkbox" value="on" onClick={this.props.toggleOpenNowOption} />
                            <TranslatableText dictionary={{
                                en: "Open Now",
                                fr: "Ouverts maintenant" }}>
                            </TranslatableText>
                        </label>
                        <label className={classWithDriveThru}><i className={`aw ${classInputWithDriveThru}`} title=""><span></span></i><input type="checkbox" value="on" onClick={this.props.toggleDriveThruOption} />

                            <TranslatableText dictionary={{
                                en: "With Drive-Thru",
                                fr: "Avec Service au volant" }}>
                            </TranslatableText>
                        </label>
                        <label className={classBrewbarOption}><i className={`aw ${classBrewbarOption}`} title=""><span></span></i><input type="checkbox" value="on" onClick={this.props.toggleBrewbarOption} />

                            <TranslatableText dictionary={{
                                en: "Brewbar Option",
                                fr: "Brewbar Fr" }}>
                            </TranslatableText>
                        </label>
                    </div>
                </div>

            </React.Fragment>
        );
    }
}


//export default SearchBar;



const SearchBar2 = (props) => {


   // const { filterDrawerShow } = this.state;
    //const { filterDrawerShow } = (this.props.checkedBrewbarOption === true) ? true : this.state;

    const {checkedIsOpen, checkedWithDriveThru, checkedBrewbarOption} = props;
    let classIsOpen = checkedIsOpen ? 'checked' : '';
    let classInputIsOpen = checkedIsOpen ? 'checked' : 'outline';
    let classWithDriveThru = checkedWithDriveThru ? 'checked' : '';
    let classInputWithDriveThru = checkedWithDriveThru ? 'checked' : 'outline';
    let classBrewbarOption = checkedBrewbarOption ? 'checked' : '';


    //const [isToggled, toggle] = useToggle(false);
    //const [filterDrawerShow, toggleFilterDrawerShow] = useState(false);


    const[filterDrawerShow, toggleFilterDrawerShow] = useToggle(false);


    // const toggleFilterDrawShow = () => {
    //     console.log('test togglefilterdrawshow');
    // }

    // const toggleFilterDrawer = () => {
    //     toggleFilterDrawShow();
    // }




    // useEffect(() => {

	// }, []);



    useEffect( () => {
        if(props.keepFilterOpen === true )  {
            toggleFilterDrawerShow(true);
        }
    },[toggleFilterDrawerShow, props.keepFilterOpen]);

    return(
        <>
        <div className="search-block">
                    <div className="input-wrap">
                        <Icon className="aw" type="compass-inverted"/>
                        {/* <i class="aw  compass-inverted" title=""><span></span></i> */}
                        {props.lang === 'en' && <input className="search" type="text" placeholder="City or postal code..." onChange={e => props.onChange(e)} />}
                        {props.lang === 'fr' && <input className="search" type="text" placeholder="Une ville ou un code postal..." onChange={e => props.onChange(e)} />}
                        <button type="submit" title="submit" className={`submit`}><i className="aw  gt-inverted" title=""><span></span></i></button>
                    </div>
                    <div className="filter-btn-wrap">
                        <button className={`btn-filter ${filterDrawerShow ? 'active' : ''}`} onClick={toggleFilterDrawerShow}>
                            <TranslatableText dictionary={{
                                en: "Filter",
                                fr: "Filtres" }}>
                            </TranslatableText> <Icon type="plus-inverted" />
                        </button>
                    </div>
                </div>


                <div className={`restaurant-options ${filterDrawerShow ? 'open' : 'close'}`}>
                    <p>
                        <TranslatableText dictionary={{
                            en: "Only show restaurants",
                            fr: "Seulement montrer les restaurants:" }}>
                        </TranslatableText>
                    </p>

                    <div className="input-wrap">
                        <label className={classIsOpen} ><i className={`aw ${classInputIsOpen}`} title=""><span></span></i><input type="checkbox" value="on" onClick={props.toggleOpenNowOption} />
                            <TranslatableText dictionary={{
                                en: "Open Now",
                                fr: "Ouverts maintenant" }}>
                            </TranslatableText>
                        </label>
                        <label className={classWithDriveThru}><i className={`aw ${classInputWithDriveThru}`} title=""><span></span></i><input type="checkbox" value="on" onClick={props.toggleDriveThruOption} />

                            <TranslatableText dictionary={{
                                en: "With Drive-Thru",
                                fr: "Avec Service au volant" }}>
                            </TranslatableText>
                        </label>
                        <label className={classBrewbarOption}><i className={`aw ${classBrewbarOption}`} title=""><span></span></i><input type="checkbox" value="on" onClick={props.toggleBrewbarOption} />

                            <TranslatableText dictionary={{
                                en: "Brewbar Option",
                                fr: "Brewbar Fr" }}>
                            </TranslatableText>
                        </label>
                    </div>
                </div>
        </>
    )
}

export default SearchBar2;