import RotatableIconWrapper from "components/Camera/RotatableIconWrapper";
import TransparentCircleButton from "components/SharedComponents/Buttons/TransparentCircleButton";
import React from "react";
import type { ViewStyle } from "react-native";
import { useTranslation } from "sharedHooks";

interface Props {
  rotatableAnimatedStyle: ViewStyle;
  toggleLocation: ( ) => void;
  useLocation?: boolean;
}

const Location = ( {
  rotatableAnimatedStyle,
  toggleLocation,
  useLocation,
}: Props ) => {
  const { t } = useTranslation( );

  let testID = "";
  let accessibilityHint = "";
  let name = "";
  if ( useLocation ) {
    name = "map-marker-outline";
    testID = "location-button-label-location";
    accessibilityHint = t( "Disable-location" );
  } else {
    name = "map-marker-outline-off";
    testID = "location-button-label-location-off";
    accessibilityHint = t( "Enable-location" );
  }

  return (
    <RotatableIconWrapper
      rotatableAnimatedStyle={rotatableAnimatedStyle}
      containerClass="m-0 border-0"
    >
      <TransparentCircleButton
        onPress={toggleLocation}
        testID={testID}
        accessibilityLabel={t( "Location" )}
        accessibilityHint={accessibilityHint}
        icon={name}
      />
    </RotatableIconWrapper>
  );
};

export default Location;
