import {BlurView} from '@react-native-community/blur';
import React, {Dispatch, SetStateAction} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {FlashMode} from 'react-native-camera';
import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
import FlashOffIcon from '../../assets/icons/camera/flash-off.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,
}) => {
  return (
    <>
      <BlurView
        blurType={'ultraThinMaterialDark'}
        blurAmount={1}
        style={styles.blurView}
      />
      <TouchableOpacity
        onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
        style={styles.flashButtonContainerBackground}>
        <View
          style={[
            styles.flashButtonContainer,
            // eslint-disable-next-line react-native/no-inline-styles
            {opacity: flashMode === 'off' ? 0.5 : 1},
          ]}>
          {flashMode === 'off' ? (
            <FlashOffIcon height={30} width={20} color={'white'} />
          ) : (
            <FlashOnIcon height={30} width={20} color={'white'} />
          )}
          <Text style={styles.saveButtonLabel}>Flash</Text>
        </View>
      </TouchableOpacity>
    </>
  );
};

export default FlashButton;