import React from 'react';
import {useSelect} from 'downshift';
import {DropdownButton, DropdownContainer, DropdownItem, DropdownList} from './styles';

interface DropdownProps {
  defaultValue: string;
  handleSelectChange: (arg0: any) => void;
  items: string[];
  full?: boolean;
  half?: boolean;
}

export const DropdownSelect: React.FC<DropdownProps> = ({
  defaultValue,
  handleSelectChange,
  items,
  full,
  half,
}): JSX.Element => {
  const {isOpen, selectedItem, getToggleButtonProps, getMenuProps, getItemProps} = useSelect({
    items,
    onSelectedItemChange: handleSelectChange,
    defaultSelectedItem: defaultValue,
    id: 'dropdownSelect',
  });

  return (
    <DropdownContainer half={half}>
      <DropdownButton type="button" {...getToggleButtonProps()} full={full} half={half}>
        {selectedItem || defaultValue}
      </DropdownButton>
      <DropdownList {...getMenuProps()} isOpen={isOpen} full={full} half={half}>
        {isOpen &&
          items.map(
            (item, index) =>
              item !== selectedItem && (
                <DropdownItem key={`${item}${index}`} {...getItemProps({item, index})} full={full}>
                  {item}
                </DropdownItem>
              )
          )}
      </DropdownList>
    </DropdownContainer>
  );
};