import * as React from 'react';

import { Box } from '@lightspeed/flame/Core';
import { Button } from '@lightspeed/flame/Button';
import { IconSmallChevronDown } from '@lightspeed/flame/Icon/SmallChevronDown';
import { FilterContext } from './FilterContext';
import Dropdown from '../Dropdown';

interface Props {
  dropdownDisabled?: boolean;
  dropdownButtonText?: string;
  dropdownWidth?: string;
  renderDropdown?: React.ReactNode | ((props: { closeDropdown: () => void }) => React.ReactNode);
}
const DropdownMenu: React.FC<Props> = ({
  dropdownDisabled,
  dropdownButtonText = 'Filters',
  dropdownWidth = '300px',
  renderDropdown,
}) => {
  const { goBack, renderDropdownContent } = React.useContext(FilterContext);

  const nextRenderDropdownContent = renderDropdown || renderDropdownContent;
  // There is some craptacular div soup going on here.
  // Need to redo Dropdown + Popover to remove that zany nesting
  return (
    <div className="cr-table-search-bar-dropdown">
      <Dropdown
        refComponent={({ toggleOpen }) => (
          <Button
            type="button"
            disabled={dropdownDisabled}
            onClick={() => {
              goBack();
              toggleOpen();
            }}
          >
            {dropdownButtonText}
            <IconSmallChevronDown />
          </Button>
        )}
      >
        {({ toggleOpen }) => (
          <Box width={dropdownWidth}>
            {typeof nextRenderDropdownContent === 'function'
              ? nextRenderDropdownContent({ closeDropdown: toggleOpen })
              : nextRenderDropdownContent}
          </Box>
        )}
      </Dropdown>
    </div>
  );
};

export { DropdownMenu };