import CameraFlip from "components/Camera/Buttons/CameraFlip";
import Close from "components/Camera/Buttons/Close";
import Flash from "components/Camera/Buttons/Flash";
import Location from "components/Camera/Buttons/Location";
import PhotoLibraryIcon from "components/Camera/Buttons/PhotoLibraryIcon";
import TakePhoto from "components/Camera/Buttons/TakePhoto";
import Zoom from "components/Camera/Buttons/Zoom";
import TabletButtons from "components/Camera/TabletButtons";
import { View } from "components/styledComponents";
import React from "react";
import type { ViewStyle } from "react-native";
import DeviceInfo from "react-native-device-info";
import type { CameraDeviceFormat, TakePhotoOptions } from "react-native-vision-camera";
import { useLayoutPrefs } from "sharedHooks";

import AIDebugButton from "./AIDebugButton";

const isTablet = DeviceInfo.isTablet();

interface Props {
  handleZoomButtonPress: ( ) => void;
  confidenceThreshold?: number;
  cropRatio?: string;
  flipCamera: ( ) => void;
  fps?: number;
  handleClose: ( ) => void;
  hasFlash: boolean;
  modelLoaded: boolean;
  numStoredResults?: number;
  rotatableAnimatedStyle: ViewStyle;
  debugFormat?: CameraDeviceFormat;
  setConfidenceThreshold: ( value: number ) => void;
  setCropRatio: ( value: number ) => void;
  setFPS: ( value: number ) => void;
  setNumStoredResults: ( value: number ) => void;
  changeDebugFormat?: ( ) => void;
  showPrediction: boolean;
  showZoomButton: boolean;
  takePhoto: () => Promise<void>;
  takePhotoOptions: TakePhotoOptions;
  takingPhoto: boolean;
  toggleFlash: ( ) => void;
  zoomTextValue: string;
  useLocation: boolean;
  toggleLocation: ( ) => void;
  deleteSentinelFile: ( ) => Promise<void>;
}

const AICameraButtons = ( {
  handleZoomButtonPress,
  changeDebugFormat,
  confidenceThreshold,
  cropRatio,
  debugFormat,
  flipCamera,
  fps,
  handleClose,
  hasFlash,
  modelLoaded,
  numStoredResults,
  rotatableAnimatedStyle,
  setConfidenceThreshold,
  setCropRatio,
  setFPS,
  setNumStoredResults,
  showPrediction,
  showZoomButton,
  takePhoto,
  takePhotoOptions,
  takingPhoto,
  toggleFlash,
  zoomTextValue,
  useLocation,
  toggleLocation,
  deleteSentinelFile,
}: Props ) => {
  const { isDefaultMode } = useLayoutPrefs();
  if ( isTablet ) {
    return (
      <TabletButtons
        handleZoomButtonPress={handleZoomButtonPress}
        disabled={!modelLoaded || takingPhoto}
        disabledPhotoLibrary={takingPhoto}
        // TODO: once we re-visit tablet views, we'll want to ensure users cannot spam the submit
        // button while taking photos. see:
        // https://linear.app/inaturalist/issue/MOB-1084/multicapture-camera-multiple-copies-of-photos-can-be-saved
        // confirmDisabled={false}
        flipCamera={flipCamera}
        hasFlash={hasFlash}
        hasPhotoLibraryButton
        rotatableAnimatedStyle={rotatableAnimatedStyle}
        showPrediction={showPrediction}
        showZoomButton={showZoomButton}
        takePhoto={takePhoto}
        takePhotoOptions={takePhotoOptions}
        toggleFlash={toggleFlash}
        zoomTextValue={zoomTextValue}
        useLocation={useLocation}
        toggleLocation={toggleLocation}
        isDefaultMode={isDefaultMode}
        deleteSentinelFile={deleteSentinelFile}
      />
    );
  }
  return (
    <View className="bottom-10 absolute right-5 left-5" pointerEvents="box-none">
      <View
        className="absolute left-0 bottom-[17px] h-full justify-end flex gap-y-9"
        pointerEvents="box-none"
      >
        <View>
          <Close
            handleClose={handleClose}
            rotatableAnimatedStyle={rotatableAnimatedStyle}
          />
        </View>
      </View>
      <View
        className="absolute right-0 bottom-[6px] h-full justify-end items-end flex gap-y-9"
        pointerEvents="box-none"
      >
        <AIDebugButton
          confidenceThreshold={confidenceThreshold}
          setConfidenceThreshold={setConfidenceThreshold}
          fps={fps}
          setFPS={setFPS}
          numStoredResults={numStoredResults}
          setNumStoredResults={setNumStoredResults}
          cropRatio={cropRatio}
          setCropRatio={setCropRatio}
          debugFormat={debugFormat}
          changeDebugFormat={changeDebugFormat}
          // TODO: The following are just to get accessibility tests to pass...
          // without making anything truly accessible. The test seems to think
          // AIDebugButton is itself not accessible, but it's really
          // complaining about the sliders within. If the sliders make it into
          // production, they'll need to be made to pass that test.
          accessibilityRole="adjustable"
          accessibilityValue={{ min: 0, max: 100, now: 50 }}
        />
        {!isDefaultMode && (
          <View>
            <Location
              toggleLocation={toggleLocation}
              useLocation={useLocation}
              rotatableAnimatedStyle={rotatableAnimatedStyle}
            />
          </View>
        )}
        {showZoomButton && (
          <View>
            <Zoom
              zoomTextValue={zoomTextValue}
              handleZoomButtonPress={handleZoomButtonPress}
              rotatableAnimatedStyle={rotatableAnimatedStyle}
            />
          </View>
        )}
        <View>
          <Flash
            toggleFlash={toggleFlash}
            hasFlash={hasFlash}
            takePhotoOptions={takePhotoOptions}
            rotatableAnimatedStyle={rotatableAnimatedStyle}
          />
        </View>
        <View>
          <CameraFlip
            flipCamera={flipCamera}
            rotatableAnimatedStyle={rotatableAnimatedStyle}
          />
        </View>
        <View>
          <PhotoLibraryIcon
            rotatableAnimatedStyle={rotatableAnimatedStyle}
            disabled={takingPhoto}
            deleteSentinelFile={deleteSentinelFile}
          />
        </View>
      </View>
      <View className="flex-row justify-center items-center w-full" pointerEvents="box-none">
        <TakePhoto
          disabled={!modelLoaded || takingPhoto}
          takePhoto={takePhoto}
          showPrediction={showPrediction}
          rotatableAnimatedStyle={rotatableAnimatedStyle}
        />
      </View>
    </View>
  );
};

export default AICameraButtons;
