// File path: /styles/left-sidebar-menu.scss

"use client";

import * as React from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { styled } from "@mui/material/styles";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import MuiAccordion, { AccordionProps } from "@mui/material/Accordion";
import MuiAccordionSummary, {
  AccordionSummaryProps,
} from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import { Box, Typography, Button } from "@mui/material";
import { useCookies } from 'react-cookie';
import AuthenticationService from '@service/AuthenticationService';
import {RoleEnum} from '@constant/StaticData';
import {decodeSimpleJWT} from '@utils/common';
import StarIcon from '@mui/icons-material/Star';

const Accordion = styled((props: AccordionProps) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  "&:not(:last-child)": {
    borderBottom: 0,
  },
  "&::before": {
    display: "none",
  },
}));

const AccordionSummary = styled((props: AccordionSummaryProps) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#3a4252" : "#f6f7f9",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
}));

interface LeftSidebarProps {
  toggleActive: () => void;
}

const LeftSidebarMenu: React.FC<LeftSidebarProps> = ({ toggleActive }) => {
  const pathname = usePathname();
  const router = useRouter();
  const [cookies, setCookie, removeCookie] = useCookies();

  const [expanded, setExpanded] = React.useState<string | false>("panel1");

  const decodedUserData = cookies.lr_u_info ? decodeSimpleJWT(cookies.lr_u_info) : null;
  
  const handleChange =
    (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
      setExpanded(newExpanded ? panel : false);
    };

    const handleSignOut= async()=>{
      const lSignout = await AuthenticationService.AppSignout();
      const ar_Id = decodedUserData?.ar_id;
      if(lSignout && lSignout?.AppSignout == true){
        removeCookie('lr_u_info', { path: '/' });
        removeCookie('lr_usr_tkn', { path: '/' });
        if (ar_Id == RoleEnum.ADMIN)
          router.push('/login/admin')
      } 
    } 
    
    

  return (
    <>
      <div className="leftSidebarDark">
        <div className="left-sidebar-menu">
          <div className="logo">
            <Link href="/login/admin">
              <Image
                src="/Images/Logo.png"
                alt="logo-icon"
                width={200}
                height={200}
              />
            </Link>
          </div>

          <Box className="burger-menu" onClick={toggleActive}>
            <span className="top-bar"></span>
            <span className="middle-bar"></span>
            <span className="bottom-bar"></span>
          </Box>

          <div className="sidebar-inner">
            <div className="sidebar-menu">
              <Typography
                className="sub-title"
                sx={{
                  display: "block",
                  fontWeight: "500",
                  textTransform: "uppercase",
                }}
              >
              </Typography> 

              <Link
                href="/admin/floor-plan"
                className={`sidebar-menu-link ${
                  pathname === "/admin/floor-plan" ? "active" : ""
                }`}
              >
                {/* <i className="material-symbols-outlined">grid_view  </i> */}
                <i className="material-symbols-outlined" 
                   style={{ fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48'" }}>
                  tv
                </i>

                <span className="title">Floor Plan Portfolio</span>
              </Link> 

              <Link
                href="/admin/gallery"
                className={`sidebar-menu-link ${
                  pathname === "/admin/gallery" ? "active" : ""
                }`}
              >
               {/*  <i className="material-symbols-outlined">image </i> */}
               <i className="material-symbols-outlined" 
                   style={{ fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48'" }}>
                  tv
                </i>
                <span className="title">Gallery</span>
                
              </Link>

              <Link
                href="/admin/inspiration"
                className={`sidebar-menu-link ${
                  pathname === "/admin/inspiration" ? "active" : ""
                }`}
              >
              {/*   <i className="material-symbols-outlined">photo_library </i> */}
              <i className="material-symbols-outlined" 
                   style={{ fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48'" }}>
                  tv
                </i>
                <span className="title">Inspiration</span>
              </Link>

              <Link
                href="/admin/features"
                className={`sidebar-menu-link ${
                  pathname === "/admin/features" ? "active" : ""
                }`}
              >
               
               <i className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>star</i>
                <span className="title">Features</span>
              </Link>
             
              <Link
                href="/admin/room-type"
                className={`sidebar-menu-link ${
                  pathname === "/admin/room-type" ? "active" : ""
                }`}
              >
               {/*  <i className="material-symbols-outlined">radio_button_unchecked</i> */}
               {/*  <i className="material-symbols-outlined">home_work </i> */}
               <i className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>star</i>
                <span className="title">Rooms</span>
              </Link>

              
              <Link
                href="/admin/architecture-style"
                className={`sidebar-menu-link ${
                  pathname === "/admin/architecture-style" ? "active" : ""
                }`}
              >
               {/* <i className="material-symbols-outlined">apartment</i> */}
               <i className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>star</i>
                <span className="title">Architectural Style</span>
              </Link>

              <Link
                href="/admin/home-section"
                className={`sidebar-menu-link ${
                  pathname === "/admin/home-section" ? "active" : ""
                }`}
              >
                {/* <i className="material-symbols-outlined">home</i> */}
                <i className="material-symbols-outlined" style={{ fontVariationSettings: "'FILL' 1" }}>star</i>
                <span className="title">Gallery Category</span>
              </Link>

              
              <Link
                href="/admin/buyer"
                className={`sidebar-menu-link ${
                  pathname === "/admin/buyer" ? "active" : ""
                }`}
              >
                <i className="material-symbols-outlined">account_circle </i>
                <span className="title">Buyer</span>
              </Link>

              <Link
                href="/admin/general-settings"
                className={`sidebar-menu-link ${
                  pathname === "/admin/general-settings" ? "active" : ""
                }`}
              >
                <i className="material-symbols-outlined">settings    </i>
                <span className="title">General Settings</span>
              </Link>

              <a className="sidebar-menu-link" 
                  onClick={handleSignOut}>
              <i className="material-symbols-outlined">logout</i>
              <span className="title">Logout</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default LeftSidebarMenu;
