import {
  AccordionButton,
  AccordionButtonProps,
  ComponentWithAs,
  forwardRef,
  useColorMode,
} from '@chakra-ui/react';
import React, { useContext } from 'react';

import { theme } from '../../modules/theme';

import { NumberedAccordionItemContext } from './context';

type Props = AccordionButtonProps & {
  icon: React.ReactNode;
};

export const NumberedAccordionButton: ComponentWithAs<'button', Props> = forwardRef<
  Props,
  'button'
>(({ icon, children, ...otherProps }, ref) => {
  const { colorMode } = useColorMode();

  const { isExpanded } = useContext(NumberedAccordionItemContext);

  return (
    <AccordionButton
      ref={ref}
      w="100%"
      display="flex"
      alignItems="center"
      px={{ base: theme.sizes['5'], md: theme.sizes['6'] }}
      pt={theme.sizes['4']}
      pb={isExpanded ? theme.sizes['2'] : theme.sizes['4']}
      transition="padding 0.2s linear"
      _hover={{
        ...(!isExpanded && {
          bg: { lg: theme.colors[colorMode].layer[2].hover },
          // Hide dividers on hover.
          outline: { lg: `${theme.sizes['1']} solid ${theme.colors[colorMode].layer[2].hover}` },
          outlineOffset: { lg: theme.sizes['0'] },
        }),
      }}
      sx={{
        svg: {
          fontSize: { base: theme.sizes['6'], md: theme.sizes['8'] },
          color: theme.colors[colorMode].text.primary,
        },
      }}
      {...otherProps}
    >
      {children}
      {icon}
    </AccordionButton>
  );
});