import React from 'react';
import { Box, Grid, Tabs } from '@/atoms';
import { useCurriculumContext } from '../curriculum-context'; 
import SidebarItem from './sidebar-item';

const TAB_LIST = [
  {
    label: '강의 목차',
    value: 'curriculum',
  },
];
export function CurriculumSidebar(): React.ReactNode {
  const { curriculum, selectedIndex, setSelectedIndex, scrollAreaRef, curriculumCompleteMap } =
    useCurriculumContext();
  const list = curriculum.contents.list;
 

  return (
    <Tabs.Root asChild defaultValue={TAB_LIST[0].value}>
      <Grid height="100%" overflowY="auto" rows="auto 1fr " width="100%">
        <Tabs.List style={{ padding: '0 var(--space-3)' }}>
          {TAB_LIST.map((tab) => (
            <Tabs.Trigger key={tab.value} value={tab.value}>
              {tab.label}
            </Tabs.Trigger>
          ))}
        </Tabs.List>
        <Box
          height="100%"
          overflowY="auto"
          position="relative"
          ref={scrollAreaRef}
          width="100%"
        >
          <Tabs.Content
            style={{
              position: 'absolute',
              height: '100%',
              width: '100%',
            }}
            value={TAB_LIST[0].value}
          >
            {list.map((item, index) => (
              <SidebarItem done={curriculumCompleteMap[item.uuid]} index={index} item={item} key={item.uuid} selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} />
            ))}
            <Box height="150px" />
          </Tabs.Content>
        </Box>
      </Grid>
    </Tabs.Root>
  );
}
