import { AddIcon, ArrowBackIcon } from "@chakra-ui/icons";
import {
  Avatar,
  Box,
  Button,
  HStack,
  Popover,
  PopoverArrow,
  PopoverBody,
  PopoverContent,
  PopoverFooter,
  PopoverTrigger,
  Portal,
  Text,
  useColorMode,
} from "@chakra-ui/react";
import React, { useContext } from "react";
import { Link, useNavigate } from "react-router-dom";
import { IoMdDownload } from "react-icons/io";
import * as XLSX from "xlsx";
import profile from "../assets/proavatar.webp";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
import logoMini from "../assets/propic.png"
import { BsBack } from "react-icons/bs";

const HeaderMain = ({
  link,
  btnTitle,
  title,
  icon,
  logOutHandler,
  slideDirecttion,
}) => {
  const navigate = useNavigate()
  const { colorMode, toggleColorMode } = useContext(GlobalStateContext);


  return (
    <Box
      className={` pt-2 pb-2   fw-400 border-bottom d-flex ${
        slideDirecttion ? "flex-row-reverse ps-2" : ""
      }  justify-content-between align-items-center`}
      // boxShadow={"0 0px 8px rgba(0, 0, 0, 0.2)"}

      zIndex={999}
    >
      <HStack>
      {/* <ArrowBackIcon onClick={()=>navigate(-1)} /> */}
      <Text
        as={"span"}
        fontWeight={"500"}
        // color={"forestGreen.500"}
        className="fs-6 "
      >
        {/* <icon /> */}
        {title}
      </Text>
      </HStack>

      
      <Box me={4} gap={2} className="d-flex justify-content-center ">
        <Popover placement="bottom">
          <Portal>
            <PopoverContent maxW="200px" className="">
              <PopoverArrow />
              <PopoverBody className="web-text-medium pointer link">
                Profile
              </PopoverBody>
              <Link to={"/help-and-support"}>
                <PopoverBody className="web-text-medium pointer ">
                  Help & Support
                </PopoverBody>
              </Link>
              <PopoverFooter
                onClick={logOutHandler}
                className="web-text-medium pointer link"
              >
                Log Out
              </PopoverFooter>
            </PopoverContent>
          </Portal>
          <PopoverTrigger>
            <Box
              // onClick={logOutHandler}
              className="d-flex pointer  align-items-center"
            >
              <Avatar
                size="sm"
                boxSize={37}
                name="Tanami M"
                src={logoMini}
                bg={'green.100'}
                // p={1}
              />
              <Box
                style={{
                  display: "flex",
                }}
                className=" overflow-hidden ms-3  flex-column "
              >
                <Text as={"span"} className="web-text-small">
                  Hello, Tanami admin
                </Text>
                <Text as={"span"} className="web-text-xsmall">
                  admin@tanami.com
                </Text>
              </Box>
            </Box>
          </PopoverTrigger>
        </Popover>

        {/* <Box onClick={() => toggleColorMode()} as="span" p={2} rounded={'lg'} className="link pointer">
          {colorMode === "light"?  <MdOutlineDarkMode /> :<MdOutlineLightMode />}
        </Box> */}
      </Box>
    </Box>
  );
};

export default HeaderMain;