import type {StyleProp, ViewStyle} from 'react-native';
import {Pressable, StyleSheet, Text, View} from 'react-native';
import type {ActionSheet, ValidTheme} from '../../types/actionSheetTypes';
import {renderIcon} from '../../helpers/renderIcon';

type Props = {
  action: ActionSheet;
  backgroundColor: string;
  marginTop?: number;
  radius?: 'all' | 'top' | 'bottom' | 'none';
  showIconOnIos?: boolean;
  style?: StyleProp<ViewStyle>;
  textColor?: string;
  theme: ValidTheme;
  testID?: string;
};

export const ActionSheetButton = ({
  action,
  backgroundColor,
  marginTop,
  radius = 'none',
  showIconOnIos,
  style,
  testID,
  textColor,
  theme,
}: Props) => {
  const isIos = theme === 'cupertino';

  const {text, icon, iconColor, textStyle, onPress} = action;

  // Derived directly so the first render already has rounded corners.
  const border = (): StyleProp<ViewStyle> => {
    if (!isIos) {
      return {};
    }

    if (radius === 'all') {
      return {
        borderRadius: 10,
      };
    }

    if (radius === 'top') {
      return {
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10,
      };
    }

    if (radius === 'bottom') {
      return {
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10,
      };
    }

    return {};
  };

  const edges = border();

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={text}
      testID={testID}
      onPress={onPress}
      style={[
        styles.buttonContainer,
        {
          justifyContent: theme === 'cupertino' ? 'center' : 'flex-start',
          backgroundColor,
          marginTop,
        },
        edges,
        style,
      ]}>
      {(!isIos || showIconOnIos) && !!icon && (
        <View style={isIos && styles.cupertinoIcon}>
          {renderIcon(icon, {
            size: 18,
            color: iconColor ?? (theme === 'cupertino' ? textColor : '#757575'),
          })}
        </View>
      )}
      <Text style={[{color: textColor, fontWeight: '500'}, textStyle]}>
        {text}
      </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    padding: 10,
    flexDirection: 'row',
    gap: 25,
  },
  cupertinoIcon: {
    position: 'absolute',
    alignSelf: 'center',
    left: 15,
  },
});