/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import { Breadcrumbs } from '../Breadcrumbs';
import { Sidebar } from '../Sidebar';

import { LayoutContext } from './LayoutContext';

export const SidebarRecursive = ({
  sidebarItem,
  version,
  Link,
  router,
  leftIndent,
  onPressClose,
}: any) => {
  if (sidebarItem?.type === 'heading') {
    return (
      <Sidebar.Group key={sidebarItem.title} ml={`$${leftIndent}`} mb={36}>
        <Sidebar.GroupHeader>{sidebarItem.title}</Sidebar.GroupHeader>
        {sidebarItem?.pages?.map((sidebarPageItems: any) => {
          // const isActiveRoute = router?.route.includes(sidebarPageItems.id);
          // console.log('isActiveRoute', isActiveRoute, router?.route);
          return (
            <SidebarRecursive
              sidebarItem={sidebarPageItems}
              version={version}
              Link={Link}
              router={router}
              leftIndent={leftIndent + 2}
              onPressClose={onPressClose}
            />
          );
        })}
      </Sidebar.Group>
    );
  }
  return (
    <SidebarNodeItem
      sidebarItem={sidebarItem}
      Link={Link}
      router={router}
      onPressClose={onPressClose}
    />
  );
};

const SidebarNodeItem = ({ sidebarItem, Link, router, onPressClose }: any) => {
  let sidebarItemTag = sidebarItem?.metaData?.tag;
  // let sidebarItemTagText;
  // if (sidebarItemTag) {
  //   sidebarItemTagText = sidebarItemTag.toString();
  //   sidebarItemTagText =
  //     sidebarItemTagText.charAt(0).toUpperCase() + sidebarItemTagText.slice(1);
  // }

  const isActiveRoute = router?.route === sidebarItem.id;
  return (
    <Sidebar.GroupItem
      key={sidebarItem.title}
      sx={{
        bg: isActiveRoute ? '$primary100_alpha_50' : 'transparent',
        _light: {
          ':hover': {
            bg: '$primary100_alpha_30',
          },
        },
        _dark: {
          'bg': isActiveRoute ? '$primary600_alpha_50' : undefined,
          ':hover': {
            bg: '$primary600_alpha_30',
          },
        },
      }}
      onPress={onPressClose}
      focusable={false}
    >
      <Link
        href={`${sidebarItem.id}`}
        passHref
        style={{
          width: '100%',
          height: '100%',
          textDecoration: 'none',
        }}
      >
        <Sidebar.GroupItemContent>
          <Sidebar.GroupItemText>{sidebarItem.title}</Sidebar.GroupItemText>
          {sidebarItemTag && (
            <Sidebar.GroupItemTag variant={sidebarItemTag}>
              <Sidebar.GroupItemTagText>
                {sidebarItemTag}
              </Sidebar.GroupItemTagText>
            </Sidebar.GroupItemTag>
          )}
        </Sidebar.GroupItemContent>
      </Link>
    </Sidebar.GroupItem>
  );
};

export const LayoutSidebar = ({ fluidLayout, ...props }: any) => {
  const {
    sidebarItems: sidebars,
    version,
    Link,
    router,
  } = React.useContext(LayoutContext);

  const [hover, setHover] = React.useState(false);
  return (
    <Sidebar
      position="fixed"
      w="250px"
      pr="$3"
      {...props}
      borderColor="$borderLight200"
      borderRightWidth={1}
      sx={{
        'zIndex': 1,
        '@lg': {
          pl: fluidLayout ? '$1' : '$1',
        },
        '@xl': {
          pl: fluidLayout ? '$1' : '$1',
        },
        '_dark': {
          borderColor: '$borderDark800',
        },
      }}
      pt={24}
      style={{
        overflowY: hover ? 'scroll' : 'hidden',
        scrollbarGutter: 'stable',
        // height: `calc(100% - 64px);`,  //not working on next routing
        height: '94vh',
      }}
      onMouseOver={() => {
        if (!hover) {
          setHover(true);
        }
      }}
      onMouseLeave={() => {
        setHover(false);
      }}
      // onHoverIn={() => {
      //   console.log('hello world');
      // }}
    >
      <Breadcrumbs />
      {sidebars?.map((sidebarItems: any) => {
        return (
          <SidebarRecursive
            sidebarItem={sidebarItems}
            version={version}
            Link={Link}
            router={router}
            leftIndent={0}
          />
        );
      })}
    </Sidebar>
  );
};
