import React, { useState } from 'react'
import Link from 'next/link'
import MobileMenu from '../MobileMenu/MobileMenu'
import { totalPrice } from "../../utils";
import { connect } from "react-redux";
import { removeFromCart } from "../../store/actions/action";
// import Logo from '/public/images/logo.svg';
import Logo from '../../public/images/Dokan.png';
import LogoImage from "../../public/images/Logo copy.svg"
import HeaderTopbar from '../HeaderTopbar';
import Image from 'next/image';
import { useTranslations } from "next-intl";
import LocaleSwitcher from '@/intlcomponents/LocaleSwitcher';
import { useRouter } from 'next/router';
const Header = (props) => {
    const t = useTranslations("Header");
    const { locale } = useRouter();
    const SubmitHandler = (e) => {
        e.preventDefault()
    }

    const ClickHandler = () => {
        window.scrollTo(10, 0);
    }
    const { carts } = props;

    return (
        <header id="header" className={props.topbarClass}>
            <HeaderTopbar />
            <div className={`wpo-site-header ${props.hclass}`}>
                <nav className="navigation navbar navbar-expand-lg navbar-light">
                    <div className="container-fluid">
                        <div className="row align-items-center">
                            <div className="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
                                <div className="mobail-menu">
                                    <MobileMenu />
                                </div>
                            </div>
                            <div className="col-lg-1 col-md-6 col-6">
                                <div className="navbar-header">
                                    <Link onClick={ClickHandler} className="navbar-brand" href="/">
                                        <Image
                                            style={{ width: "160px" }}
                                            src={LogoImage}
                                            alt="" />
                                    </Link>
                                </div>
                            </div>
                            <div className="col-lg-10 col-md-1 col-1">
                                <div id="navbar" className="collapse navbar-collapse navigation-holder">
                                    <button className="menu-close"><i className="ti-close"></i></button>
                                    <ul className="nav navbar-nav mb-2 mb-lg-0">
                                        <li className="menu-item-has-children">
                                            <Link style={locale === "ar" ? { fontSize: "2rem" } : { fontSize: "1.6rem" }} onClick={ClickHandler} href="/">{t("header_home_link")}</Link>
                                        </li>
                                        <li className="menu-item-has-children">
                                            <Link style={locale === "ar" ? { fontSize: "2rem" } : { fontSize: "1.6rem" }} onClick={ClickHandler} href="/about">{t("header_about_link")}</Link>
                                        </li>
                                        <li className="menu-item-has-children">
                                            <Link style={locale === "ar" ? { fontSize: "2rem" } : { fontSize: "1.6rem" }} onClick={ClickHandler} href="/services">{t("header_services_link")}</Link>
                                        </li>
                                        <li className="menu-item-has-children">
                                            <Link style={locale === "ar" ? { fontSize: "2rem" } : { fontSize: "1.6rem" }} onClick={ClickHandler} href="/clients">
                                                {t("header_clients_link")}</Link>
                                        </li>
                                        <li className="menu-item-has-children">
                                            <Link style={locale === "ar" ? { fontSize: "2rem" } : { fontSize: "1.6rem" }} onClick={ClickHandler} href="/contact">
                                                {t("header_contact_link")}</Link>
                                        </li>
                                        <li className="menu-item-has-children">
                                            <Link style={locale === "ar" ? { fontSize: "2rem" } : { fontSize: "1.6rem" }} onClick={ClickHandler} href="/blog-list">
                                                {t("header_researches_link")}</Link>
                                        </li>
                                        {/* <li className="menu-item-has-children">
                                            <Link onClick={ClickHandler} href="/">{t("The_Mission")}</Link>
                                        </li> */}
                                        {/* <li className="menu-item-has-children">
                                            <Link onClick={ClickHandler} href="/">{t("Know_More")}</Link>
                                            <ul className="sub-menu">
                                                <li><Link onClick={ClickHandler} href="#fees">{t("The_fees")}</Link></li>
                                                <li><Link onClick={ClickHandler} href="/">{t("Engagement_and_appointment_letter")}</Link></li>
                                                <li><Link onClick={ClickHandler} href="/">{t("Company_obligations")}</Link></li>
                                                <li><Link onClick={ClickHandler} href="/">{t("Office_obligations")}</Link></li>
                                                <li><Link onClick={ClickHandler} href="/">{t("Approval_of_the_letter")}</Link></li>
                                            </ul>
                                        </li> */}
                                    </ul>
                                </div>
                            </div>
                            <div style={{ paddingLeft: "2px" }} className="col-lg-1 col-md-2 col-2">
                                <LocaleSwitcher />
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </header>
    )
}

const mapStateToProps = (state) => {
    return {
        carts: state.cartList.cart,
    };
};


export default connect(mapStateToProps, { removeFromCart })(Header);