/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import { Sidebar } from '../Sidebar';
import { LayoutContext } from './LayoutContext';
import { SidebarRecursive } from './LayoutSidebar';
import { Box } from '../../primitives';
import { ToggleColorModeButton } from './LayoutHeader';

const ResponsiveSidebar = ({ ...props }: any) => {
  const {
    sidebarItems,
    isOpenSidebar,
    setIsOpenSidebar,
    Link,
    version,
    router,
    Docsearch,
  } = React.useContext(LayoutContext);

  return (
    <Sidebar
      {...props}
      overflow="scroll"
      display={isOpenSidebar ? 'flex' : 'none'}
      sx={{
        '@lg': {
          display: 'none',
        },
      }}
      width="100%"
      flex={1}
    >
      {Docsearch && (
        <Box
          sx={{
            'display': 'flex',
            '@sm': {
              display: 'none',
            },
            'pl': '$3',
            'mb': '$3',
          }}
        >
          <ToggleColorModeButton />
        </Box>
      )}
      {sidebarItems?.map((sidebarItems: any) => {
        return (
          <SidebarRecursive
            sidebarItem={sidebarItems}
            version={version}
            Link={Link}
            router={router}
            leftIndent={0}
            onPressClose={() => setIsOpenSidebar(!isOpenSidebar)}
          />
        );
      })}
      {/* {sidebarItems.map((sidebar: any) => {
        return (
          <Sidebar.Group key={sidebar.title} mb={36}>
            <Sidebar.GroupHeader width="100%">
              {sidebar.title}
            </Sidebar.GroupHeader>
            {sidebar.pages.map((sidebarPageItems: any) => {
              console.log(sidebarPageItems, 'sidebarPageItems');

              return (
                <Sidebar.GroupItem
                  key={sidebarPageItems.title}
                  width="100%"
                  onPress={() => setIsOpenSidebar(!isOpenSidebar)}
                >
                  <Link
                    href={`${sidebarPageItems.id}`}
                    style={{ textDecoration: 'none' }}
                  >
                    <Sidebar.GroupItemContent>
                      <Sidebar.GroupItemText>
                        {sidebarPageItems.title}
                      </Sidebar.GroupItemText>
                    </Sidebar.GroupItemContent>
                  </Link>
                </Sidebar.GroupItem>
              );
            })}
          </Sidebar.Group>
        );
      })} */}
    </Sidebar>
  );
};

export default ResponsiveSidebar;
