import React, { Children, ReactNode, useState } from 'react';
import { AccordionBase, Box, MainButton, Text } from '@nova-hf/ui';

type AccordionItemsProps = {
  sectionTitle?: string;
  expandButtonText?: string;
  closeButtonText?: string;
  itemsShownByDefault?: ReactNode;
  restOfItems?: ReactNode;
};

export const AccordionItems = ({
  sectionTitle,
  expandButtonText,
  closeButtonText,
  itemsShownByDefault,
  restOfItems,
}: AccordionItemsProps) => {
  const [showAllItems, setShowAllItems] = useState(false);

  return (
    <>
      {sectionTitle && (
        <Text variant="h6" marginBottom={4}>
          {sectionTitle}
        </Text>
      )}
      <Box
        display="flex"
        flexDirection={{ sm: 'row', md: 'column' }}
        gap={3}
        overflowX={{ sm: 'scroll' }}
      >
        {itemsShownByDefault}
        <AccordionBase
          isExpanded={showAllItems}
          accordionBody={
            <Box
              display="flex"
              flexDirection={{ sm: 'row', md: 'column' }}
              gap={3}
              overflowX={{ sm: 'scroll' }}
            >
              {restOfItems}
            </Box>
          }
        />
        {!!Children.toArray(restOfItems).length && (
          <MainButton
            colorScheme="white"
            dottedShadow="none"
            text={showAllItems ? closeButtonText ?? 'Sjá minna' : expandButtonText ?? 'Sjá meira'}
            onClick={() => setShowAllItems(!showAllItems)}
          />
        )}
      </Box>
    </>
  );
};