import { SaveState } from '@3cr/viewer-types-ts';
import { defineStore } from 'pinia';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';

const stateTextTimeoutMs = 5000;

let timeout: number | undefined = undefined;

export const useSaveStore = defineStore('saveState', () => {
  const { t } = useI18n();

  const state = ref<SaveState>(SaveState.SAVED_CLOUD);
  const showText = ref<boolean>(true);

  watch(
    state,
    () => {
      clearTimeout(timeout);
      showText.value = true;
      timeout = setTimeout(() => {
        showText.value = false;
      }, stateTextTimeoutMs);
    },
    { immediate: true },
  );

  const text = computed(() => {
    switch (state.value) {
      case SaveState.SAVING:
        return t('enums.saveState.saving');
      case SaveState.SAVED_CLOUD:
        return t('enums.saveState.savedCloud');
      case SaveState.SAVED_TEMPORARY:
        return t('enums.saveState.savedTemporary');
      case SaveState.UNSAVED:
        return t('enums.saveState.unsaved');
      case SaveState.ERROR:
        return t('enums.saveState.error');
    }
  });

  const icon = computed(() => {
    switch (state.value) {
      case SaveState.SAVING:
        return 'autorenew';
      case SaveState.SAVED_CLOUD:
        return 'cloud_done';
      case SaveState.SAVED_TEMPORARY:
        return 'sync_saved_locally';
      case SaveState.UNSAVED:
        return 'warning';
      case SaveState.ERROR:
        return 'error';
    }
  });

  return { state, text, icon, showText };
});