/* eslint-disable react/jsx-key */
import React, { useEffect, useState } from "react";
import {
  AppBar,
  IconButton,
  Toolbar,
  Typography,
  Grid,
} from "@mui/material";
import { makeStyles } from "@mui/styles";

import { useNavigate } from "react-router-dom";
import VpnKeyIcon from "@mui/icons-material/VpnKey";
import SettingsIcon from "@mui/icons-material/SettingsOutlined";
import BuildIcon from "@mui/icons-material/Build";
import HomeIcon from "@mui/icons-material/Home";
import { observer } from "mobx-react";
import LogoB from "../../assets/images/LogoB.png";
import { getRootStore } from "../../models/root-store.ts";
import Lang from "../basics/Lang";

const Header = () => {
  const [rootStore] = useState(() => getRootStore());
  const [enableKeypad, setEnableKeypad] = useState(false);
  const history = useNavigate();

  const useStyles = makeStyles({
    typographyStyles: {
      fontSize: 25,
      textAlign: "center",
      "@media print": {
        display: "none",
      },
    },
    header: {
      minHeight: rootStore.layout.headerHeight,
      textAlign: "center",
      alignItems: "center",
      justify: "center",
      "@media print": {
        display: "none",
      },
    },
    logo: {
      textAlign: "left",
      "@media print": {
        display: "none",
      },
    },
    icon: {
      textAlign: "right",
      "@media print": {
        display: "none",
      },
    },
  });

  const classes = useStyles();

  const getElevation = () => {
    return rootStore.settings.screenSaverState ? 7 : 0;
  };

  const checkKeypadAvailable = () => {
    const appMode = rootStore?.settings.applicationMode;
    const readerId = rootStore.readerList?.defaultReaderId;
    const isReaderConfigured =
      typeof readerId === "string" && readerId.trim() !== "";

    return (
      [1, 2, 3, 4, 5].includes(appMode) && isReaderConfigured
    );
  };

  useEffect(() => {
    setEnableKeypad(checkKeypadAvailable());
  }, [
    rootStore.readerList.defaultReaderId,
    rootStore.settings.applicationMode,
  ]);

  const handleLogoClick = () => {
    if (enableKeypad) {
      history("/keyPad");
    }
  };

  return (
    <AppBar
      position="static"
      style={{ backgroundColor: rootStore.layout.headerColor }}
      elevation={getElevation()}
    >
      <Toolbar>
        <Grid container spacing={4} className={classes.header}>
          <Grid
            item
            xs={2}
            sm={2}
            md={2}
            lg={2}
            onTouchStartCapture={handleLogoClick}
            onClick={handleLogoClick}
            className={classes.logo}
          >
            <img
              src={
                rootStore.layout.customLogo
                  ? rootStore.layout.pathLogo
                  : LogoB
              }
              style={{
                maxHeight: rootStore.layout.maxHeightLogo,
                maxWidth: rootStore.layout.maxHeightLogo,
                marginTop: rootStore.layout.marginLogo,
                marginBottom: rootStore.layout.marginLogo,
              }}
              alt="Logo"
            />
          </Grid>

          <Grid item xs={10} sm={10} md={10} lg={10} className={classes.icon}>
            {rootStore.userList.loggedInUser &&
            rootStore.userList.loggedInUser.userlevel <= 1 ? (
              <>
                <IconButton
                  style={{ color: "white", marginRight: 10 }}
                  onTouchStartCapture={() => {
                    rootStore.settings.touchScreen && history("/");
                  }}
                  onClick={() => {
                    history("/");
                  }}
                >
                  <HomeIcon
                    fontSize={rootStore.layout.iconSize}
                    style={{ margin: 10 }}
                  />
                  <Typography>Home</Typography>
                </IconButton>
                <IconButton
                  style={{ color: "white", marginRight: 10 }}
                  onTouchStartCapture={() => {
                    rootStore.settings.touchScreen &&
                      history("/configurationMenu");
                  }}
                  onClick={() => {
                    history("/configurationMenu");
                  }}
                >
                  <BuildIcon
                    fontSize={rootStore.layout.iconSize}
                    style={{ margin: 10 }}
                  />
                  <Typography>Configuration</Typography>
                </IconButton>
                <IconButton
                  style={{ color: "white", marginRight: 10 }}
                  onTouchStartCapture={() => {
                    rootStore.settings.touchScreen && history("/settings");
                  }}
                  onClick={() => {
                    history("/settings");
                  }}
                >
                  <SettingsIcon
                    fontSize={rootStore.layout.iconSize}
                    style={{ margin: 10 }}
                  />
                  <Typography>Settings</Typography>
                </IconButton>
              </>
            ) : null}

            {!rootStore.settings.kioskMode || rootStore.userList.loggedIn ? (
              <>
                <IconButton
                  style={{ color: "white", marginRight: 20 }}
                  onTouchStartCapture={() => {
                    rootStore.settings.touchScreen && history("/login");
                  }}
                  onClick={() => {
                    history("/login");
                  }}
                >
                  <VpnKeyIcon
                    fontSize={rootStore.layout.iconSize}
                    style={{ margin: 10 }}
                  />
                  {rootStore.userList.loggedIn ? (
                    <Typography>Logout</Typography>
                  ) : (
                    <Typography>Login</Typography>
                  )}
                </IconButton>
              </>
            ) : null}
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
};

export default observer(Header);
