<template>
  <div class="cameraDirectionControlWrapper">
    <div class="cameraDirectionControl">
      <div class="roundCircle"></div>
      <DirectionItem position="top" @click="handleMoveTop" />
      <DirectionItem position="right" @click="handleMoveRight" />
      <DirectionItem position="bottom" @click="handleMoveBottom" />
      <DirectionItem position="left" @click="handleMoveLeft" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { cameraMoveApi } from '@/api/camera/camera-preview';
  import DirectionItem from './DirectionItem.vue';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import { storeToRefs } from 'pinia';
  import usePresetListStore from '../../store/usePresetListStore';

  const cameraDetailStore = useCameraDetailStore();
  const { cameraId } = storeToRefs(cameraDetailStore);
  const presetListStore = usePresetListStore();

  const STEP = 0.05;

  const handleMoveTop = () => {
    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: 0, y: STEP });
    presetListStore.currentPresetToken = '';
  };
  const handleMoveRight = () => {
    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: STEP, y: 0 });
    presetListStore.currentPresetToken = '';
  };
  const handleMoveBottom = () => {
    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: 0, y: -STEP });
    presetListStore.currentPresetToken = '';
  };
  const handleMoveLeft = () => {
    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: -STEP, y: 0 });
    presetListStore.currentPresetToken = '';
  };
</script>
<style scoped lang="scss">
  .cameraDirectionControlWrapper {
    bottom: 100px;
    right: 0px;
  }
  .cameraDirectionControl {
    width: 180px;
    height: 180px;

    position: relative;
    .roundCircle {
      background: #fff;
      opacity: 0.4;
      width: 180px;
      height: 180px;
      border-radius: 180px;
    }
  }
</style>
