import { SymbolView, type SymbolViewProps } from 'expo-symbols';
import { Pressable, StyleSheet, Text, type ViewStyle } from 'react-native';

import { Fonts, Spacing } from '@/constants/theme';
import { selectionHaptic } from '@/lib/haptics';

const ROUNDED = Fonts?.rounded;

export type PopButtonProps = {
  label: string;
  symbol?: SymbolViewProps['name'];
  background: string;
  textColor: string;
  shadowColor: string;
  borderColor: string;
  disabled?: boolean;
  onPress: () => void;
  style?: ViewStyle;
  size?: 'lg' | 'md';
};

/**
 * The Pop brand's signature button: thick border, hard offset shadow that
 * collapses on press so the button physically "presses into" the page.
 */
export function PopButton({
  label,
  symbol,
  background,
  textColor,
  shadowColor,
  borderColor,
  disabled,
  onPress,
  style,
  size = 'lg',
}: PopButtonProps) {
  const rest = size === 'lg' ? `5px 6px 0 ${shadowColor}` : `4px 5px 0 ${shadowColor}`;
  const pressed = `2px 2px 0 ${shadowColor}`;

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      disabled={disabled}
      onPressIn={selectionHaptic}
      onPress={onPress}
      style={({ pressed: isPressed }) => [
        styles.button,
        size === 'md' && styles.buttonMd,
        {
          backgroundColor: background,
          borderColor,
          boxShadow: isPressed ? pressed : rest,
          transform: isPressed ? [{ translateX: 3 }, { translateY: 4 }] : [],
        },
        disabled && styles.disabled,
        style,
      ]}>
      {symbol ? (
        <SymbolView name={symbol} size={size === 'lg' ? 18 : 16} tintColor={textColor} weight="bold" fallback={null} />
      ) : null}
      <Text style={[styles.label, size === 'md' && styles.labelMd, { color: textColor }]}>{label}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    height: 62,
    borderRadius: 18,
    borderWidth: 3,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: Spacing.two,
    paddingHorizontal: Spacing.three,
  },
  buttonMd: {
    height: 52,
    borderRadius: 16,
    borderWidth: 2.5,
  },
  disabled: {
    opacity: 0.4,
  },
  label: {
    fontFamily: ROUNDED,
    fontSize: 20,
    fontWeight: '800',
  },
  labelMd: {
    fontSize: 17,
  },
});
