import { HStack, Image, Text, VStack } from "@chakra-ui/react";
import React, { FC } from "react";
import { RiNotificationLine } from "react-icons/ri";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { nav } from "../Routes/Nav";
import logo from '../assets/logo.svg';
import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
import { Avatar } from "../components/ui/avatar";

const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
  const navigate = useNavigate()
  const location = useLocation()




  return (
    <HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={2}>
    
      <VStack  zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%"  >
        <HStack w={'100%'} p={3} h={'6.5%'} justifyContent={'center'}>
          <Image w={55} src={logo} />
        </HStack>
        <VStack w={'100%'} p={3}>
          {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
            <NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
            <AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
              <AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
                <AccordionItemTrigger color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
                {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild  ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
              </AccordionItem>
            </AccordionRoot>)}
        </VStack>
      </VStack>
      <VStack gap={0} h="100%" w="85%" >
        <HStack h={'6%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
          <RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} />
          <HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
            <Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
            <VStack color={'#013e3e'} gap={0} alignItems={'flex-start'}>
              <Text fontSize={'sm'} fontWeight={'bold'}>Ritesh Pandey</Text>
              <Text fontSize={'xs'} >ritesh.pandey@wdimails.com</Text>
            </VStack>
          </HStack>
        </HStack>
        {children}
      </VStack>
    </HStack>
  );
};

export default DefaultLayout;