/**
 * @format
 */

import React, {FC} from 'react'
import {Button, Menu, MenuButton, MenuList, MenuItemOption, MenuOptionGroup, Box} from '@chakra-ui/react'
import {OptionListItem} from '../../types/types'
import {ChevronDown, ChevronUp} from 'react-feather'

type SelectDropDownProps = {
  optionList: Array<OptionListItem>
  dropdownWidth: any
  selectedOption: OptionListItem
  onMenuItemClick: (index: number) => void
}

export const SelectDropdown: FC<SelectDropDownProps> = ({
  optionList,
  dropdownWidth,
  selectedOption,
  onMenuItemClick
}) => (
  <Box fontSize={'16px'}>
    <Menu>
      {({isOpen}) => (
        <>
          <MenuButton
            variant={'menu'}
            isActive={isOpen}
            as={Button}
            rightIcon={isOpen ? <ChevronUp opacity={0.2} /> : <ChevronDown opacity={0.2} />}
            width={'100%'}
            fontWeight={'normal'}
            textAlign={'left'}
            fontSize={'16px'}>
            {selectedOption.name}
          </MenuButton>
          <MenuList width={dropdownWidth}>
            <MenuOptionGroup defaultValue={optionList[0].value} type="checkbox">
              {optionList.map((option, index) => (
                <MenuItemOption key={index} icon={null} value={option.value} onClick={() => onMenuItemClick(index)}>
                  {option.name}
                </MenuItemOption>
              ))}
            </MenuOptionGroup>
          </MenuList>
        </>
      )}
    </Menu>
  </Box>
)