import Icon, { SearchOutlined, ScheduleOutlined } from "@ant-design/icons";
import { Layout, Menu } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { FaBusinessTime } from "react-icons/fa";
import { FiLogIn, FiLogOut } from "react-icons/fi";
import { MdTimer } from "react-icons/md";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { techLogout } from "../../redux/tech/tech.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { BsKanban } from "react-icons/bs";

const { Sider } = Layout;

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
});
const mapDispatchToProps = (dispatch) => ({
  techLogout: () => dispatch(techLogout()),
});

export function TechSider({ technician, techLogout }) {
  const [collapsed, setCollapsed] = useState(true);
  const { t } = useTranslation();
  const onCollapse = (collapsed) => {
    setCollapsed(collapsed);
  };

  return (
    <Sider
      style={{
        height: "100vh",
        position: "sticky",
        top: 0,
        left: 0,
      }}
      collapsible
      collapsed={collapsed}
      onCollapse={onCollapse}
    >
      <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
        <Menu.Item
          key="1"
          disabled={!!technician}
          icon={<Icon component={FiLogIn} />}
        >
          <Link to={`/tech/login`}>{t("menus.tech.login")}</Link>
        </Menu.Item>
        <Menu.Item key="2" disabled={!!!technician} icon={<SearchOutlined />}>
          <Link to={`/tech/joblookup`}>{t("menus.tech.joblookup")}</Link>
        </Menu.Item>
        <Menu.Item
          key="3"
          disabled={!!!technician}
          icon={<Icon component={FaBusinessTime} />}
        >
          <Link to={`/tech/jobclock`}>{t("menus.tech.jobclockin")}</Link>
        </Menu.Item>
        <Menu.Item
          key="4"
          disabled={!!!technician}
          icon={<Icon component={MdTimer} />}
        >
          <Link to={`/tech/shiftclock`}>{t("menus.tech.shiftclockin")}</Link>
        </Menu.Item>
        <Menu.Item key="5" disabled={!!!technician} icon={<ScheduleOutlined />}>
          <Link to={`/tech/list`}>{t("menus.tech.productionlist")}</Link>
        </Menu.Item>
        <Menu.Item
          key="6"
          disabled={!!!technician}
          icon={<Icon component={BsKanban} />}
        >
          <Link to={`/tech/board`}> {t("menus.tech.productionboard")}</Link>
        </Menu.Item>
        <Menu.Item
          key="7"
          disabled={!!!technician}
          onClick={() => techLogout()}
          icon={<Icon component={FiLogOut} />}
        >
          {t("menus.tech.logout")}
        </Menu.Item>
      </Menu>
    </Sider>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(TechSider);