import PerfectScrollbar from 'react-perfect-scrollbar';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { NavLink, useLocation } from 'react-router-dom';
import { toggleSidebar } from '../../store/themeConfigSlice';
import { IRootState } from '../../store';
import { useState, useEffect } from 'react';
import { hasAccess } from '../../../../../utils/hasAccess';
import AnimateHeight from 'react-animate-height';

const Sidebar = () => {
    const [currentMenu, setCurrentMenu] = useState<string>('');
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);
    const semidark = useSelector((state: IRootState) => state.themeConfig.semidark);
    const isDarkMode = useSelector((state: IRootState) => state.themeConfig.isDarkMode);
    const location = useLocation();
    const dispatch = useDispatch();
    const { t } = useTranslation();

    const userType = localStorage.getItem("userType");
    const isAdmin = userType === 'admin';
    const permissions = JSON.parse(localStorage.getItem("permissions") || "[]");

    const toggleMenu = (key: string) => {
        setCurrentMenu(currentMenu === key ? '' : key);
    };

    const showMenuItem = (permissionKey: string) => isAdmin || hasAccess(permissions, permissionKey, "view");

    useEffect(() => {
        const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
        if (selector) {
            selector.classList.add('active');
            const ul: any = selector.closest('ul.sub-menu');
            if (ul) {
                let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link') || [];
                if (ele.length) {
                    ele = ele[0];
                    setTimeout(() => {
                        ele.click();
                    });
                }
            }
        }
    }, []);

    

    useEffect(() => {
        if (window.innerWidth < 1024) {
            dispatch(toggleSidebar());
        }
    }, [location, dispatch]);


    // Determine which logo to show based on dark mode


      const menuItems = [
    {
        key: "Dashboard",
        path: "/dashboard",
        icon: (
            <svg
                className="group-hover:!text-primary shrink-0"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M3 13H10V21H3V13Z"
                    fill="currentColor"
                    opacity="0.6"
                />
                <path
                    d="M14 3H21V10H14V3Z"
                    fill="currentColor"
                    opacity="0.8"
                />
                <path
                    d="M14 14H21V21H14V14Z"
                    fill="currentColor"
                />
                <path
                    d="M3 3H10V11H3V3Z"
                    fill="currentColor"
                    opacity="0.9"
                />
            </svg>
        ),
        label: t('dashboard')
    },
    {
        key: "Customer",
        path: "/customer",
        icon: (
            <svg 
                className="group-hover:!text-primary shrink-0"
                xmlns="http://www.w3.org/2000/svg" 
                width="20" 
                height="20" 
                viewBox="0 0 512 342.68" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="30" 
                strokeLinecap="round" 
                strokeLinejoin="round"
            >
                <path d="M3.59 300.55a3.59 3.59 0 0 1-3.59-3.6c0-1.02.14-2.03.38-3.03 5.77-45.65 41.51-57.84 66.87-64.42 12.69-3.29 44.26-15.82 31.68-33.04-7.05-9.67-13.44-16.47-19.83-26.68-4.61-6.81-7.04-12.88-7.04-17.75 0-5.19 2.75-11.27 8.26-12.64-.73-10.45-.97-24.2-.48-35.39 1.75-19.2 15.52-33.35 33.31-39.62 7.05-2.68 3.64-13.38 11.42-13.62 18.24-.49 48.14 15.07 59.82 27.71 6.81 7.3 11.18 17.02 11.91 29.91l-.73 32.22c3.4.98 5.59 3.16 6.57 6.56.97 3.89 0 9.25-3.41 16.79 0 .24-.24.24-.24.48-7.51 12.37-15.33 20.56-23.92 32.03-3.84 5.11-3.09 10.01.1 14.41-4.48 2.62-8.85 5.62-13.06 9.16-16.76 14.07-29.68 35.08-34.13 68.61l-.5 2.9c-.24 1.9-.38 3.48-.38 4.66 0 1.48.13 2.93.37 4.35H3.59zM428 174.68c46.41 0 84 37.62 84 84 0 46.4-37.62 84-84 84-46.4 0-84-37.62-84-84 0-46.41 37.61-84 84-84zm-13.25 49.44c-.03-3.91-.39-6.71 4.46-6.64l15.7.19c5.07-.03 6.42 1.58 6.36 6.33v21.43h21.3c3.91-.04 6.7-.4 6.63 4.45l-.19 15.71c.03 5.07-1.58 6.42-6.32 6.36h-21.42v21.41c.06 4.75-1.29 6.36-6.36 6.33l-15.7.18c-4.85.08-4.49-2.72-4.46-6.63v-21.29h-21.43c-4.75.06-6.35-1.29-6.32-6.36l-.19-15.71c-.08-4.85 2.72-4.49 6.62-4.45h21.32v-21.31zm-261.98 76.47c-2.43 0-4.39-1.96-4.39-4.39 0-1.25.17-2.48.47-3.7 7.03-55.71 40.42-67.83 71.33-75.78 14.84-3.82 44.44-18.71 40.85-37.91-7.49-6.94-14.92-16.53-16.21-30.83l-.9.02c-2.07-.03-4.08-.5-5.95-1.56-4.13-2.35-6.4-6.85-7.49-11.99-2.29-15.67-2.86-23.67 5.49-27.17l.07-.02c-1.04-19.34 2.23-47.79-17.63-53.8 39.21-48.44 84.41-74.8 118.34-31.7 37.81 1.98 54.67 55.54 31.19 85.52h-.99c8.36 3.5 7.1 12.49 5.49 27.17-1.09 5.14-3.36 9.64-7.49 11.99-1.87 1.06-3.87 1.53-5.95 1.56l-.9-.02c-1.29 14.3-8.74 23.89-16.23 30.83-1.01 5.43.63 10.52 3.84 15.11-14.05 17.81-22.44 40.31-22.44 64.76 0 14.89 3.11 29.07 8.73 41.91H152.77z" />
            </svg>
        ),
        label: t('customer')
    },
    {
        key: "Booking",
        path: "/booking",
        icon: (
            <svg
                className="group-hover:!text-primary shrink-0"
                version="1.1"
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                viewBox="0 0 122.88 119.97"
                fill="currentColor"
            >
                <g>
                    <path d="M69.76,4.06c0-2.23,2.2-4.06,4.95-4.06s4.95,1.81,4.95,4.06V21.8c0,2.23-2.2,4.06-4.95,4.06s-4.95-1.81-4.95-4.06V4.06z
      M14.37,78.05h11.34c0.72,0,1.31,0.59,1.31,1.31v8.38c0,0.72-0.59,1.31-1.31,1.31H14.37c-0.72,0-1.31-0.59-1.31-1.31v-8.38
      C13.06,78.63,13.65,78.05,14.37,78.05z
      M57.79,54.17h11.34c0.35,0,0.66,0.14,0.9,0.36c-4.45,2.78-8.31,6.4-11.37,10.65h-0.87c-0.72,0-1.31-0.59-1.31-1.31v-8.38
      C56.48,54.76,57.07,54.17,57.79,54.17z
      M36.08,54.17h11.34c0.72,0,1.31,0.59,1.31,1.31v8.38c0,0.72-0.59,1.31-1.31,1.31H36.08c-0.72,0-1.31-0.59-1.31-1.31v-8.38
      C34.77,54.76,35.36,54.17,36.08,54.17z
      M14.37,54.17h11.34c0.72,0,1.31,0.59,1.31,1.31v8.38c0,0.72-0.59,1.31-1.31,1.31H14.37c-0.72,0-1.31-0.59-1.31-1.31v-8.38
      C13.06,54.76,13.65,54.17,14.37,54.17z
      M36.08,78.05h11.34c0.72,0,1.31,0.59,1.31,1.31v8.38c0,0.72-0.59,1.31-1.31,1.31H36.08c-0.72,0-1.31-0.59-1.31-1.31v-8.38
      C34.77,78.63,35.36,78.05,36.08,78.05z
      M103.49,59.54c11.71,4.85,19.39,16.28,19.39,29.02c0,8.67-3.52,16.53-9.20,22.21c-5.68,5.68-13.53,9.20-22.21,9.20
      c-8.67,0-16.52-3.52-22.21-9.20c-5.68-5.69-9.20-13.54-9.20-22.21c0-12.64,7.86-24.43,19.55-29.23
      C86.86,56.37,96.29,56.55,103.49,59.54z
      M86.64,87.72c0.39-0.43,0.87-0.80,1.39-1.08V72.98c0-1.39,1.13-2.52,2.52-2.52c1.39,0,2.53,1.13,2.53,2.52v13.66
      c0.92,0.50,1.68,1.25,2.17,2.17h9.76c1.40,0,2.52,1.13,2.52,2.52s-1.13,2.52-2.52,2.52h-9.76c-0.90,1.68-2.66,2.82-4.70,2.82
      c-1.60,0-3.03-0.71-4.01-1.82C84.73,92.78,84.82,89.69,86.64,87.72z
      M110.12,70.41c-13.01-13.01-34.95-9.33-42.56,7.05c-1.56,3.37-2.44,7.13-2.44,11.09c0,7.28,2.95,13.87,7.72,18.64
      c4.77,4.77,11.36,7.72,18.64,7.72c7.28,0,13.87-2.96,18.64-7.72c4.77-4.77,7.72-11.36,7.72-18.64c0-4.13-0.95-8.04-2.64-11.52
      C113.91,74.4,112.19,72.48,110.12,70.41z
      M25.33,4.06c0-2.23,2.20-4.06,4.95-4.06c2.74,0,4.95,1.81,4.95,4.06V21.8c0,2.23-2.21,4.06-4.95,4.06c-2.74,0-4.95-1.81-4.95-4.06
      V4.06z
      M5.45,38.79h94.21V18.37c0-0.70-0.28-1.31-0.73-1.76c-0.45-0.45-1.09-0.73-1.76-0.73h-9.03c-1.51,0-2.74-1.23-2.74-2.74
      c0-1.51,1.23-2.74,2.74-2.74h9.03c2.21,0,4.20,0.89,5.65,2.34c1.45,1.45,2.34,3.44,2.34,5.65v32.43c-1.80-0.62-3.65-1.12-5.56-1.49
      v-5.07h0.06H5.45v52.91c0,0.70,0.28,1.31,0.73,1.76c0.45,0.45,1.09,0.73,1.76,0.73h44.77c0.51,1.90,1.15,3.76,1.92,5.54H7.99
      c-2.20,0-4.20-0.89-5.65-2.34C0.89,101.40,0,99.42,0,97.21V18.39c0-2.20,0.89-4.19,2.34-5.65c1.45-1.45,3.44-2.34,5.65-2.34h9.64
      c1.51,0,2.74,1.23,2.74,2.74c0,1.51-1.23,2.74-2.74,2.74H7.99c-0.70,0-1.31,0.28-1.76,0.73c-0.45,0.45-0.73,1.09-0.73,1.76v20.43
      H5.45z
      M43.13,15.87c-1.51,0-2.74-1.23-2.74-2.74c0-1.51,1.23-2.74,2.74-2.74h18.39c1.51,0,2.74,1.23,2.74,2.74
      c0,1.51-1.23,2.74-2.74,2.74H43.13z"/>
                </g>
            </svg>
        ),
        label: t('booking')
    },
    {
        key: "Users",
        path: "/users",
        icon: (
            <svg 
                className="group-hover:!text-primary shrink-0" 
                width="20" 
                height="20" 
                viewBox="0 0 24 24"
                fill="none" 
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    opacity="0.5"
                />
                <path
                    d="M16.807 19.0112C15.4398 19.9504 13.7841 20.5 12 20.5C10.2159 20.5 8.56023 19.9503 7.193 19.0111C6.58915 18.5963 6.33109 17.8062 6.68219 17.1632C7.41001 15.8302 8.90973 15 12 15C15.0903 15 16.59 15.8303 17.3178 17.1632C17.6689 17.8062 17.4108 18.5964 16.807 19.0112Z"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                />
                <circle
                    cx="12"
                    cy="9"
                    r="3"
                    stroke="currentColor"
                    strokeWidth="1.5"
                />
            </svg>
        ),
        label: t('users')
    },
    {
        key: "Role",
        path: "/role",
        icon: (
            <svg 
                className="group-hover:!text-primary shrink-0"
                xmlns="http://www.w3.org/2000/svg" 
                viewBox="0 0 122.88 117.85" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="10" 
                strokeLinecap="round" 
                strokeLinejoin="round"
                width="20"
                height="20"
            >
                <path d="M108,96.63l12.88,13.06v6.14h-6.09v-4.62h-5.06v-5h-4.83l-1.4-4.55A14.08,14.08,0,0,1,95.63,104a13.32,13.32,0,1,1,13.8-13.31,12.87,12.87,0,0,1-1.47,6ZM95,62.12a27.85,27.85,0,0,1,26.22,37.27l-4.55-4.61a22.2,22.2,0,0,0-39-18.63l-.1.13-.24.31-.12.17-.14.19-.13.18-.13.19-.10.14-.13.19-.12.19-.11.17-.12.20-.07.11-.12.20-.09.15-.12.20-.11.20-.09.18-.11.20-.10.20-.08.17-.10.21-.09.20L74.7,81l-.09.22-.09.21-.07.18-.09.21-.08.22-.07.18-.07.22L74,83l-.11.34-.07.22-.06.23-.06.23-.10.40-.10.45-.06.38v.23v.24v.18v.23v.24v.42v.24v.24v.36v1.30v.67v.42v.54v.28v.25l.07.46.10.48.06.27.07.27.08.26.07.27.08.26.07.22.08.26.07.19.09.26.07.18.09.25.10.26.11.25.07.17.11.26.11.24.12.25.07.15.12.24c.20.40.42.79.64,1.18l.14.24.14.23.14.23.15.22.15.23.08.11c.41.59.84,1.16,1.30,1.71l.18.21.17.20c.23.27.48.52.72.78l.19.19.13.12A22.14,22.14,0,0,0,95,112.18a22.78,22.78,0,0,0,4.70-.50,7.64,7.64,0,0,0,2.73,1.63,7.44,7.44,0,0,0,1.69,3,27.82,27.82,0,0,1-28.82-6.63l-.33-.35a27.29,27.29,0,0,1-2.89-3.53H0C0,74,28.69,85.50,40.31,69.53c1.34-2,1-1.82-.52-3.42a18.41,18.41,0,0,1-1.61-1.93c-3.10-4.25-5.88-9.06-8.68-13.53-2-3-3.09-5.65-3.09-7.78s1.21-4.93,3.62-5.53a120.24,120.24,0,0,1-.21-14,19.64,19.64,0,0,1,.64-3.51,20.30,20.30,0,0,1,9-11.51A23.11,23.11,0,0,1,44.41,6c3.09-1.17,1.60-5.86,5-6,8-.21,21.09,6.61,26.20,12.15a20.15,20.15,0,0,1,5.22,13.10l-.32,12.62a3.94,3.94,0,0,1,2.88,2.87c.42,1.71,0,4-1.49,7.35,0,.11-.11.11-.11.22C78.51,53.73,75.10,60,71.32,65c-1.90,2.53-3.46,2.08-1.84,4.51a19.81,19.81,0,0,0,3.37,3.57,26.52,26.52,0,0,1,2.47-2.82l.35-.32A27.72,27.72,0,0,1,95,62.12ZM93.64,86.39a2.46,2.46,0,1,1-2.46,2.46,2.47,2.47,0,0,1,2.46-2.46Z" />
            </svg>
        ),
        label: t('Roles')
    },
    {
        key: "Reports",
        path: "/reports",
        icon: (
            <svg 
                className="group-hover:!text-primary shrink-0"
                id="Layer_1" 
                data-name="Layer 1" 
                xmlns="http://www.w3.org/2000/svg" 
                viewBox="0 0 97.26 122.88"
                fill="currentColor"
                width="20"
                height="20"
            >
                <path d="M6.47,13H22v8.16h-9a5.53,5.53,0,0,0-5.47,5.46v82.74a5.51,5.51,0,0,0,5.47,5.46H84.32a5.48,5.48,0,0,0,5.46-5.46V26.58a5.51,5.51,0,0,0-5.46-5.46h-9V13H90.79a6.5,6.5,0,0,1,6.47,6.47v97a6.51,6.51,0,0,1-6.47,6.47H6.47A6.5,6.5,0,0,1,0,116.41v-97A6.49,6.49,0,0,1,6.47,13ZM19,34.69H41.54v4.5H19v-4.5ZM19,46.80h14.80v4.5H19V46.80ZM67.57,31.49h4.37A1.49,1.49,0,0,1,73.43,33v5.55H79A1.49,1.49,0,0,1,80.47,40v4.38A1.50,1.50,0,0,1,79,45.87H73.43V51.30a1.49,1.49,0,0,1-1.49,1.48H67.57a1.49,1.49,0,0,1-1.49-1.48V45.87H60.53a1.48,1.48,0,0,1-1.48-1.48V40a1.48,1.48,0,0,1,1.48-1.48h5.55V33a1.49,1.49,0,0,1,1.49-1.49ZM19,99.49H66.20V104H19v-4.50Zm0-13.57h61.50v4.5H19v-4.50Zm0-15.53H35.24l4.26-5.92L44.72,72l5.72-11.17L56.61,72.90l2.80-2.06,1.33-.45H80.46v4.5h-19L55,79.66l-4.58-9-5.14,10-5.86-8.44-1.91,2.65H19v-4.50ZM31,9h7.33A10,10,0,0,1,48,0a10,10,0,0,1,9.71,8.93L66.30,9a1.08,1.08,0,0,1,1.08,1.08V20.47a1.08,1.08,0,0,1-1.08,1.08H31a1.08,1.08,0,0,1-1.08-1.08V10.12A1.06,1.06,0,0,1,31,9Zm13,4.43a7.14,7.14,0,0,0,2.62,2.27,4.80,4.80,0,0,0,2.55,0,7.12,7.12,0,0,0,3.06-3.25,6.10,6.10,0,0,0,.10-1.08,4.38,4.38,0,1,0-8.74,0,5,5,0,0,0,.41,2Z" />
            </svg>
        ),
        label: t('Reports')
    },
    {
        key: "Invoice",
        path: "/invoices",
        icon: (
            <svg 
                className="group-hover:!text-primary shrink-0"
                id="Layer_1" 
                data-name="Layer 1" 
                xmlns="http://www.w3.org/2000/svg" 
                viewBox="0 0 100.23 122.88"
                fill="currentColor"
                width="20"
                height="20"
            >
                <path d="M29.71,8.68h7A9.35,9.35,0,0,1,55.40,8.57l8.24.11a1,1,0,0,1,1,1v9.94a1,1,0,0,1-1,1H29.72a1,1,0,0,1-1-1V9.71a1,1,0,0,1,1-1ZM64,114.45a3.71,3.71,0,0,1,.57,1.94c0,3.58-5.55,6.49-12.38,6.49S39.76,120,39.76,116.39a3.82,3.82,0,0,1,.56-1.94c1.58,2.63,6.27,4.55,11.82,4.55s10.24-1.92,11.81-4.55Zm35.58-3.07a4.60,4.60,0,0,1,.70,2.38c0,4.39-6.80,8-15.17,8s-15.17-3.57-15.17-8a4.64,4.64,0,0,1,.69-2.38c1.93,3.23,7.68,5.58,14.48,5.58s12.55-2.35,14.47-5.58Zm-9-20-.18,2-7.45-.65a6.80,6.80,0,0,1,1.28,2.68l-1.79-.16a6,6,0,0,0-.81-1.75A3.61,3.61,0,0,0,80,92.05l.14-1.60,10.36.90Zm-5.48-3.09c6.88,0,12.46,2.19,12.46,4.89S91.94,98,85.06,98s-12.47-2.20-12.47-4.89,5.58-4.89,12.47-4.89Zm0-1.63c8.37,0,15.17,3.57,15.17,8s-6.80,8-15.17,8-15.17-3.57-15.17-8,6.79-8,15.17-8Zm14.52,15.42a4.51,4.51,0,0,1,.65,2.28c0,4.39-6.80,8-15.17,8s-15.17-3.56-15.17-8a4.47,4.47,0,0,1,.64-2.28c1.87,3.27,7.66,5.67,14.53,5.67s12.65-2.40,14.52-5.67Zm-43-4-.14,1.61-6.08-.53a5.51,5.51,0,0,1,1,2.18L50,101.23a4.59,4.59,0,0,0-.66-1.43,3,3,0,0,0-1.26-1.13l.11-1.31,8.45.74Zm-4.47-2.53c5.62,0,10.17,1.79,10.17,4s-4.55,4-10.17,4S42,101.76,42,99.56s4.55-4,10.17-4Zm0-1.32c6.83,0,12.38,2.91,12.38,6.49s-5.55,6.49-12.38,6.49-12.38-2.91-12.38-6.49,5.54-6.49,12.38-6.49ZM64,106.83a3.81,3.81,0,0,1,.52,1.86c0,3.58-5.55,6.49-12.38,6.49s-12.38-2.91-12.38-6.49a3.68,3.68,0,0,1,.52-1.86c1.53,2.67,6.26,4.63,11.86,4.63s10.33-2,11.86-4.63ZM44.13,28.38h5.10A1.73,1.73,0,0,1,51,30.11v6.45h6.46a1.74,1.74,0,0,1,1.73,1.73v5.09a1.74,1.74,0,0,1-1.73,1.73H51v6.31a1.73,1.73,0,0,1-1.72,1.73h-5.10a1.73,1.73,0,0,1-1.72-1.73V45.11H36a1.74,1.74,0,0,1-1.73-1.73V38.29A1.74,1.74,0,0,1,36,36.56h6.46V30.11a1.72,1.72,0,0,1,1.72-1.73ZM6.21,12.44h14.90v7.83H12.42a5.31,5.31,0,0,0-5.25,5.25v79.41a5.29,5.29,0,0,0,5.25,5.25H33.35a10.43,10.43,0,0,0,.67,2.40,8.40,8.40,0,0,0-.34,1v0a9.72,9.72,0,0,0-.30,4.35H6.21A6.24,6.24,0,0,1,0,111.74V18.65a6.22,6.22,0,0,1,6.21-6.21Zm80,67.70V25.52a5.29,5.29,0,0,0-5.24-5.25H72.26V12.44H87.15a6.24,6.24,0,0,1,6.21,6.21V81.16a32.63,32.63,0,0,0-7.18-1Zm-68-16.72H77v4.32H18.20V63.42Zm.86,26.83H40.69l-.30.15a14.78,14.78,0,0,0-5.07,4.17H19.06V90.25Zm-.86-13H77v3.86c-.55.14-1.09.29-1.61.46H18.20V77.23Zm24-64.30a6.92,6.92,0,0,0,2.51,2.18,4.63,4.63,0,0,0,2.45,0A6.80,6.80,0,0,0,50.12,12a5.73,5.73,0,0,0,.10-1,4.20,4.20,0,1,0-8.38,0,4.79,4.79,0,0,0,.39,1.94Z" />
            </svg>
        ),
        label: t('Invoices'),
    },
    {
        key: "Insurance",
        path: "/insurance",
        icon: (
            <svg 
                className="group-hover:!text-primary shrink-0"
                xmlns="http://www.w3.org/2000/svg" 
                shapeRendering="geometricPrecision" 
                textRendering="geometricPrecision" 
                imageRendering="optimizeQuality" 
                fillRule="evenodd" 
                clipRule="evenodd" 
                viewBox="0 0 512 490.74"
                fill="currentColor"
                width="20"
                height="20"
            >
                <path d="M373.04 440.14c-1.14.24-2.31.24-3.44 0h-93.1v33.58h97.87v-33.58h-1.33zM244.27 72.51h23.46c4.39 0 7.96 3.59 7.96 7.96v29.75h29.75c4.39 0 7.96 3.59 7.96 7.96v23.45c0 4.38-3.59 7.98-7.96 7.98h-29.75v29.06c0 4.39-3.59 7.96-7.96 7.96h-23.46c-4.39 0-7.97-3.59-7.97-7.96v-29.06h-29.75c-4.38 0-7.96-3.6-7.96-7.98v-23.46c0-4.39 3.59-7.96 7.96-7.96h29.75V80.47c0-4.39 3.58-7.96 7.97-7.96zM255.56 0c47.15 29.88 89.74 44.02 126.29 40.68 6.38 129.12-41.3 205.37-125.8 237.19-81.6-29.78-129.87-102.76-126.29-239.15 42.91 2.25 85.01-7.03 125.8-38.72zm.1 18.92c38.81 24.61 79.5 40.72 109.59 37.97 5.26 106.32-39.61 175.85-109.19 202.05-67.19-24.52-112.55-91.35-109.6-203.66 38.99 2.04 78.15-12.23 109.2-36.36zm21.06 404.2h91.31c7.35-7.3 15.36-14.88 23.52-22.6 17.13-16.21 35-33.12 53.39-54.29 21.01-24.19 23.25-32.57 29.6-56.28 1.2-4.46 2.54-9.46 4.3-15.67l10.9-38.37.14-.44c5.82-17.07 6.28-28.35 3.85-34.87-.75-2-1.72-3.32-2.82-4.03-.89-.58-2.02-.8-3.25-.68-2.86.28-6.06 2.1-8.98 5.27l-32.41 77.2c-.3.72-.7 1.38-1.15 1.97-1.93 3.45-4.51 6.85-7.84 10.04l-57.52 64.13c-3.12 3.49-8.48 3.78-11.97.66-3.48-3.12-3.78-8.48-.66-11.97l57.53-64.14c.23-.3.5-.58.78-.85 5.95-5.68 7.84-11.8 6.8-16.24-.33-1.39-.93-2.54-1.77-3.32-.78-.73-1.84-1.21-3.12-1.35-5.12-.53-12.69 3.23-21.89 14.13l-.02-.01c-.25.31-.53.6-.85.87l-22.29 19.68-.11.11c-24.15 22.82-34.49 28.24-53.42 38.14-3.95 2.07-8.31 4.35-13.66 7.27-2.11 1.15-4.2 2.58-6.25 4.12-2.18 1.65-4.23 3.37-6.23 5.05-9.98 8.43-15.23 15.26-18.25 22.81-3.12 7.83-4.26 17.38-5.79 30.47-.62 5.27-1.1 10.51-1.45 15.69-.17 2.56-.31 5.05-.42 7.5zm-41.44 0h-91.3c-7.35-7.3-15.36-14.88-23.52-22.6-17.14-16.21-35.01-33.12-53.4-54.29-21-24.19-23.25-32.57-29.6-56.28-1.2-4.46-2.54-9.46-4.3-15.67l-10.9-38.37-.14-.44c-5.82-17.07-6.28-28.35-3.85-34.87.75-2 1.73-3.32 2.82-4.03.89-.58 2.02-.8 3.26-.68 2.85.28 6.05 2.1 8.97 5.27l32.41 77.2c.3.72.7 1.38 1.16 1.97 1.92 3.45 4.51 6.85 7.84 10.04l57.51 64.13c3.12 3.49 8.48 3.78 11.97.66a8.468 8.468 0 0 0 .66-11.97l-57.52-64.14c-.24-.3-.51-.58-.79-.85-5.95-5.68-7.84-11.8-6.8-16.24.33-1.39.94-2.54 1.77-3.32.78-.73 1.84-1.21 3.12-1.35 5.12-.53 12.7 3.23 21.89 14.13l.02-.01c.25.31.54.6.85.87l22.29 19.68.12.11c24.14 22.82 34.49 28.24 53.42 38.14 3.94 2.07 8.3 4.35 13.66 7.27 2.1 1.15 4.19 2.58 6.24 4.12 2.18 1.65 4.23 3.37 6.23 5.05 9.98 8.43 15.23 15.26 18.25 22.81 3.13 7.83 4.26 17.38 5.79 30.47.62 5.27 1.1 10.51 1.45 15.69.17 2.56.31 5.05.42 7.5zm-96.32 17.02c1.14.24 2.31.24 3.44 0h93.1v33.58h-97.87v-33.58h1.33zm-16.26-14.1a8.44 8.44 0 0 0-2.1 5.59v50.6c0 4.7 3.81 8.51 8.52 8.51h114.89c4.7 0 8.52-3.81 8.52-8.51v-51.07c0-5.41-.36-11.25-.72-16.66-.37-5.54-.87-11.04-1.51-16.5-1.68-14.31-2.91-24.77-6.92-34.79-4.11-10.29-10.76-19.16-23.04-29.53-2.25-1.9-4.56-3.83-6.96-5.64-2.54-1.92-5.28-3.77-8.38-5.45-5-2.73-9.67-5.18-13.92-7.4-17.51-9.16-27.09-14.18-49.63-35.49-.17-.16-.36-.32-.54-.47l-21.75-19.19c-13.28-15.56-26.28-20.69-36.26-19.63h-.04c-4.86.51-9.05 2.41-12.37 5.32l-21.96-52.31-.03.01c-.32-.76-.75-1.48-1.3-2.14C41.13 184 33.41 179.74 26.01 179c-5.03-.49-9.91.58-14.16 3.34-4.05 2.63-7.37 6.72-9.47 12.34-3.65 9.79-3.57 24.98 3.59 46.04l10.83 38.15c1.57 5.52 2.98 10.78 4.23 15.47 7.09 26.47 9.61 35.83 33.21 63 18.69 21.53 37.02 38.87 54.57 55.48 4.66 4.4 9.25 8.75 13.89 13.22zm266.61 0a8.482 8.482 0 0 1 2.09 5.59v50.6c0 4.7-3.81 8.51-8.51 8.51h-114.9c-4.7 0-8.52-3.81-8.52-8.51v-51.07c0-.3.02-.61.05-.9A332.554 332.554 0 0 1 261.7 398c1.68-14.31 2.92-24.77 6.92-34.79 4.11-10.29 10.76-19.16 23.05-29.53 2.24-1.9 4.55-3.83 6.95-5.64 2.54-1.92 5.29-3.77 8.38-5.45 5-2.73 9.67-5.18 13.92-7.4 17.51-9.16 27.09-14.18 49.63-35.49.18-.16.36-.32.54-.47l21.75-19.19c13.28-15.56 26.28-20.69 36.27-19.63h.03c4.86.51 9.05 2.41 12.37 5.32l21.97-52.31.03.01c.31-.76.74-1.48 1.29-2.14 6.07-7.29 13.79-11.55 21.19-12.29 5.03-.49 9.92.58 14.16 3.34 4.06 2.63 7.37 6.72 9.47 12.34 3.66 9.79 3.57 24.98-3.58 46.04l-10.84 38.15c-1.56 5.52-2.98 10.78-4.23 15.47-7.09 26.47-9.6 35.83-33.2 63-18.7 21.53-37.03 38.87-54.58 55.48-4.65 4.4-9.25 8.75-13.88 13.22z" />
            </svg>
        ),
        label: t('Insurance')
    },
    {
        key: "Packages",
        path: "/packages",
        icon: (
            <svg
                className="group-hover:!text-primary shrink-0"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect
                    x="3"
                    y="5"
                    width="18"
                    height="14"
                    rx="2"
                    stroke="currentColor"
                    strokeWidth="1.5"
                />
                <path
                    d="M12 9V15M9 12H15"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                />
            </svg>
        ),
        label: t('Packages')
    },
    ...(isAdmin ? [{
        key: "API Key",
        path: "/settings/api-keys",
        icon: (
            <svg
                className="group-hover:!text-primary shrink-0"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle
                    cx="7"
                    cy="12"
                    r="3"
                    stroke="currentColor"
                    strokeWidth="2"
                    fill="none"
                />
                <path
                    d="M10 12h9v3h-2v2h-2v2h-3"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                />
            </svg>
        ),
        label: t('APIKey'),
    }] : [])
];

    return (
        <div className={semidark ? 'dark' : ''}>
            <nav
                className={`
    sidebar fixed top-0 bottom-0 w-[260px] min-h-screen shadow-md z-50 transition-transform duration-300
    ${semidark ? 'dark:bg-gray-900' : 'bg-white'}
    ${themeConfig.sidebar ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
  `}
            >
                <div className="h-full dark:bg-gray-900">
                    {/* <div className="flex justify-between items-center px-4 py-3 dark:border-b dark:border-gray-700">
                        <NavLink to="/dashboard" className="main-logo flex items-center shrink-0">
                            <img className="w-8 ml-[5px] flex-none" src="/assets/images/ROWellnessSuite .png" alt="logo" />
                            {/* <span className="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle lg:inline dark:text-white-light">RiverOaks</span>  
                        </NavLink>

                        <button
                            type="button"
                            className="collapse-icon w-8 h-8 rounded-full flex items-center hover:bg-gray-500/10 dark:hover:bg-dark-light/10 dark:text-white-light transition duration-300 rtl:rotate-180"
                            onClick={() => dispatch(toggleSidebar())}
                        >
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 m-auto">
                                <path d="M13 19L7 12L13 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                            </svg>
                        </button>
                    </div> */}
                    <div className="flex justify-between items-center px-4 py-3 dark:border-b dark:border-gray-700">
                        <NavLink to="/dashboard" className="main-logo flex items-center shrink-0">
                            <img
                                className="w-40 ml-[5px] flex-none"
                                src={isDarkMode ? "/assets/images/ROWellnessSuitelogolite.png" : "/assets/images/ROWellnessSuitelogo.png"}
                                alt="logo"
                            />
                            {/* <span className="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle lg:inline dark:text-white-light">ROWellnessSuite </span>   */}
                        </NavLink>

                        <button
                            type="button"
                            className="collapse-icon w-8 h-8 rounded-full flex items-center hover:bg-gray-500/10 dark:hover:bg-dark-light/10 dark:text-white-light transition duration-300 rtl:rotate-180"
                            onClick={() => dispatch(toggleSidebar())}
                        >
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                                className="w-5 h-5 m-auto"
                            >
                                <path
                                    d="M13 19L7 12L13 5"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                />
                                <path
                                    opacity="0.5"
                                    d="M16.9998 19L10.9998 12L16.9998 5"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                />
                            </svg>
                        </button>
                    </div>

                    <PerfectScrollbar className="h-[calc(100vh-80px)] relative">
                        <ul className=" sidebarNavItemList relative font-semibold space-y-0.5 p-4 py-0">
                            {menuItems.map((item) => {
                                if (item.key === "Dashboard" || showMenuItem(item.key)) {
                                    if (item.subItems) {
                                        return (
                                            <li key={item.key} className="menu nav-item">
                                                <button
                                                    type="button"
                                                    className={`${currentMenu === item.key ? 'active' : ''} nav-link group w-full hover:bg-[#fdf1d6d4] hover:text-[rgb(14,23,38)]`}
                                                    onClick={() => toggleMenu(item.key)}
                                                >
                                                    <div className="flex items-center">
                                                        {item.icon}
                                                        <span className="ltr:pl-3 rtl:pr-3 text-black dark:text-gray-300 dark:group-hover:text-white">
                                                            {item.label}
                                                        </span>
                                                    </div>
                                                    <div className={currentMenu === item.key ? 'rotate-90' : 'rtl:rotate-180'}>
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M9 5L15 12L9 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                                        </svg>
                                                    </div>
                                                </button>

                                                <AnimateHeight duration={300} height={currentMenu === item.key ? 'auto' : 0}>
                                                    <ul className="sub-menu text-gray-500 dark:text-gray-400">
                                                        {item.subItems.map((subItem) => (
                                                            <li key={subItem.path}>
                                                                <NavLink
                                                                    to={subItem.path}
                                                                    className="dark:hover:text-white"
                                                                >
                                                                    {subItem.label}
                                                                </NavLink>
                                                            </li>
                                                        ))}
                                                    </ul>
                                                </AnimateHeight>
                                            </li>
                                        );
                                    } else {
                                        return (
                                            <li key={item.key} className="nav-item">
                                                <NavLink
                                                    to={item.path}
                                                    className="group"
                                                    activeClassName="active"
                                                >
                                                    <div className="flex items-center">
                                                        {item.icon}
                                                        <span className="ltr:pl-3 rtl:pr-3 text-black dark:text-gray-300 dark:group-hover:text-white">
                                                            {item.label}
                                                        </span>
                                                    </div>
                                                </NavLink>
                                            </li>
                                        );
                                    }
                                }
                                return null;
                            })}
                        </ul>
                    </PerfectScrollbar>
                </div>
            </nav>
        </div>
    );
};

export default Sidebar;