import {BlurView} from '@react-native-community/blur';
import React, {Dispatch, SetStateAction, useMemo} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {FlashMode} from 'react-native-camera';
import {normalize} from 'react-native-elements';
import FlashOnIcon from '../../assets/icons/camera/flash-off.svg';
import FlashOffIcon 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,
}) => {
  return useMemo(
    () => (
      <>
        <BlurView
          blurType={'ultraThinMaterialDark'}
          blurAmount={1}
          style={[
            {
              position: 'absolute',
              zIndex: 1,
              top: normalize(44),
              right: 0,
              marginRight: normalize(16),
              height: 86,
              width: 49,
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 24.5,
            },
          ]}
        />
        <TouchableOpacity
          onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
          style={[styles.flashButtonContainerBackground]}>
          <View
            style={[
              styles.flashButtonContainer,
              {
                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>
      </>
    ),
    [flashMode],
  );
};

export default FlashButton;