import React, {Dispatch, SetStateAction} from 'react';
import {Text, TouchableOpacity} from 'react-native';
import {CameraType} from 'react-native-camera';
import FlipIcon from '../../assets/icons/camera/flip.svg';
import {styles} from './styles';

interface FlipButtonProps {
  setCameraType: Dispatch<SetStateAction<keyof CameraType>>;
  cameraType: keyof CameraType;
}

/*
 * Toggles between back camera and front camera
 * Appears only when user has not taken a picture yet
 * Once user takes a picture, this button disappears to reveal the save button
 */
export const FlipButton: React.FC<FlipButtonProps> = ({
  setCameraType,
  cameraType,
}) => (
  <TouchableOpacity
    onPress={() => setCameraType(cameraType === 'front' ? 'back' : 'front')}
    style={styles.saveButton}>
    <FlipIcon width={40} height={40} />
    <Text style={styles.saveButtonLabel}>Flip</Text>
  </TouchableOpacity>
);

export default FlipButton;