import React from 'react';
import { Button } from '@tamagui/button';
import { Camera } from 'lucide-react';
import { useGuestThemeVariant } from '../lib/guestTheme';

type FloatingActionButtonProps = {
  onPress: () => void;
  onLongPress?: () => void;
  hidden?: boolean;
  inline?: boolean;
};

export default function FloatingActionButton({ onPress, onLongPress, hidden = false, inline = false }: FloatingActionButtonProps) {
  const longPressTriggered = React.useRef(false);
  const { isDark } = useGuestThemeVariant();
  const translateValue = inline
    ? 'none'
    : hidden
      ? 'translateX(-50%) translateY(36px) scale(0.72)'
      : 'translateX(-50%)';

  return (
    <Button
      onPress={() => {
        if (longPressTriggered.current) {
          longPressTriggered.current = false;
          return;
        }
        onPress();
      }}
      onPressIn={() => {
        longPressTriggered.current = false;
      }}
      onLongPress={() => {
        if (!onLongPress) {
          return;
        }
        longPressTriggered.current = true;
        onLongPress();
      }}
      position={inline ? 'relative' : 'fixed'}
      bottom={inline ? undefined : 20}
      left={inline ? undefined : '50%'}
      zIndex={1100}
      width={76}
      height={76}
      borderRadius={999}
      backgroundColor="$primary"
      borderWidth={0}
      elevation={4}
      shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
      shadowOpacity={0.5}
      shadowRadius={22}
      shadowOffset={{ width: 0, height: 10 }}
      opacity={hidden ? 0 : 1}
      pointerEvents={hidden ? 'none' : 'auto'}
      style={{
        transform: translateValue,
        transition: inline ? undefined : 'transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease',
        boxShadow: isDark
          ? '0 20px 40px rgba(255, 79, 216, 0.38), 0 0 0 8px rgba(255, 79, 216, 0.16)'
          : '0 18px 32px rgba(15, 23, 42, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.7)',
      }}
    >
      <Camera size={30} color="white" />
    </Button>
  );
}