import styled from '@emotion/styled';
import { HtmlHTMLAttributes, ReactNode, useRef } from 'react';
import DropdownContainer from '~/components/common/dropdown/dropdown_container';
import DropdownLabel from '~/components/common/dropdown/dropdown_label';
import useClickOutside from '~/hooks/use_click_outside';
import useToggle from '~/hooks/use_modal';
import useShortcut from '~/hooks/use_shortcut';

const DropdownStyle = styled.div<{ opened: boolean; svgSize?: number }>(
  ({ opened, theme, svgSize = 24 }) => ({
    cursor: 'pointer',
    userSelect: 'none',
    position: 'relative',
    minWidth: 'fit-content',
    width: 'fit-content',
    maxWidth: '250px',
    backgroundColor: opened ? theme.colors.secondary : theme.colors.background,
    padding: '4px',
    borderRadius: theme.border.radius,

    '&:hover': {
      backgroundColor: theme.colors.secondary,
    },

    '& svg': {
      height: `${svgSize}px`,
      width: `${svgSize}px`,
    },
  })
);

export default function Dropdown({
  children,
  label,
  className,
  svgSize,
  onClick,
}: HtmlHTMLAttributes<HTMLDivElement> & {
  label: ReactNode | string;
  className?: string;
  svgSize?: number;
}) {
  const dropdownRef = useRef<HTMLDivElement>(null);
  const { isShowing, toggle, close } = useToggle();

  useClickOutside(dropdownRef, close);
  useShortcut('ESCAPE_KEY', close, { disableGlobalCheck: true });

  return (
    <DropdownStyle
      opened={isShowing}
      onClick={(event) => {
        onClick?.(event);
        toggle();
      }}
      ref={dropdownRef}
      className={className}
      svgSize={svgSize}
    >
      <DropdownLabel>{label}</DropdownLabel>
      <DropdownContainer show={isShowing}>{children}</DropdownContainer>
    </DropdownStyle>
  );
}
