import { useState } from 'react';

import { Stack, useTheme } from '@mui/material';

import { Title } from '../../design-system/Title';

import SubSidebarAccordions from './components/Accordions';
import SubSidebarCollapsibleHeader from './components/CollapsibleHeader';
import SubSidebarSections from './components/Sections';
import {
  type ClickEvent,
  type OnClick,
  type SubSidebarProps,
  type SubSidebarValue,
} from './types';

const MIN_SIDEBAR_WIDTH = 72;
const MAX_SIDEBAR_WIDTH = 280;

export const SubSidebar = ({
  id = 'subSidebar',
  sx,
  title,
  sections,
  value,
  onChange,
  onCollapse,
  accordionSections,
  isCollapsed = false,
  isCollapsible = false,
  isLoading = false,
  defaultOpenAccordions = [],
}: SubSidebarProps) => {
  const { palette, transitions } = useTheme();
  const [internalCollapsed, setInternalCollapsed] = useState(isCollapsed);

  const isControlled = onCollapse !== undefined;
  const collapsed = isControlled ? isCollapsed : internalCollapsed;

  const handleClickItem =
    (newValue: SubSidebarValue, onClick?: OnClick) => (event: ClickEvent) => {
      onClick?.(newValue, event);
      onChange?.(newValue, event);
    };

  return (
    <Stack
      id={id}
      sx={{
        height: '100%',
        overflow: 'auto',
        overflowX: 'hidden',
        width: '100%',
        minWidth: collapsed ? MIN_SIDEBAR_WIDTH : MAX_SIDEBAR_WIDTH,
        maxWidth: collapsed ? MIN_SIDEBAR_WIDTH : MAX_SIDEBAR_WIDTH,
        backgroundColor: palette.new.background.elements.default,
        transition: transitions.create(['min-width', 'max-width'], {
          duration: transitions.duration.standard,
          easing: transitions.easing.easeInOut,
        }),
        ...(!isCollapsible && {
          p: 2,
          gap: 3,
        }),
        ...sx,
      }}
    >
      {title && (
        <Title
          variant="L"
          title={title}
        />
      )}
      {isCollapsible && (
        <SubSidebarCollapsibleHeader
          isControlled={isControlled}
          collapsed={collapsed}
          onCollapse={onCollapse}
          setInternalCollapsed={setInternalCollapsed}
        />
      )}
      <SubSidebarSections
        id={id}
        value={value}
        sections={sections}
        handleClickItem={handleClickItem}
      />
      <SubSidebarAccordions
        id={id}
        isLoading={isLoading}
        isCollapsed={collapsed}
        accordionSections={accordionSections}
        handleClickItem={handleClickItem}
        defaultOpenAccordions={defaultOpenAccordions}
      />
    </Stack>
  );
};

export default SubSidebar;