// @flow strict

import * as React from 'react';

import type {ColorTypes} from '../../types/typography';
import classify from '../../utils/classify';
import {UnstyledButton} from '../Button';
import {TEXT_COLORS} from '../Text';

import type {IconProps, IconSize, IconType} from './';
import {Icon} from './';

import css from './ClickableIcon.module.css';


export const ClickableIcon: React$AbstractComponent<
  IconProps,
  HTMLButtonElement,
> = React.forwardRef<IconProps, HTMLButtonElement>(
  (
    {size = 'medium', className, ariaLabel, onClick, ...props}: IconProps,
    ref,
  ) => {
    const onKeyDownHandler = (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        onClick && onClick(e);
      }
    };
    return (
      <UnstyledButton
        {...props}
        onClick={onClick}
        onKeyDown={onKeyDownHandler}
        ariaLabel={ariaLabel}
        className={classify(
          css.button,
          {
            [css.small]: size === 'small',
            [css.medium]: size === 'medium',
          },
          className,
        )}
        ref={ref}
      >
        <Icon size={size} {...props} />
      </UnstyledButton>
    );
  },
);

export type CloseIconProps = {
  size?: IconSize,
  type?: IconType,
  color?: ColorTypes,
  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  className?: string,
  ariaLabel?: string,
};

export const CloseIcon: React$AbstractComponent<
  CloseIconProps,
  HTMLButtonElement,
> = React.forwardRef<CloseIconProps, HTMLButtonElement>(
  (
    {
      size = 'medium',
      type = 'regular',
      color = TEXT_COLORS.primary,
      ...props
    }: CloseIconProps,
    ref,
  ) => (
    <ClickableIcon
      name="close"
      size={size}
      type={type}
      color={color}
      {...props}
      ref={ref}
    />
  ),
);