import Icon, {
  CarFilled,
  DollarCircleFilled,
  FileAddFilled,
  FileFilled,
  GlobalOutlined,
  HomeFilled,
  TeamOutlined,
  UserOutlined
} from "@ant-design/icons";
import { Avatar, Col, Layout, Menu, Row } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { FaCalendarAlt, FaCarCrash } from "react-icons/fa";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { setModalContext } from "../../redux/modals/modals.actions";
import { signOutStart } from "../../redux/user/user.actions";
import {
  selectBodyshop,
  selectCurrentUser
} from "../../redux/user/user.selectors";
import "./header.styles.scss";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  setInvoiceEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
  setTimeTicketContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "timeTicket" })),
  setPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "payment" })),
  signOutStart: () => dispatch(signOutStart()),
});

const logoSpan = {
  xs: {
    span: 0,
  },
  md: {
    span: 1,
  },
  lg: {
    span: 2,
  },
};

const menuSpan = {
  xs: {
    span: 24,
  },
  md: {
    span: 22,
    offset: 1,
  },
  lg: {
    span: 21,
    offset: 1,
  },
};

function Header({
  bodyshop,
  handleMenuClick,
  currentUser,
  signOutStart,
  setInvoiceEnterContext,
  setTimeTicketContext,
  setPaymentContext,
}) {
  const { t } = useTranslation();
  const { Header } = Layout;

  return (
    <Header>
      <Row>
        <Col {...logoSpan}>
          <img
            className='header-shop-logo'
            alt={bodyshop ? bodyshop.shopname : "ImEX Online Logo"}
            src={
              bodyshop && bodyshop.logo_img_path
                ? bodyshop.logo_img_path
                : "./logo192.png"
            }
          />
        </Col>
        <Col {...menuSpan}>
          <Menu
            mode='horizontal'
            theme='dark'
            className='header-main-menu'
            onClick={handleMenuClick}>
            <Menu.Item key='home'>
              <Link to='/manage'>
                <HomeFilled />
                {t("menus.header.home")}
              </Link>
            </Menu.Item>
            <Menu.SubMenu
              title={
                <span>
                  <Icon component={FaCarCrash} />
                  <span>{t("menus.header.jobs")}</span>
                </span>
              }>
              <Menu.Item key='schedule'>
                <Link to='/manage/schedule'>
                  <Icon component={FaCalendarAlt} />
                  {t("menus.header.schedule")}
                </Link>
              </Menu.Item>
              <Menu.Item key='production'>
                <Link to='/manage/production/list'>
                  <Icon component={FaCalendarAlt} />
                  {t("menus.header.productionlist")}
                </Link>
              </Menu.Item>
              <Menu.Item key='activejobs'>
                <Link to='/manage/jobs'>{t("menus.header.activejobs")}</Link>
              </Menu.Item>
              <Menu.Item key='alljobs'>
                <Link to='/manage/jobs/all'>{t("menus.header.alljobs")}</Link>
              </Menu.Item>
              <Menu.Item key='availablejobs'>
                <Link to='/manage/available'>
                  {t("menus.header.availablejobs")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu title={t("menus.header.customers")}>
              <Menu.Item key='owners'>
                <Link to='/manage/owners'>
                  <TeamOutlined />
                  {t("menus.header.owners")}
                </Link>
              </Menu.Item>
              <Menu.Item key='vehicles'>
                <Link to='/manage/vehicles'>
                  <CarFilled />
                  {t("menus.header.vehicles")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu
              title={
                <span>
                  <CarFilled />
                  <span>{t("menus.header.courtesycars")}</span>
                </span>
              }>
              <Menu.Item key='courtesycarsall'>
                <Link to='/manage/courtesycars'>
                  <CarFilled />
                  {t("menus.header.courtesycars-all")}
                </Link>
              </Menu.Item>
              <Menu.Item key='contracts'>
                <Link to='/manage/courtesycars/contracts'>
                  <FileFilled />
                  {t("menus.header.courtesycars-contracts")}
                </Link>
              </Menu.Item>
              <Menu.Item key='newcontract'>
                <Link to='/manage/courtesycars/contracts/new'>
                  <FileAddFilled />
                  {t("menus.header.courtesycars-newcontract")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu
              title={
                <span>
                  <DollarCircleFilled />
                  <span>{t("menus.header.accounting")}</span>
                </span>
              }>
              <Menu.Item
                key='enterpayments'
                onClick={() => {
                  setPaymentContext({
                    actions: {},
                    context: {},
                  });
                }}>
                {t("menus.header.enterpayment")}
              </Menu.Item>

              <Menu.Item
                key='enterinvoices'
                onClick={() => {
                  setInvoiceEnterContext({
                    actions: {},
                    context: {},
                  });
                }}>
                {t("menus.header.enterinvoices")}
              </Menu.Item>
              <Menu.Item key='invoices'>
                <Link to='/manage/invoices'>{t("menus.header.invoices")}</Link>
              </Menu.Item>
              <Menu.Item
                key='entertimetickets'
                onClick={() => {
                  setTimeTicketContext({
                    actions: {},
                    context: {},
                  });
                }}>
                {t("menus.header.entertimeticket")}
              </Menu.Item>
              <Menu.Item key='receivables'>
                <Link to='/manage/accounting/receivables'>
                  {t("menus.header.accounting-receivables")}
                </Link>
              </Menu.Item>
              <Menu.Item key='payables'>
                <Link to='/manage/accounting/payables'>
                  {t("menus.header.accounting-payables")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu title={t("menus.header.shop")}>
              <Menu.Item key='shop'>
                <Link to='/manage/shop'>{t("menus.header.shop_config")}</Link>
              </Menu.Item>
              <Menu.Item key='shop-templates'>
                <Link to='/manage/shop/templates'>
                  {t("menus.header.shop_templates")}
                </Link>
              </Menu.Item>
              <Menu.Item key='shop-vendors'>
                <Link to='/manage/shop/vendors'>
                  {t("menus.header.shop_vendors")}
                </Link>
              </Menu.Item>
              <Menu.Item key='shop-csi'>
                <Link to='/manage/shop/csi'>{t("menus.header.shop_csi")}</Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu
              title={
                <div>
                  {currentUser.photoURL ? (
                    <Avatar
                      src={currentUser.photoURL}
                      style={{
                        margin: "10px",
                      }}
                    />
                  ) : (
                    <Avatar
                      style={{
                        backgroundColor: "#87d068",
                        margin: "10px",
                      }}
                      icon={<UserOutlined />}
                    />
                  )}

                  {currentUser.displayName || t("general.labels.unknown")}
                </div>
              }>
              <Menu.Item danger onClick={() => signOutStart()}>
                {t("user.actions.signout")}
              </Menu.Item>
              <Menu.Item>
                <Link to='/manage/profile'>
                  {t("menus.currentuser.profile")}
                </Link>
              </Menu.Item>
              <Menu.SubMenu
                title={
                  <span>
                    <GlobalOutlined />
                    <span>{t("menus.currentuser.languageselector")}</span>
                  </span>
                }>
                <Menu.Item actiontype='lang-select' key='en-US'>
                  {t("general.languages.english")}
                </Menu.Item>
                <Menu.Item actiontype='lang-select' key='fr-CA'>
                  {t("general.languages.french")}
                </Menu.Item>
                <Menu.Item actiontype='lang-select' key='es-MX'>
                  {t("general.languages.spanish")}
                </Menu.Item>
              </Menu.SubMenu>
            </Menu.SubMenu>
          </Menu>
        </Col>
      </Row>
    </Header>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);