<script setup lang="ts">
import { ref } from 'vue'

import { useI18n } from 'vue-i18n'
import { BFormCheckbox } from 'bootstrap-vue-next'
import HapticCopy from '@/components/HapticCopy/HapticCopy.vue'
import { useEmbedForm } from '@/composables/useEmbedForm'

defineOptions({
  name: 'EmbedForm'
})

export interface FormEmbedProps {
  /**
   * Hide the form title
   */
  noTitle?: boolean
  /**
   * Hide the preview panel
   */
  noPreview?: boolean
  /**
   * Default width of the iframe code
   */
  width?: number | string
  /**
   * Default height of the iframe code
   */
  height?: number
  /**
   * Default minimal width of the iframe code (if extract from window's size)
   */
  minWidth?: number
  /**
   * Default minimal height of the iframe code (if extract from window's size)
   */
  minHeight?: number
  /**
   * URL of the iframe code
   */
  url?: string | null
  /**
   * Use a switch display for the responsive iframe checkbox
   */
  switchResponsive?: boolean
}

const props = withDefaults(defineProps<FormEmbedProps>(), {
  noTitle: false,
  noPreview: false,
  width: '100%',
  height: () => window.innerHeight,
  minWidth: 0,
  minHeight: 0,
  url: null,
  switchResponsive: false
})

const { t } = useI18n()

const responsiveCheck = ref(false)
const embedFormCode = ref<HTMLTextAreaElement | null>(null)

const { embedCode: buildEmbedCode } = useEmbedForm({
  url: () => props.url,
  width: () => props.width,
  height: () => props.height,
  minWidth: () => props.minWidth,
  minHeight: () => props.minHeight
})

function selectCode(): void {
  embedFormCode.value?.select()
}

// The responsive checkbox drives the default snippet flavour, so callers can
// omit the flag to follow the current selection or force it explicitly.
function embedCode(withPym = responsiveCheck.value): string {
  return buildEmbedCode(withPym)
}

// Keep the snippet builder and responsive flag reachable for tests that poke
// the component instance directly.
defineExpose({ embedCode, responsiveCheck })
</script>

<template>
  <div class="embed-form">
    <div class="container-fluid">
      <h4
        v-if="!noTitle"
        class="embed-form__heading"
      >
        {{ t('embed-form.heading') }}
      </h4>
      <div class="row">
        <div class="col">
          <p>
            {{ t('embed-form.introduction') }}
          </p>
          <textarea
            ref="embed-form__code"
            class="form-control embed-form__code mb-2"
            readonly
            :value="embedCode()"
            @click="selectCode"
          />

          <div class="d-flex justify-content-between">
            <b-form-checkbox
              id="responsiveOptin"
              v-model="responsiveCheck"
              class="align-self-end fw-bold"
              :switch="switchResponsive"
            >
              {{ t('embed-form.responsive-optin') }}
            </b-form-checkbox>

            <haptic-copy
              class="btn-link btn-sm text-uppercase fw-bold"
              :text="embedCode()"
              :label="t('embed-form.copy').toString()"
              @attempt="selectCode()"
            />
          </div>
        </div>
        <div
          v-if="!noPreview"
          class="col-7 d-none d-lg-block embed-form__preview"
        >
          <!-- eslint-disable vue/no-v-html -->
          <span v-html="embedCode(false)" />
          <!-- eslint-enable -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.embed-form {
  font-size: 0.9rem;
  overflow: auto;

  &__heading {
    font-size: 1.1em;
    text-transform: uppercase;
  }

  &__code {
    height: 80px;
  }

  &__preview {
    border-left: 1px $gray-400 dashed;
  }
}
</style>
