<template>
  <VRow>
    <VCol
      cols="12"
      md="12"
    >

<!--
      <VCard
        class="mb-6"
        title="TEST"
      >
        <VCardText>
          <VRow>
            <VCol>
              <AppSelect
                v-model="value"
                :items="items"
                item-title="name"
                item-value="name"
                label="Select Item"
                placeholder="Select Item"
                multiple
                clearable
                clear-icon="tabler-x"
              >
                <template #selection="{ item }">
                  <VChip>
                    <template #prepend>
                      <VAvatar
                        start
                        :image="item.raw.avatar"
                      />
                    </template>

                    <span>{{ item.title }}</span>
                  </VChip>
                </template>
              </AppSelect>
            </VCol>
          </VRow>
        </VCardText>
      </VCard>-->
      
      
      
      <!--      v-show="!showEnterBooks" -->
      <!--      ToDo: Wieder einfügen, wenn fertig -->
      <VCard
        v-show="!showEnterBooks"
        class="mb-6"
        title="Bücher eintragen"
        subtitle="Du kannst ein Buch bei uns nicht finden? Hier kannst du es eintragen!"
      >
        <VCardText>
          <VRow>
            <VCol
              v-show="!inputValueISBN"
              cols="6"
            >
              <AppTextField
                v-model="inputValueTitle"
                clearable
                label="Titel* eingeben:"
                placeholder="Harry Potter und der Stein der Weisen"
                clear-icon="tabler-x"
              />
            </VCol>
            <VCol
              v-show="!inputValueTitle && !inputValueISBN"
              cols="12"
            >
              oder
            </VCol>
            <VCol
              v-show="!inputValueTitle"
              cols="6"
            >
              <AppTextField
                id="isbnInput"
                v-model="inputValueISBN"
                clearable
                type="number"
                label="ISBN eingeben:"
                placeholder="978-3-551-55167-7"
                clear-icon="tabler-x"
              />
            </VCol>


<!--            SUCHEN BUTTON: Erscheint sobald was eigegeben wurde in die Felder Title/ISBN-->
            <VCol
              v-show="showButton"
              cols="12"
            >
              <div class="demo-space-x">
                <VBtn @click="displayBook">
                  Suchen
                  <VIcon
                    end
                    icon="tabler-search"
                  />
                </VBtn>
              </div>
            </VCol>



            <VCol
              v-show="displayedBooks"
              cols="12"
            >
              <div v-if="book">
                Buchtitel: {{ book.title }}
                <br>
                Untertitel: {{ book.subtitle }}
              </div>

              <div style="color: red">
                Buch wurde nicht gefunden? Jetzt
                <VBtn
                  color="error"
                  @click="displayedEnterBooks"
                >
                  eintragen
                </VBtn>
              </div>



            </VCol>
          </VRow>
        </VCardText>
      </VCard>






<!--      FROMULAR: BUCH EINTRAGEN -->
      <VCard
        v-if="book"
        v-show="showEnterBooks"
        class="mb-6"
        title="Trage dein Buch jetzt ein:"
        subtitle="Alle mit * gekennzeichneten Felder sind Pflichtfelder!"
      >
        <VCardText>
            <!--            Fieberkurve* -->
<!--            <VCol cols="12">
              <AppTextField
                label="Fieberkurve* eingeben:"
                placeholder="Fieberkurve"
              />
            </VCol>-->
            <!-- Fieberkurve -->
            <Fieberkurve :show-reset-button="false" :show-categories="true" class="my-4" />

          <VRow>
            <!--            Titel* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                v-if="book"
                v-model="book.title"
                label="Titel eingeben:"
                placeholder="Harry Potter und der Stein der Weisen"
              />
            </VCol>
            <!--            ISBN* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                id="isbnInput"
                v-if="book"
                v-model="book.isbn"
                type="number"
                label="ISBN* eingeben:"
                placeholder="978-3-551-55167-7"
                clearable
                clear-icon="tabler-x"
              />
            </VCol>
            <!--            Untertitel -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Untertitel eingeben:"
                placeholder=" "
                v-if="book"
                v-model="book.subtitle"
              />
            </VCol>
            <!--            Genre* -> 1:n -->
            <VCol
              cols="12"
              md="6"
            >
<!--              ToDo: Hier muss noch Anton die Gerne einfügen-->
              <AppCombobox
                v-if="book"
                v-model="book.genres"
                chips
                clearable
                multiple
                closable-chips
                clear-icon="tabler-circle-x"
                :items="genreItems"
                label="Genre/s* wählen:"
                prepend-icon="tabler-filter"
              />
            </VCol>
            <!--            Autor/en* -> 1:n -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Autor/en* eingeben:"
                placeholder="J.K. Rowling"
                v-if="book"
                v-model="book.authors[0].name"
              />
            </VCol>
            <!--            Verlag/e* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Verlag/e* eingeben:"
                placeholder="Carlsen Verlag"
                v-if="book"
                v-model="book.publishers"
              />
            </VCol>
            <!--            Sprache* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Sprache* eingeben:"
                placeholder="Deutsch"
                v-if="book"
                v-model="book.language"
              />
            </VCol>
            <!--            Seitenanzahl -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Seitenanzahl eingeben:"
                suffix="Seiten"
                type="number"
                placeholder="336"
                v-if="book"
                v-model="book.pageCount"
              />
            </VCol>
            <!--            Erscheinungsdatum -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Erscheinungsdatum eingeben:"
                placeholder="26. Juni 1998"
                v-if="book"
                v-model="book.publishedDate"
              />
            </VCol>
            <!--            Format* -> Taschenbuch, Hardcover, E-Book, etc. -->
            <VCol
              cols="12"
              md="6"
            >

              <!--              ToDo: Hier muss noch Anton die Buch Format einfügen-->
              <AppTextField
                label="Format* eingeben:"
                placeholder="Taschenbuch"
              />
            </VCol>
            <!--            Kurzbeschreibung* -->
            <VCol cols="12">
              <span class="mb-1">Kurzbeschreibung*</span>
              <ProductDescriptionEditor
                placeholder="Der elfjährige Harry Potter,
der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin Dudley lebt, erfährt an seinem elften Geburtstag, dass er ein Zauberer ist. Er erhält einen Platz auf der Schule für Hexerei und Zauberei Hogwarts, wo er neue Freunde findet und in die Geheimnisse der Zauberwelt eintaucht."
                class="border rounded"
                v-if="book"
                v-model="book.blurb"
              />
            </VCol>
            <!--            Cover/Umschlagbild* -->
            <VCol cols="12">
              <!-- 👉 Cover -->
              <!--
                <VCardItem>
                <template #title>
                Buchcover hochladen
                </template>
                </VCardItem>
              -->
              <DropZone />
            </VCol>


            <VCol cols="12">
              <div class="demo-space-x">
                <VBtn color="success">
                  Buch eintragen
                  <VIcon
                    end
                    icon="tabler-device-floppy"
                  />
                </VBtn>
                <VBtn color="error">
                  Löschen
                  <VIcon
                    end
                    icon="tabler-x"
                  />
                </VBtn>
              </div>
            </VCol>
          </VRow>
        </VCardText>
      </VCard>



      <!--      FROMULAR 2: BUCH EINTRAGEN - kein Buch gefunden -->
      <VCard
        v-else
        v-show="showEnterBooks"
        class="mb-6"
        title="Trage dein Buch jetzt ein:"
        subtitle="Alle mit * gekennzeichneten Felder sind Pflichtfelder!"
      >
        <VCardText>
          <VRow>
            <!--            Fieberkurve* -->
            <VCol cols="12">
              <AppTextField
                label="Fieberkurve* eingeben:"
                placeholder="Fieberkurve"
              />
            </VCol>
            <!--            Titel* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                v-model="inputValueTitle"
                label="Titel eingeben:"
                placeholder="Harry Potter und der Stein der Weisen"
              />
            </VCol>
            <!--            ISBN* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                id="isbnInput"
                v-model="inputValueISBN"
                type="number"
                label="ISBN* eingeben:"
                placeholder="978-3-551-55167-7"
                clearable
                clear-icon="tabler-x"
              />
            </VCol>
            <!--            Untertitel -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Untertitel eingeben:"
                placeholder=""
              />
            </VCol>
            <!--            Genre* -> 1:n -->
            <VCol
              cols="12"
              md="6"
            >
              <!--              ToDo: Hier muss noch Anton die Gerne einfügen-->
              <AppCombobox
                chips
                clearable
                multiple
                closable-chips
                clear-icon="tabler-circle-x"
                :items="genreItems"
                label="Genre/s* wählen:"
                prepend-icon="tabler-filter"
              />
            </VCol>
            <!--            Autor/en* -> 1:n -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Autor/en* eingeben:"
                placeholder="J.K. Rowling"
              />
            </VCol>
            <!--            Verlag/e* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Verlag/e* eingeben:"
                placeholder="Carlsen Verlag"
              />
            </VCol>
            <!--            Sprache* -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Sprache* eingeben:"
                placeholder="Deutsch"
              />
            </VCol>
            <!--            Seitenanzahl -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Seitenanzahl eingeben:"
                suffix="Seiten"
                type="number"
                placeholder="336"
              />
            </VCol>
            <!--            Erscheinungsdatum -->
            <VCol
              cols="12"
              md="6"
            >
              <AppTextField
                label="Erscheinungsdatum eingeben:"
                placeholder="26. Juni 1998"
              />
            </VCol>
            <!--            Format* -> Taschenbuch, Hardcover, E-Book, etc. -->
            <VCol
              cols="12"
              md="6"
            >

              <!--              ToDo: Hier muss noch Anton die Buch Format einfügen-->
              <AppTextField
                label="Format* eingeben:"
                placeholder="Taschenbuch"
              />
            </VCol>
            <!--            Kurzbeschreibung* -->
            <VCol cols="12">
              <span class="mb-1">Kurzbeschreibung*</span>
              <ProductDescriptionEditor
                placeholder="Der elfjährige Harry Potter,
der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin Dudley lebt, erfährt an seinem elften Geburtstag, dass er ein Zauberer ist. Er erhält einen Platz auf der Schule für Hexerei und Zauberei Hogwarts, wo er neue Freunde findet und in die Geheimnisse der Zauberwelt eintaucht."
                class="border rounded"
              />
            </VCol>
            <!--            Cover/Umschlagbild* -->
            <VCol cols="12">
              <!-- 👉 Cover -->
              <!--
                <VCardItem>
                <template #title>
                Buchcover hochladen
                </template>
                </VCardItem>
              -->
              <DropZone />
            </VCol>


            <VCol cols="12">
              <div class="demo-space-x">
                <VBtn color="success">
                  Buch eintragen
                  <VIcon
                    end
                    icon="tabler-device-floppy"
                  />
                </VBtn>
                <VBtn color="error">
                  Löschen
                  <VIcon
                    end
                    icon="tabler-x"
                  />
                </VBtn>
              </div>
            </VCol>
          </VRow>
        </VCardText>
      </VCard>



    </VCol>
  </VRow>
</template>

<script setup>
import { ref, watch } from 'vue'
import AppTextField from "@core/components/app-form-elements/AppTextField.vue"
import DropZone from "@core/components/DropZone.vue"
import AppCombobox from "@core/components/app-form-elements/AppCombobox.vue"
import BookService from "@/pages/BookService.js";

const inputValueTitle = ref('')
const inputValueISBN = ref('')
const showButton = ref(false)
const displayedBooks = ref(false)

watch(inputValueTitle, newValue => {
  showButton.value = newValue !== ''
  if (!showButton.value){
    displayedBooks.value = false
  }
})

watch(inputValueISBN, newValue => {
  showButton.value = newValue !== ''
  if (!showButton.value){
    displayedBooks.value = false
  }
})

let book = ref(null)
function searchForISBN() {
  // const isbn = '9783898798822'
  // const isbn = inputValueISBN

  BookService.getBookByIsbn(inputValueISBN.value)
    .then(response => {
      // book = response.data
      console.log("response", response)
      book.value = response
    })
    .catch(error => {
      console.error(error)
    })
}

function displayBook() {
  displayedBooks.value = true
  searchForISBN()
}

//////////////////
const showEnterBooks = ref(false) /// false setzten!

function displayedEnterBooks() {
  showEnterBooks.value = true
}
const seitenanzahl = ref(null)

// import genre Icons
const avatar1 =  {
  icon: 'tabler-compass',
  size: '28',
}

const items = [
  {
    name: 'Michi',
    avatar: avatar1,
  },
]

const value = ref(['Michi'])




const content = ref(`<p>
    Der elfjährige Harry Potter,<br>der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin Dudley lebt, erfährt an seinem elften Geburtstag, dass er ein Zauberer ist. Er erhält einen Platz auf der Schule für Hexerei und Zauberei Hogwarts, wo er neue Freunde findet und in die Geheimnisse der Zauberwelt eintaucht.
    </br>`)

const genreChips = ref([])

const genreItems = ref([
  "Abendteuer",
  "Contemporary",
  "Crime",
  "Erotik",
  "Fantasy",
  "History",
  "Horror",
  "Humor",
  "Romance",
  "ScienceFiction",
])
</script>

<style scoped lang="scss">

</style>
