<template>
  <IvyDialog v-model="isVisible" :title="getLabel('export')" show-close align-center width="500px">
    <div
      class="ivyforms-export-dialog ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-24 ivyforms-pb-16"
    >
      <p class="ivyforms-export-dialog__description regular-14">
        {{ getLabel('export_forms_instructions') }}
      </p>

      <div
        class="ivyforms-export-dialog__field ivyforms-flex ivyforms-flex-direction-column ivyforms-gap-12"
      >
        <label class="ivyforms-export-dialog__label medium-18">
          {{ getLabel('select_export_options') }}
        </label>

        <div
          class="ivyforms-export-dialog__options ivyforms-flex ivyforms-align-items-center ivyforms-gap-24"
        >
          <IvyCheckbox v-model="exportOptions.forms" priority="secondary" size="s" type="checkmark">
            <span class="medium-14">{{ formsLabel }}</span>
          </IvyCheckbox>

          <div class="ivyforms-export-dialog__option-wrapper">
            <ComingSoonBadge
              image="coming-soon-arrow-text"
              size="s"
              class="ivyforms-export-dialog__badge"
            />
            <IvyCheckbox
              :model-value="false"
              priority="secondary"
              size="s"
              type="checkmark"
              disabled
            >
              <span class="medium-14">{{ getLabel('entries') }}</span>
            </IvyCheckbox>
          </div>

          <div class="ivyforms-export-dialog__option-wrapper">
            <ComingSoonBadge
              image="coming-soon-arrow-text"
              size="s"
              class="ivyforms-export-dialog__badge"
            />
            <IvyCheckbox
              :model-value="false"
              priority="secondary"
              size="s"
              type="checkmark"
              disabled
            >
              <span class="medium-14">{{ getLabel('styles') }}</span>
            </IvyCheckbox>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <IvyButtonAction
        priority="success"
        size="d"
        type="fill"
        :disabled="!exportOptions.forms || isExporting"
        @click="handleExport"
      >
        {{ isExporting ? getLabel('exporting') : getLabel('export') }}
      </IvyButtonAction>
    </template>
  </IvyDialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import IvyDialog from '@/views/_components/dialog/IvyDialog.vue'
import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
import IvyCheckbox from '@/views/_components/checkbox/IvyCheckbox.vue'
import ComingSoonBadge from '@/views/_components/badges/ComingSoonBadge.vue'
import { useLabels } from '@/composables/useLabels'
const { getLabel } = useLabels()

interface Props {
  modelValue: boolean
  isExporting?: boolean
  formsCount?: number
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  isExporting: false,
  formsCount: 1,
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'export'): void
  (e: 'cancel'): void
}>()

const formsLabel = computed(() => (props.formsCount === 1 ? getLabel('form') : getLabel('forms')))

const exportOptions = ref({
  forms: true,
  entries: false,
  styles: false,
})

const isVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => {
    emit('update:modelValue', value)
    if (!value) {
      resetDialog()
    }
  },
})

const handleExport = () => {
  emit('export')
}

const resetDialog = () => {
  exportOptions.value = {
    forms: true,
    entries: false,
    styles: false,
  }
}

// Watch for external reset
watch(
  () => props.modelValue,
  (newValue) => {
    if (!newValue) {
      resetDialog()
    }
  },
)
</script>

<style lang="scss" scoped>
.ivyforms-export-dialog {
  &__description {
    color: var(--map-base-dusk-symbol-0);
    line-height: 1.6;
    margin: 0;
  }

  &__label {
    color: var(--map-base-text-0);
  }

  &__option-wrapper {
    position: relative;
  }

  &__badge {
    position: absolute;
    right: -26px;
    z-index: 10;
  }

  &__option {
    &--disabled {
      opacity: 0.6;
    }
  }
}
</style>
