// src/toolbar.component.js file
import { Ionicons } from "@expo/vector-icons";
import { Camera } from "expo-camera";
import React from "react";
import {
  StyleSheet,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from "react-native";

const styles = StyleSheet.create({
  alignCenter: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  bottomToolbar: {
    marginTop: "auto",
    height: 100,
    display: "flex",
    justifyContent: "space-evenly",
    alignItems: "center",
    flexDirection: "row",
  },
  captureBtn: {
    width: 60,
    height: 60,
    borderWidth: 2,
    borderRadius: 60,
    borderColor: "#FFFFFF",
  },
  captureBtnActive: {
    width: 80,
    height: 80,
  },
  captureBtnInternal: {
    width: 76,
    height: 76,
    borderWidth: 2,
    borderRadius: 76,
    backgroundColor: "red",
    borderColor: "transparent",
  },
});

const { FlashMode: CameraFlashModes, Type: CameraTypes } = Camera.Constants;

export default function CameraControls({
  capturing = false,
  cameraType = CameraTypes.back,
  flashMode = CameraFlashModes.off,
  setFlashMode,
  setCameraType,
  onCaptureIn,
  onCaptureOut,
  onLongCapture,
  onShortCapture,
}) {
  return (
    <View style={styles.bottomToolbar}>
      <TouchableOpacity
        onPress={() =>
          setFlashMode(
            flashMode === CameraFlashModes.on
              ? CameraFlashModes.off
              : CameraFlashModes.on
          )
        }
      >
        <Ionicons
          name={flashMode == CameraFlashModes.on ? "md-flash" : "md-flash-off"}
          color="white"
          size={30}
        />
      </TouchableOpacity>

      <TouchableWithoutFeedback
        onPressIn={onCaptureIn}
        onPressOut={onCaptureOut}
        onLongPress={onLongCapture}
        onPress={onShortCapture}
        disabled={capturing}
      >
        <View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
          {capturing && <View style={styles.captureBtnInternal} />}
        </View>
      </TouchableWithoutFeedback>

      <TouchableOpacity
        onPress={() =>
          setCameraType(
            cameraType === CameraTypes.back
              ? CameraTypes.front
              : CameraTypes.back
          )
        }
      >
        <Ionicons name="md-reverse-camera" color="white" size={30} />
      </TouchableOpacity>
    </View>
  );
}