import { useTranslation } from 'react-i18next';

import HumandLogo from '@design-system/HumandLogo';
import { Divider, Stack, Typography, useTheme } from '@mui/material';
import { IconHeart } from '@tabler/icons-react';

import NavSection from './components/NavSection';
import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH } from './constants';
import { type SidebarProps } from './types';

const Sidebar = (props: SidebarProps) => {
  const {
    isCollapsed,
    sections,
    pathname,
    openMenu,
    customNavSection: CustomNavSection,
    sx,
  } = props;
  const { t } = useTranslation('material_hu_only');
  const theme = useTheme();

  return (
    <Stack
      sx={{
        minHeight: '100%',
        overflowX: 'hidden',
        overflowY: 'auto',
        maxWidth: isCollapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH,
        px: 2,
        py: 1.5,
        justifyContent: 'space-between',
        gap: 1.5,
        backgroundColor: theme.palette.new.background.layout.tertiary,
        ...sx,
      }}
    >
      {sections &&
        sections.map(section => (
          <NavSection
            key={section.key}
            pathname={pathname}
            openMenu={openMenu}
            isCollapsed={isCollapsed}
            items={section.items}
            title={section.title}
          />
        ))}
      {CustomNavSection}
      {!isCollapsed && (
        <Stack>
          <Divider />
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              flexWrap: 'wrap',
              gap: 0.5,
              px: 1,
              py: 1.5,
            }}
          >
            <IconHeart
              color={theme.palette.new.text.neutral.lighter}
              size={16}
            />
            <Typography
              variant="globalXS"
              color={theme.palette.new.text.neutral.lighter}
              sx={{ flexShrink: 0 }}
            >
              {t('sidebar.built_with_love_by')}
            </Typography>
            <HumandLogo
              title={t('sidebar.humand_logo_alt')}
              style={{
                height: 12,
                margin: '0 2px',
                transform: 'translateY(-1px)',
              }}
            />
          </Stack>
        </Stack>
      )}
    </Stack>
  );
};

export type { SidebarProps };

export default Sidebar;