import {useNavigation} from '@react-navigation/native';
import React, {Dispatch, SetStateAction} from 'react';
import {Image, StyleSheet, Text, TouchableOpacity} from 'react-native';
import {CameraType, FlashMode} from 'react-native-camera';
import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
import FlipIcon from '../../assets/icons/camera/flip.svg';
import SaveIcon from '../../assets/icons/camera/save.svg';
import {ScreenType} from '../../types';
import {downloadImage, navigateToImagePicker} from '../../utils/camera';
import {normalize, SCREEN_WIDTH} from '../../utils/layouts';

interface GalleryIconProps {
  screenType: ScreenType;
  title: string;
  mostRecentPhoto: string;
}

/*
 * Displays the most recent photo in the user's gallery
 * On click, navigates to the image picker
 */
export const GalleryIcon: React.FC<GalleryIconProps> = ({
  screenType,
  title,
  mostRecentPhoto,
}) => {
  return (
    <TouchableOpacity
      onPress={() => navigateToImagePicker(screenType, title)}
      style={styles.saveButton}>
      <Image
        source={{uri: mostRecentPhoto}}
        width={40}
        height={40}
        style={{borderWidth: 2, borderColor: 'white', borderRadius: 5}}
      />
      <Text style={styles.saveButtonLabel}>Gallery</Text>
    </TouchableOpacity>
  );
};

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>
);

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={{zIndex: 999}}
      />
    ) : (
      <FlashOffIcon
        height={30}
        width={20}
        color={'white'}
        style={{zIndex: 999}}
      />
    )}
    <Text style={styles.saveButtonLabel}>Flash</Text>
  </TouchableOpacity>
);

interface SaveButtonProps {
  capturedImageURI: string;
}

/*
 * Appears when a picture has been taken,
 * On click, saves the captured image to "Recents" album on device gallery
 */
export const SaveButton: React.FC<SaveButtonProps> = ({capturedImageURI}) => (
  <TouchableOpacity
    onPress={() => {
      downloadImage(capturedImageURI);
    }}
    style={[styles.saveButton]}>
    <SaveIcon width={40} height={40} />
    <Text style={styles.saveButtonLabel}>Save</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  saveButton: {
    zIndex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: (SCREEN_WIDTH - 100) / 2,
  },
  saveButtonLabel: {
    color: 'white',
    fontWeight: '700',
    fontSize: normalize(12),
    lineHeight: normalize(14.32),
    marginTop: 5,
    zIndex: 999,
  },
  flashButtonContainer: {
    position: 'absolute',
    backgroundColor: '#808080',
    opacity: 0.25,
    zIndex: 1,
    top: normalize(50),
    right: 0,
    marginRight: normalize(18),
    height: 86,
    width: 49,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
  },
});
