import React, { useCallback } from 'react';
import { Box, Grid, Heading, IconButton, Typo } from '@/atoms';
import { ChevronLeftIcon, ChevronRightIcon } from '@/icon';
import { useCurriculumContext } from './curriculum-context';

export function CurriculumSubNav(): React.ReactNode {
  const {
    selectedItem,
    selectedSectionTitle,
    hasPrev,
    hasNext,
    selectPrev,
    selectNext,
    scrollNavItem,
  } = useCurriculumContext();

  const onClickPrev = useCallback(() => {
    selectPrev((moveIndex) => {
      scrollNavItem(moveIndex.toString());
    });
  }, [selectPrev, scrollNavItem]);

  const onClickNext = useCallback(() => {
    selectNext((moveIndex) => {
      scrollNavItem(moveIndex.toString());
    });
  }, [selectNext, scrollNavItem]);

  return (
    <Grid
      align="center"
      columns={{ initial: '32px 1fr 32px', md: '48px 1fr 48px' }}
      pb={{ initial: '2', md: '3' }}
      px={{ initial: '1', md: '2' }}
      py="2"
      rows="auto"
    >
      {hasPrev ? (
        <IconButton
          color="gray"
          onClick={onClickPrev}
          size={{ initial: '3', md: '4' }}
          variant="ghost"
        >
          <ChevronLeftIcon height="16px" width="16px" />
        </IconButton>
      ) : (
        <Box />
      )}
      <Box width="100%">
        {/* 데스크탑 타이틀 */}
        <Box display={{ initial: 'none', md: 'block' }}>
          <Heading style={{ textOverflow: 'ellipsis' }} variant="heading5">
            {selectedItem.title}
          </Heading>
        </Box>

        {/* 모바일 타이틀 */}
        <Box display={{ initial: 'block', md: 'none' }}>
          <Typo weight="bold">{selectedItem.title}</Typo>
        </Box>

        <Typo as="p" color="gray" mt="1" style={{ textOverflow: 'ellipsis' }} variant='caption'>
          {selectedSectionTitle?.title}
        </Typo>
      </Box>
      {hasNext ? (
        <IconButton
          color="gray"
          onClick={onClickNext}
          size={{ initial: '3', md: '4' }}
          variant="ghost"
        >
          <ChevronRightIcon height="16px" width="16px" />
        </IconButton>
      ) : (
        <Box />
      )}
    </Grid>
  );
}
