<template>
  <div class="max-w-2xl">
    <p class="font-semibold">Zoom</p>
    <div class="mt-1 flex items-center space-x-4">
      <ui-input
        v-model.number="settings.minZoom"
        type="number"
        label="Min zoom"
      />
      <ui-input
        v-model.number="settings.maxZoom"
        type="number"
        label="Max zoom"
      />
    </div>
    <ui-list class="mt-8 space-y-2">
      <ui-list-item small>
        <ui-switch v-model="settings.arrow" />
        <div class="ml-4 flex-1">
          <p class="leading-tight">
            {{ t('settings.editor.arrow.title') }}
          </p>
          <p class="text-sm leading-tight text-gray-600 dark:text-gray-200">
            {{ t('settings.editor.arrow.description') }}
          </p>
        </div>
      </ui-list-item>
      <ui-list-item small>
        <ui-switch v-model="settings.snapToGrid" />
        <div class="ml-4 flex-1">
          <p class="leading-tight">
            {{ t('settings.editor.snapGrid.title') }}
          </p>
          <p class="text-sm leading-tight text-gray-600 dark:text-gray-200">
            {{ t('settings.editor.snapGrid.description') }}
          </p>
        </div>
      </ui-list-item>
      <transition-expand>
        <div
          v-if="settings.snapToGrid"
          class="ml-2 space-x-2 pl-16"
          style="margin-top: 0"
        >
          <ui-input
            v-model.number="settings.snapGrid[0]"
            type="number"
            label="X Axis"
          />
          <ui-input
            v-model.number="settings.snapGrid[1]"
            type="number"
            label="Y Axis"
          />
        </div>
      </transition-expand>
      <ui-list-item small>
        <ui-switch v-model="settings.saveWhenExecute" />
        <div class="ml-4 flex-1">
          <p class="leading-tight">
            {{ t('settings.editor.saveWhenExecute.title') }}
          </p>
          <p class="text-sm leading-tight text-gray-600 dark:text-gray-200">
            {{ t('settings.editor.saveWhenExecute.description') }}
          </p>
        </div>
      </ui-list-item>
    </ui-list>
  </div>
</template>
<script setup>
import { reactive, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import cloneDeep from 'lodash.clonedeep';
import { useStore } from '@/stores/main';

const { t } = useI18n();
const store = useStore();

const settings = reactive({});

watch(settings, () => {
  store.updateSettings({ editor: settings });
});

onMounted(() => {
  Object.assign(settings, cloneDeep(store.settings.editor));
});
</script>
