import React, { useState } from 'react';
import { Box, Icon, MainColorType, Text, ThemeColorType } from '@nova-hf/ui';

type ItemProps = {
  isActive?: boolean;
  onClick: () => void;
  text: string;
};
export type DropdownProps = {
  items: ItemProps[];
  buttonText: string;
  color?: MainColorType;
  hiddenLabel?: string;
  isDisabled?: boolean;
  textColor?: ThemeColorType;
};

const Dropdown = ({
  items,
  buttonText,
  color,
  hiddenLabel = 'select',
  isDisabled,
  textColor = 'black100',
}: DropdownProps) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <Box position="relative" width="100%">
      <Box
        display="flex"
        width="100%"
        justifyContent={'space-between'}
        gap={1}
        renderAs="button"
        disabled={isDisabled}
        boxShadow={{ focusVisible: 'focused' }}
        padding={3}
        borderStyle="solid"
        borderWidth="1px"
        borderColor="grey500"
        style={{
          borderRadius: '16px',
        }}
        aria-label={hiddenLabel}
        onClick={() => setIsOpen(!isOpen)}
      >
        <Text
          variant="pMediumBold"
          color={textColor ? textColor : isDisabled ? 'grey300' : 'black100'}
        >
          {buttonText}
        </Text>
        <Icon icon="arrowDown" color={isDisabled ? 'grey300' : color ?? 'pink'} />
      </Box>
      {isOpen && (
        <Box
          position="absolute"
          display="flex"
          flexDirection="column"
          maxHeight={70}
          backgroundColor="white"
          width="100%"
          boxShadow="normal"
          padding={2}
          overflowY="scroll"
          zIndex="tooltip"
        >
          {items.map((items) => (
            <Box
              aria-selected={items.isActive}
              renderAs="button"
              key={items.text.replace(' ', '')}
              onClick={items.onClick}
              paddingY={2}
            >
              <Text variant="pMediumBold" color={items.isActive ? 'pink' : 'black100'}>
                {items.text}
              </Text>
            </Box>
          ))}
        </Box>
      )}
    </Box>
  );
};

/*


*/

export default Dropdown;