import * as React from 'react';
import styled from '@emotion/styled';
import { themeGet } from '@styled-system/theme-get';
import { IconSmallChevronDown as SmallChevronDownBase } from '@lightspeed/flame/Icon/SmallChevronDown';
import BulkButton from './BulkButton';

import BaseDropdown from '../../../components/Dropdown';

const SmallChevronDown = styled(SmallChevronDownBase)`
  margin-left: -${themeGet('space.1')};
`;

interface DropdownProps {
  title: React.ReactNode;
  children: ((props: { toggleOpen: () => void }) => React.ReactNode) | React.ReactNode;
}
export const Dropdown: React.FC<DropdownProps> = ({ title, children, ...restProps }) => (
  <BaseDropdown
    refComponent={({ toggleOpen }) => (
      <BulkButton type="button" {...restProps} onClick={toggleOpen}>
        {title}
        <SmallChevronDown />
      </BulkButton>
    )}
    p={2}
  >
    {children as any}
  </BaseDropdown>
);

export const DropdownList = styled('ul')`
  min-width: 125px;
  padding: ${themeGet('space.1')} 0;
  list-style: none;
  margin: 0;
  li {
    margin: ${themeGet('space.2')} 0;
  }
  li:first-of-type {
    margin-top: 0;
  }
  li:last-of-type {
    margin-bottom: 0;
  }
`;