import { ButtonBase, Typography, useTheme } from "@mui/material";
import Box from "@mui/material/Box";
import { HubsIcon } from "../../assets/Icons/HubsIcon";
import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
import AppIcon from "../../assets/svgs/AppIcon.svg";

import { HomeIcon } from "../../assets/Icons/HomeIcon";
import { Save } from "../Save/Save";
import { useRecoilState } from "recoil";
import { enabledDevModeAtom } from "../../atoms/global";

export const IconWrapper = ({
  children,
  label,
  color,
  selected,
  disableWidth,
  customWidth,
}) => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        gap: "5px",
        flexDirection: "column",
        height: customWidth ? customWidth : disableWidth ? "auto" : "89px",
        width: customWidth ? customWidth : disableWidth ? "auto" : "89px",
        borderRadius: "50%",
        backgroundColor: selected
          ? theme.palette.background.default
          : "transparent",
        color: color ? color : theme.palette.text.primary,
      }}
    >
      {children}
      <Typography
        sx={{
          fontFamily: "Inter",
          fontSize: "12px",
          fontWeight: 500,
          color: theme.palette.text.primary,
        }}
      >
        {label}
      </Typography>
    </Box>
  );
};

export const DesktopFooter = ({
  goToHome,
  hasUnreadGroups,
  hasUnreadDirects,
  isHome,
  isGroups,
  isDirects,
  setDesktopSideView,
  isApps,
  setDesktopViewMode,
  hide,
  setIsOpenSideViewDirects,
  setIsOpenSideViewGroups,
}) => {
  const [isEnabledDevMode, setIsEnabledDevMode] =
    useRecoilState(enabledDevModeAtom);

  if (hide) return;
  return (
    <Box
      sx={{
        width: "100%",
        position: "absolute",
        bottom: 0,
        display: "flex",
        alignItems: "center",
        height: "100px", // Footer height
        zIndex: 1,
        justifyContent: "center",
      }}
    >
      <Box
        sx={{
          display: "flex",
          gap: "20px",
        }}
      >
        <ButtonBase
          onClick={() => {
            goToHome();
          }}
        >
          <IconWrapper label="Home" selected={isHome}>
            <HomeIcon
              height={30}
            />
          </IconWrapper>
        </ButtonBase>

        <ButtonBase
          onClick={() => {
            setDesktopViewMode("apps");
            setIsOpenSideViewDirects(false);
            setIsOpenSideViewGroups(false);
          }}
        >
          <IconWrapper label="Apps" selected={isApps}>
            <img src={AppIcon} />
          </IconWrapper>
        </ButtonBase>

        <ButtonBase
          onClick={() => {
            setDesktopSideView("groups");
          }}
        >
          <IconWrapper label="Groups" selected={isGroups}>
            <HubsIcon
              height={30}
              color={
                hasUnreadGroups
                  ? "var(--danger)"
                  : isGroups
                  ? "white"
                  : "rgba(250, 250, 250, 0.5)"
              }
            />
          </IconWrapper>
        </ButtonBase>

        <ButtonBase
          onClick={() => {
            setDesktopSideView("directs");
          }}
        >
          <IconWrapper label="Messaging" selected={isDirects}>
            <MessagingIcon
              height={30}
              color={
                hasUnreadDirects
                  ? "var(--danger)"
                  : isDirects
                  ? "white"
                  : "rgba(250, 250, 250, 0.5)"
              }
            />
          </IconWrapper>
        </ButtonBase>

        <Save isDesktop />
        {isEnabledDevMode && (
          <ButtonBase
            onClick={() => {
              setDesktopViewMode("dev");
              setIsOpenSideViewDirects(false);
              setIsOpenSideViewGroups(false);
            }}
          >
            <IconWrapper label="Dev Mode" selected={isApps}>
              <img src={AppIcon} />
            </IconWrapper>
          </ButtonBase>
        )}
      </Box>
    </Box>
  );
};