import _Popover from 'reakit/Popover';

import styled, { space, theme } from '../styled';
import Button from '../Button';
import { PopoverCloseProps } from './PopoverClose';
import { PopoverToggleProps } from './PopoverToggle';
import { PopoverShowProps } from './PopoverShow';
import { PopoverHideProps } from './PopoverHide';
import { PopoverPopoverProps } from './PopoverPopover';

export const PopoverHide = styled(_Popover.Hide)<PopoverHideProps>`
  ${theme('fannypack.Popover.Hide.base')};
`;

export const PopoverShow = styled(_Popover.Show)<PopoverShowProps>`
  ${theme('fannypack.Popover.Show.base')};
`;

export const PopoverToggle = styled(_Popover.Toggle)<PopoverToggleProps>`
  ${theme('fannypack.Popover.Toggle.base')};
`;

export const PopoverClose = styled(Button)<PopoverCloseProps>`
  position: absolute;
  width: 24px;
  min-height: 24px;
  right: 0;
  top: 0;
  padding: 0px;
  text-align: right;

  ${theme('fannypack.Popover.Close.base')};
`;

export const Popover = styled(_Popover)<PopoverPopoverProps>`
  display: block;
  padding: ${space(5)}rem;

  ${theme('fannypack.Popover.base')};
`;

export default Popover;