import React from "react";
import style from "./header.module.sass";
import {connect} from 'react-redux';
import logo from "../../images/logos/logoNaravel.png";
import Navbar from "../../components/navbar/navbar";
import {Link} from "react-router-dom"
import Basket from "./basket/basket";
import HeaderButtonsForAccount from "../buttons/headerButtonForAccount/headerButtonForAccount";
import DynamicSearcher from '../inputs/dynamicSearchGoods/dynamicSearchGoods';
import {dynamicSearchGoodsConstants} from "../../constants/typesComponents";

const Header = (props)  => {

    return(
        <div className={style.mainContainer}>
            <div className={style.headerContainer}>
                <div className={style.leftSide}>
                    <div className={style.phones}>
                        <h2>(066) 280 32 54</h2>
                    </div>
                    <p>Ежедневно с 9:00 до 19:00</p>
                    <div className={style.callBack}>обратный звонок</div>
                </div>
                <Link to={"/"}><img src={logo} alt={"logo"} /></Link>
                <div className={style.rightSide}>
                    <Basket/>
                    <HeaderButtonsForAccount
                        userName={props.userName}
                        isFetching={props.isFetching}
                    />
                    <DynamicSearcher
                        type={dynamicSearchGoodsConstants.SINGLE_GOODS_SEARCHER}
                    />
                </div>
            </div>
            <Navbar />
        </div>
    )
};

const mapStateToProps = state => {
    const {userName, isFetching} = state.signUpReducers;

    return {
        userName, isFetching
    }
};

export default connect(mapStateToProps)(Header);