<script setup lang="ts">
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
import type { LearningContentTest } from "@/types";
import { ref } from "vue";

const props = defineProps<{
  content: LearningContentTest;
}>();

const checked = ref(false);

function toggleChecked() {
  checked.value = !checked.value;
}

function startTest() {
  window.open(props.content.content_url, "_blank");
}
</script>

<template>
  <LearningContentSimpleLayout
    :title="props.content.title"
    :learning-content="props.content"
  >
    <!-- eslint-disable vue/no-v-html -->
    <div class="container-medium">
      <p
        v-if="props.content.description"
        class="default-wagtail-rich-text text-large my-4"
        v-html="props.content.description"
      ></p>

      <div class="my-8">
        <ItCheckbox
          v-if="props.content.checkbox_text"
          :checkbox-item="{
            label: props.content.checkbox_text,
            value: checked,
            checked: checked,
          }"
          @toggle="toggleChecked()"
        />
      </div>

      <div class="my-8">
        <button
          :disabled="!checked"
          class="btn-primary inline-flex items-center"
          @click="startTest()"
        >
          Test starten
          <it-icon-external-link class="it-icon ml-2 h-5 w-5"></it-icon-external-link>
        </button>
      </div>
    </div>
  </LearningContentSimpleLayout>
</template>
