<script setup="setup">

import { stripHtml } from 'string-strip-html'

const { etherFetch } = useEtherpadApi()
const store = usePojmiStore()
const route = useRoute()

const props = defineProps({
  naslov: String
})

const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value.id)

await store.naloziPojme()

const urejanje = ref(false)
const container = ref(null)

const urediPojem = async () => {
  // Ustvari pad s tekstom pojma, ce se ne obstaja
  const tekstPojma = stripHtml(pojem.value.tekst).result
  const resp = await etherFetch('/createPad', {
    padID: revisionId.value,
    text: tekstPojma
  })
  urejanje.value = true
}

onMounted(() => {
  // Link na pojem direktno? Poskrolaj nanj + odpri editiranje
  if (route.params.guid === revisionId.value) {
    urejanje.value = true
    window.container = container
    setTimeout(() => window.container.value.scrollIntoView(), 50)
  }
})

</script>

<template>
  <section class="pojem" ref="container">
    <div>
      <h2>{{ pojem.naslov }}</h2>
      <div class="tekst" v-html="pojem.tekst" />
    </div>
    <PojemForm v-if="urejanje"
     :revisionId="revisionId"
     :pojem="pojem"
     :urejanje="urejanje"
     :onZapri="() => { urejanje = false; store.naloziPojme()}"
     />
    <div>
      <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
    </div>
  </section>
</template>

<style scoped>
  section.pojem {
    position: relative;
    background: var(--bela);
    margin: 2rem;
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
  }

  form.pojem {
    width: calc(50% - 32px);
    margin-left: 32px;
    gap: 1rem;
  }

  .pojem > div {
    position: relative;
    width: 50%;
  }

  h2 {
    text-transform: uppercase;
    margin-top: 0;
  }
  .gumb {
    position: absolute;
    bottom: 0;
    right: 0;
    text-decoration: underline;
    font-size: 3rem;
  }

  @media screen and (max-width: 768px) {
    PojemForm {
      width: 50%;
      float: right;
    }
    .pojem > div {
      min-height: 4rem;
      width: 100%;
    }
  }

    @media screen and (max-width: 768px) {
      form.pojem {
        width: 100%;
        margin-left: 0;
        min-height: 70vh;
    }
  }
</style>
