<template>
  <v-app-bar class="px-2 rounded-ts" flat height="56">
    <div class="d-flex ga-2 w-100">
      <AutoAnnotateMenu v-if="showAutoAnnotate" />
      <v-btn-toggle v-if="showLayout" :model-value="layout" border density="comfortable">
        <v-tooltip location="bottom" open-delay="1000">
          <template #activator="{ props }">
            <v-btn v-bind="props" color="primary" data-testid="layout-2x2" icon="grid_view" @click="changeLayout2x2" />
          </template>
          <span>{{ t('labels.layout2x2') }}</span>
        </v-tooltip>
        <v-tooltip location="bottom" open-delay="1000">
          <template #activator="{ props }">
            <v-btn
              v-bind="props"
              color="primary"
              data-testid="layout-1x3"
              icon="view_sidebar"
              @click="changeLayout1x3"
            />
          </template>
          <span>{{ t('labels.layout1x3') }}</span>
        </v-tooltip>
      </v-btn-toggle>
      <v-spacer />
      <v-btn
        v-if="showLoadScan"
        class="px-2"
        data-testid="load-btn"
        color="primary"
        :prepend-icon="isOpen ? undefined : 'add_circle'"
        :icon="isOpen"
        :size="isOpen ? '40' : 'default'"
        @click="loadScan"
      >
        <span v-if="!isOpen" class="minsk-900">{{ t('labels.loadSeries') }}</span>
        <v-icon v-if="isOpen" icon="add_circle" />
        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
          <span>{{ t('labels.loadSeries') }}</span>
        </v-tooltip>
      </v-btn>
      <v-btn
        v-if="showCloudStorage"
        class="px-2"
        color="primary"
        data-testid="cloud-btn"
        :prepend-icon="isOpen ? undefined : 'backup'"
        :icon="isOpen"
        :size="isOpen ? '40' : 'default'"
        @click="cloudStorage"
      >
        <span v-if="!isOpen" class="minsk-900">{{ t('labels.addToStorage') }}</span>
        <v-icon v-if="isOpen" icon="backup" />
        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
          <span>{{ t('labels.addToStorage') }}</span>
        </v-tooltip>
      </v-btn>
      <v-btn
        v-if="showDownloadScan"
        class="px-2"
        color="primary"
        data-testid="download-btn"
        :prepend-icon="isOpen ? undefined : 'download'"
        :icon="isOpen"
        :size="isOpen ? '40' : 'default'"
        @click="downloadScan"
      >
        <span v-if="!isOpen" class="minsk-900">{{ t('labels.download') }}</span>
        <v-icon v-if="isOpen" icon="download" />
        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
          <span>{{ t('labels.download') }}</span>
        </v-tooltip>
      </v-btn>
      <v-btn
        v-if="showReset"
        class="px-2"
        color="primary"
        data-testid="reset-btn"
        :prepend-icon="isOpen ? undefined : 'autorenew'"
        :icon="isOpen"
        :size="isOpen ? '40' : 'default'"
        @click="reset"
      >
        <span v-if="!isOpen" class="minsk-900">{{ t('labels.reset') }}</span>
        <v-icon v-if="isOpen" icon="autorenew" />
        <v-tooltip v-if="isOpen" activator="parent" location="bottom" open-delay="1000">
          <span>{{ t('labels.reset') }}</span>
        </v-tooltip>
      </v-btn>
      <v-spacer />
      <v-btn
        v-if="showShare"
        color="primary"
        data-testid="share-btn"
        prepend-icon="share"
        variant="outlined"
        @click="m_share = true"
      >
        <span class="minsk-900">{{ t('labels.share') }}</span>
      </v-btn>
      <v-btn
        v-if="showSaveSession"
        class="save"
        color="minsk_900"
        data-testid="save-btn"
        :loading="state === SaveState.SAVING"
        variant="flat"
        @click="save"
      >
        <v-icon class="minsk-200" icon="cloud_upload" start />
        <span>{{ t('labels.save') }}</span>
      </v-btn>
      <ShareModal v-model="m_share" />
    </div>
  </v-app-bar>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useViewerStore } from '@/stores/viewer.store';
import { storeToRefs } from 'pinia';
import { LayoutActions, ViewSelectionActions } from '@3cr/types-ts';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { currentColourPreset, initialScanState, scanState } from '@/models/scanState';
import { useDrawerStore } from '@/stores/drawer.store';
import { useSaveStore } from '@/stores/save.store';
import { useDataOverlayStore } from '@/stores/data-overlay.store';
import { useMcadStore } from '@/stores/mcad.store';
import { useI18n } from 'vue-i18n';
import { isLayout1x3, isLayout2x2 } from '@/models/scanState';
import { SaveState } from '@3cr/viewer-types-ts';

const { t } = useI18n();
const viewer3cr = useViewer3cr();
const { state: dataOverlays } = storeToRefs(useDataOverlayStore());
const { isOpen } = storeToRefs(useDrawerStore());
const { state: mcads } = storeToRefs(useMcadStore());
const { state } = storeToRefs(useSaveStore());
const { options, defaultLayout2x2, defaultLayout1x3 } = storeToRefs(useViewerStore());

const m_share = ref<boolean>(false);

const layout = computed(() => {
  if (isLayout2x2.value) {
    return 0;
  } else if (isLayout1x3.value) {
    return 1;
  } else {
    return undefined;
  }
});

const showAutoAnnotate = computed(() => {
  return !!options.value.getAIModels && !!options.value.onRunAIModel;
});

const showLoadScan = computed(() => {
  return !!options.value.onLoadScan;
});

const showCloudStorage = computed(() => {
  return !!options.value.onCloudStorage;
});

const showDownloadScan = computed(() => {
  return !!options.value.onDownloadScan;
});

const showShare = computed(() => {
  return !!options.value.onShareScan;
});

const showSaveSession = computed(() => {
  return !!options.value.onSaveSession;
});

const showReset = computed(() => {
  return !options.value.disableReset;
});

const showLayout = computed(() => {
  return !options.value.disableLayouts;
});

async function loadScan(): Promise<void> {
  if (options.value.onLoadScan) {
    await options.value.onLoadScan();
  }
}

async function changeLayout2x2(): Promise<void> {
  const message = { Version: '0.0.0', PositionData: defaultLayout2x2.value };
  await viewer3cr.customLayout({ message });
}

async function changeLayout1x3(): Promise<void> {
  const message = { Version: '0.0.0', PositionData: defaultLayout1x3.value };
  await viewer3cr.customLayout({ message });
}

async function cloudStorage(): Promise<void> {
  if (options.value.onCloudStorage) {
    // TODO: implement
    await options.value.onCloudStorage([]);
  }
}

async function downloadScan(): Promise<void> {
  if (options.value.onDownloadScan) {
    await options.value.onDownloadScan();
  }
}

async function reset(): Promise<void> {
  currentColourPreset.value = initialScanState.value.ColourPresets[0];
  await viewer3cr.viewSelection(ViewSelectionActions.vs05);
  await viewer3cr.viewSelection(ViewSelectionActions.vs06);
  await viewer3cr.layouts('lo_05' as LayoutActions);
}

async function save(): Promise<void> {
  const scan = scanState.value;
  const dataOverlay = dataOverlays.value.DataOverlay;
  const mcad = mcads.value.Models;
  await options.value.onSaveSession!(scan, dataOverlay, mcad, (newState: SaveState) => {
    state.value = newState;
  });
}
</script>
