<script setup>
import { onMounted, ref } from 'vue'
import { useSettings } from '../composables/useSettings.js'
import ModalDialog from './ModalDialog.vue'

const { get, set } = useSettings()

const showModal = ref(false)

onMounted(async () => {
  const seen = await get('first_load_warning_seen')
  if (!seen) {
    showModal.value = true
  }
})

async function dismiss() {
  showModal.value = false
  await set('first_load_warning_seen', 'true')
}
</script>

<template>
  <ModalDialog v-if="showModal" :title="$t('firstLoadWarning.title')" @close="dismiss">
    <div data-testid="first-load-warning-modal">
      <p class="modal-message" data-testid="first-load-warning-single-tab">
        {{ $t('firstLoadWarning.singleTab') }}
      </p>
      <p class="modal-message" data-testid="first-load-warning-private-mode">
        {{ $t('firstLoadWarning.privateMode') }}
      </p>
      <div class="modal-actions">
        <button class="btn btn-primary" data-testid="first-load-warning-dismiss" @click="dismiss">
          {{ $t('firstLoadWarning.dismiss') }}
        </button>
      </div>
    </div>
  </ModalDialog>
</template>

<style scoped>
.modal-message {
  margin-bottom: 12px;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
</style>
