import React, { useState } from 'react';

import { Box } from '../../atoms/Box/Box';
import { Pressable, PressableProps } from '../../atoms/Pressable/Pressable';
import { Typography, TypographyProps } from '../../atoms/Typography/Typography';
import { ColorsWithHue } from '../../../theme/primitives/colors';
import { composeEvents } from '../../../utils/composeEvents';

type PressableButton = Omit<PressableProps, 'backgroundColor' | 'bgColor'>;

export interface ButtonProps extends PressableButton {
  text: string;
  textProps?: Omit<TypographyProps, 'children'>;
  /**
   * Supported only on the Web platform
   */
  bgActive?: ColorsWithHue;
  leadingIcon?: React.ReactNode;
}

export const Button = ({
  text,
  disabled,
  opacity,
  textProps,
  leadingIcon,
  bg = 'indigo.500',
  bgActive = 'indigo.600',
  onPressIn,
  onPressOut,
  onHoverIn,
  onHoverOut,
  ...rest
}: ButtonProps) => {
  const [isActive, setIsActive] = useState(false);

  const toggleState = () => setIsActive((state) => !state);

  return (
    <Pressable
      shadow={3}
      rounded="md"
      px="md"
      minH="36px"
      accessible
      accessibilityRole="button"
      flexDirection="row"
      alignItems="center"
      justifyContent="center"
      disabled={disabled}
      opacity={disabled ? 0.6 : opacity}
      bg={isActive ? bgActive : bg}
      onPressIn={composeEvents(onPressIn, toggleState)}
      onPressOut={composeEvents(onPressOut, toggleState)}
      onHoverIn={composeEvents(onHoverIn, toggleState)}
      onHoverOut={composeEvents(onHoverOut, toggleState)}
      {...rest}
    >
      {Boolean(leadingIcon) && <Box mr="xxs">{leadingIcon}</Box>}
      <Typography
        selectable={false}
        color="white"
        variant="button"
        {...textProps}
      >
        {text}
      </Typography>
    </Pressable>
  );
};