<template>
  <VRow class="match-height">
    <VCol
      cols="12"
      md="12"
    >
      <VCard
        title="Büchersuche"
        subtitle="Vorbeischauen – Vergleichen – Verlieben"
      >
        <!-- ******* Fieberkurve ***** -->
        <Fieberkurve :show-reset-button="true" :show-categories="true" />

<!--        <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
          {{ selectedCheckbox }}
        </div>-->

        <!-- ******* Genre´s ***** -->
        <div style="padding: 0 7rem;">
          <VCol>
            <CustomCheckboxesWithIcon
              v-model:selected-checkbox="selectedCheckbox"
              :checkbox-content="checkboxContent"
            />
          </VCol>
        </div>

        <!-- ******* TEXT SUCHFELD!! ***** -->

        <div style="padding: 0 5rem;">
          <AppTextField
            v-model="message"
            clearable
            label="Finde dein Buch!"
            placeholder="Titel / ISBN / Autor ... eingeben"
            type="text"
            class="textfield-demo-icon-slot"
          >
            <!-- Prepend -->
            <template #prepend>
              <VTooltip location="bottom">
                <template #activator="{ props }">
                  <VIcon
                    v-bind="props"
                    icon="tabler-help"
                  />
                </template>
                Skoutz ist die Buchsuche, <br>
                die deinen Geschmack trifft. <br>
                5 Klicks 🖱 statt 5 Sterne ⭐ und du <br>
                findest genau, was du willst. <br>
              </VTooltip>
            </template>

            <!-- AppendInner -->
            <template #append-inner>
              <VFadeTransition leave-absolute>
                <VProgressCircular
                  v-if="loading"
                  color="primary"
                  width="3"
                  size="24"
                  indeterminate
                />

                <VNodeRenderer
                  v-else
                  class="text-2xl"
                  :nodes="themeConfig.app.logo"
                />
              </VFadeTransition>
            </template>

            <!-- Append -->
            <template #append>
              <VBtn
                :icon="$vuetify.display.smAndDown"
                @click="clickMe"
              >
                <VIcon
                  icon="tabler-search"
                  color="#fff"
                  size="22"
                />
                <span
                  v-if="$vuetify.display.mdAndUp"
                  class="ms-3"
                >Suchen</span>
              </VBtn>
            </template>
          </AppTextField>
        </div>

        <br>
      </VCard>
    </VCol>






    <VCol
      cols="12"
      md="12"
    >
      <!--
        <VCard
        title="Bücher eintragen"
        subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
        >
      -->
      <VCard
        class="mb-6"
        title="Gefundene Bücher:"
      >

        Hallo Hier ist die API:
        {{book}}
        <div v-if="book">
          <p>Titel: {{ book.title }}</p>
<!--          <p>Autor: {{ book.author }}</p>-->
        </div>

        <!-- 👉 Hier werden die Bücher aufgelistet. -->

        <VCol
          sm="6"
          cols="12"
        >
          <VCard>
            <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
              <div class="ma-auto pa-5">
                <VImg
                  width="200px"
                  height="300px"
                  :src="harry_potter"
                />
              </div>

              <VDivider :vertical="$vuetify.display.mdAndUp" />

              <div>
                <VCardTitle>Harry Potter</VCardTitle>
                <VCardText>
<!--                <div style="position: relative; height: 120px">-->
                    <!--              Fieberkurve -->
                </VCardText>


                <VCardText>
                  Harry Potter ist eine Kinder- und Jugendromanreihe der englischen Schriftstellerin Joanne K. Rowling. ...
                </VCardText>
                <!--
                  <VCardText class="text-subtitle-1">
                  <span>Bestellen:</span> <span class="font-weight-medium">Amazon</span>
                  </VCardText>
                -->

                <VCardActions class="justify-space-between">
                  <VBtn>
                    <VIcon icon="tabler-list-details" />
                    <span class="ms-2">Detail Seite</span>
                  </VBtn>

                  <IconBtn
                    color="secondary"
                    icon="tabler-share"
                  />
                </VCardActions>
              </div>
            </div>
          </VCard>
        </VCol>


        <!--        ENDE: Genre -->
      </VCard>
    </VCol>
  </VRow>
</template>

<script setup lang="ts">
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'
import { ref, onMounted, watch } from 'vue'
import Fieberkurve from "@/components/Fieberkurve.vue"
import harry_potter from "@/assets/images/harry_potter_stein_weisen_rowling.jpg"
import BookService from './BookService'
import { useTheme } from "vuetify"

const message = ref('')
const loading = ref(false)

const clickMe = () => {
  loading.value = true
  message.value = 'Warte darauf...'

  setTimeout(() => {
    loading.value = false
    message.value = ''
  }, 2000)
}

const checkboxContent = [
  /*{
    title: 'Backup',
    desc: 'Backup every file from your project.',
    value: 'backup',
    icon: {
      icon: 'tabler-server-2',
      size: '28',
    },
  },*/
  {
    value: 'Abendteuer',
    icon: {
      icon: 'tabler-compass',
      size: '28',
    },
  },
  {
    value: 'Contemporary',
    icon: {
      icon: 'tabler-building-skyscraper',
      size: '28',
    },
  },
  {
    value: 'Crime',
    icon: {
      icon: 'tabler-fingerprint',
      size: '28',
    },
  },
  {
    value: 'Erotik',
    icon: {
      icon: 'tabler-bed',
      size: '28',
    },
  },
  {
    value: 'Fantasy',
    icon: {
      icon: 'tabler-paw',
      size: '28',
    },
  },
  {
    value: 'History',
    icon: {
      icon: 'tabler-swords',
      size: '28',
    },
  },
  {
    value: 'Horror',
    icon: {
      icon: 'tabler-ghost-2',
      size: '28',
    },
  },
  {
    value: 'Humor',
    icon: {
      icon: 'tabler-mood-xd',
      size: '28',
    },
  },
  {
    value: 'Romance',
    icon: {
      icon: 'tabler-hearts',
      size: '28',
    },
  },
  {
    value: 'ScienceFiction',
    icon: {
      icon: 'tabler-ufo',
      size: '28',
    },
  },
]

const selectedCheckbox = ref([])



// Hier ist der Abschnitt für die API (BACKEND)
let book = null

onMounted(() => {
  const isbn = '9783898798822' // Ersetze durch die gewünschte ISBN

  BookService.getBookByIsbn(isbn)
    .then(response => {
      // book = response.data
      book = response
    })
    .catch(error => {
      console.error(error)
    })
})




// const toggleCheckboxOne = ref(true)
// const genreBool = ref(false)




// const genre1Color = ref('#a8a6a6')

// let activeGenre = []

/*let genres = [{
  id: 1,
  name: "Horror",
  icon: "tabler-ghost-2",

  color: "#a8a6a6",
  bool: true,
},
{
  id: 2,
  name: "Test",
  color: "#a8a6a6",
  icon: "tabler-ghost-2",
  bool: false,
},
{
  id: 3,
  name: "History",
  color: "#9fa8da",
  icon: "tabler-timeline",
  bool: false,
},
{
  id: 4,
  name: "Anton",
  color: "#9fa8da",
  icon: "tabler-ghost-2",
  bool: false,
}]*/

// const abenteuerBool = ref(false)
// const people = ref(['Mike'])

/*function TestGenreActive(genre, bool){
  console.log("Hey Genre:", genre, bool)
  bool = !bool
  console.log("Bye Genre:", genre, bool)

  return bool

}*/

/*function IsGenreActive(genre) {
  return activeGenre.includes(genre)
}*/

/*function  ToggleIsGenreSelected(genre) {
  console.log('IsGenreActive', IsGenreActive(genre))
  console.log('ToggleIsGenreSelected genre', genre)
  if (IsGenreActive(genre)){
    const index = activeGenre.indexOf(genre)

    activeGenre.splice(index, 1)

    console.log(`if values: ${activeGenre}`)
  } else {
    activeGenre.push(genre)
    console.log(`else values: ${activeGenre}`)
  }

  // this.genreBool = !this.genreBool
  /!*genre.bool = !genre.bool
  genre = {
    id: genre.id,
    name: genre.name,
    color: genre.color,
    icon: genre.icon,
    bool: genre.bool
  }*!/
  // console.log("genreBool", genreBool)
  // console.log("genre", genre)
  // console.log("genreselected", genre.selected)
  // console.log("genres name", genre.name)
  // console.log("genres id", genre.id)
  // console.log("genres icon", genre.icon)
  // console.log("genres color", genre.color)
  /!*genre.selected = !genre.selected
  if (!genre.selected) {
    genre.color = "#cccccc" + "!important"
    console.log("IF !genre.selected", genre.selected, genre.color)
  } else {
    genre.color = vuetifyTheme.current.value.colors.primary
    console.log("ELSE genre.selected", genre.selected, genre.color)
  }

  // genre.color = "#cccccc" + "!important"
  console.log("genreNew", genre, genre.color)*!/
}*/

// lifecycle hooks
/*onMounted(() => {
  // rowFevercurveConnectors()
})*/

/*computed() {
  genreBackgroundColor() {
    return (genreId) => {
      return IsGenreActive(genreId) ? vuetifyTheme.current.value.colors.primary : '#acadac'
    }
  }
}*/
</script>

<style scoped lang="scss">
.genre-section-main {
  display: flex;
}
</style>
