import React from 'react';
import {
  PressableProps as RNPressableProps,
  PressableStateCallbackType,
  StyleSheet,
} from 'react-native';

import { useShadowStyle } from '../../../hooks/useShadowStyle';
import { Elevation } from '../../../utils/generateShadow';
import { StyledPressable, StyledPressableProps } from './Pressable.styles';

export interface PressableProps extends StyledPressableProps, RNPressableProps {
  /**
   * Based on Android elevation (numbers between 0 and 9)
   */
  shadow?: Elevation;
  /**
   * Supported only on the Web platform
   */
  onHoverIn?: (event: PointerEvent) => void;
  /**
   * Supported only on the Web platform
   */
  onHoverOut?: (event: PointerEvent) => void;
}

export const Pressable = ({
  style,
  shadow,
  children,
  ...rest
}: PressableProps) => {
  const shadowStyle = useShadowStyle(shadow);

  const resolveStyleFunction = (styleProps: PressableStateCallbackType) => {
    if (typeof style === 'function') {
      const newStyle = StyleSheet.flatten(style(styleProps));
      StyleSheet.flatten(newStyle);
      return [shadowStyle, newStyle];
    }

    return [shadowStyle, style];
  };

  return (
    <StyledPressable style={resolveStyleFunction} {...rest}>
      {children}
    </StyledPressable>
  );
};