import React, {Dispatch, SetStateAction} from 'react';
import {Text, TouchableOpacity} from 'react-native';
import {FlashMode} from 'react-native-camera';
import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
import {styles} from './styles';

interface FlashButtonProps {
  flashMode: keyof FlashMode;
  setFlashMode: Dispatch<SetStateAction<keyof FlashMode>>;
}

/*
 * Toggles between flash on/off modes
 */
export const FlashButton: React.FC<FlashButtonProps> = ({
  flashMode,
  setFlashMode,
}) => (
  <TouchableOpacity
    onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
    style={styles.flashButtonContainer}>
    {flashMode === 'on' ? (
      <FlashOnIcon
        height={30}
        width={20}
        color={'white'}
        style={styles.flashIcon}
      />
    ) : (
      <FlashOffIcon
        height={30}
        width={20}
        color={'white'}
        style={styles.flashIcon}
      />
    )}
    <Text style={styles.saveButtonLabel}>Flash</Text>
  </TouchableOpacity>
);

export default FlashButton;