<template>
  <VRow class="match-height">
    <VCol
      cols="12"
      md="12"
    >
      <VCard
        title="Büchersuche"
        subtitle="Vorbeischauen – Vergleichen – Verlieben"
      >
        <div class="grid-container">
          <div class="item1">
            anspruchsvoll <br>
            lustig <br>
            spannend <br>
            brutal <br>
            sittsam
          </div>
          <div class="item2">
            <!--      Slider -->
            <div style="position: relative; height: 120px">
              <!--              Fieberkurve -->
              <canvas
                id="myCanvas"
                width="240"
                height="130"
              >
                Your browser does not support the HTML canvas tag.
              </canvas>

              <div class="FieberkurveGesamt">
                <div
                  class="Fieberkurve"
                  @click="FevercurveIsClicked('schwierigkeit')"
                >
                  <input
                    id="myRange"
                    v-model="schwierigkeit"
                    type="range"
                    min="1"
                    max="7"
                    class="slider"
                    :style="{ color: '#000000' }"
                  >
                  <div
                    class="slider-track"
                    :style="{ backgroundColor: ColorRow1 }"
                  />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                </div>
                <!--                :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->


                <div
                  class="Fieberkurve"
                  @click="FevercurveIsClicked('stimmung')"
                >
                  <input
                    id="myRange"
                    v-model="stimmung"
                    type="range"
                    min="1"
                    max="7"
                    class="slider"
                  >
                  <div
                    class="slider-track"
                    :style="{ backgroundColor: ColorRow2 }"
                  />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                </div>

                <div
                  class="Fieberkurve"
                  @click="FevercurveIsClicked('spannung')"
                >
                  <input
                    id="myRange"
                    v-model="spannung"
                    type="range"
                    min="1"
                    max="7"
                    class="slider"
                  >
                  <div
                    class="slider-track"
                    :style="{ backgroundColor: ColorRow3 }"
                  />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                </div>

                <div
                  class="Fieberkurve"
                  @click="FevercurveIsClicked('gewalt')"
                >
                  <input
                    id="myRange"
                    v-model="gewalt"
                    type="range"
                    min="1"
                    max="7"
                    class="slider"
                  >
                  <div
                    class="slider-track"
                    :style="{ backgroundColor: ColorRow4 }"
                  />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                </div>

                <div
                  class="Fieberkurve"
                  @click="FevercurveIsClicked('erotik')"
                >
                  <input
                    id="myRange5"
                    v-model="erotik"
                    type="range"
                    min="1"
                    max="7"
                    class="slider"
                    :class="{ backgroundColor: '#e70707' }"
                  >
                  <div
                    class="slider-track"
                    :style="{ backgroundColor: ColorRow5 }"
                  />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                  <div class="kreis" />
                </div>
              </div>
              <!--              ENDE FIEBERKURVE -->
            </div>
          </div>
          <div class="item3">
            leseleicht<br>
            traurig<br>
            entspannend<br>
            gewaltfrei<br>
            erotisch
          </div>
        </div>



        <div
          style="
          width: 100%;
          margin: 5px;
          display: flex;
          justify-content: center;"
        >
          <VBtn
            size="small"
            @click="resetFevercurve"
          >
            Fieberkurve zurücksetzen
          </VBtn>
        </div>

        <div style="position: absolute; top: 100px; left: 10px; color: rgba(185,17,17,0.85)">
          R1: {{ schwierigkeit }}, {{ isRow1Active }} <br>
          R2: {{ stimmung }}, {{ isRow2Active }} <br>
          R3: {{ spannung }}, {{ isRow3Active }} <br>
          R4: {{ gewalt }}, {{ isRow4Active }} <br>
          R5: {{ erotik }}, {{ isRow5Active }} <br>
        </div>
        <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
          {{ selectedCheckbox }}
        </div>

        <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, Untertitel oder Auor 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>
<!--        <hr>-->

      </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:"
          >


        <!-- 👉 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="150"
                  height="300px"
                  :src="harryPotter1"
                  />
                -->
              </div>

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

              <div>
                <VCardTitle>Harry Potter</VCardTitle>
                <VCardText>
                  <div style="position: relative; height: 120px">
                    <!--              Fieberkurve -->
                    <canvas
                      id="myCanvas"
                      width="240"
                      height="130"
                    >
                      Your browser does not support the HTML canvas tag.
                    </canvas>

                    <div class="FieberkurveGesamt">
                      <div
                        class="Fieberkurve"
                        @click="FevercurveIsClicked('schwierigkeit')"
                      >
                        <input
                          id="myRange"
                          v-model="schwierigkeit"
                          type="range"
                          min="1"
                          max="7"
                          class="slider"
                          :style="{ color: '#000000' }"
                        >
                        <div
                          class="slider-track"
                          :style="{ backgroundColor: ColorRow1 }"
                        />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                      </div>
                      <!--                :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->


                      <div
                        class="Fieberkurve"
                        @click="FevercurveIsClicked('stimmung')"
                      >
                        <input
                          id="myRange"
                          v-model="stimmung"
                          type="range"
                          min="1"
                          max="7"
                          class="slider"
                        >
                        <div
                          class="slider-track"
                          :style="{ backgroundColor: ColorRow2 }"
                        />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                      </div>

                      <div
                        class="Fieberkurve"
                        @click="FevercurveIsClicked('spannung')"
                      >
                        <input
                          id="myRange"
                          v-model="spannung"
                          type="range"
                          min="1"
                          max="7"
                          class="slider"
                        >
                        <div
                          class="slider-track"
                          :style="{ backgroundColor: ColorRow3 }"
                        />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                      </div>

                      <div
                        class="Fieberkurve"
                        @click="FevercurveIsClicked('gewalt')"
                      >
                        <input
                          id="myRange"
                          v-model="gewalt"
                          type="range"
                          min="1"
                          max="7"
                          class="slider"
                        >
                        <div
                          class="slider-track"
                          :style="{ backgroundColor: ColorRow4 }"
                        />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                      </div>

                      <div
                        class="Fieberkurve"
                        @click="FevercurveIsClicked('erotik')"
                      >
                        <input
                          id="myRange5"
                          v-model="erotik"
                          type="range"
                          min="1"
                          max="7"
                          class="slider"
                          :class="{ backgroundColor: '#e70707' }"
                        >
                        <div
                          class="slider-track"
                          :style="{ backgroundColor: ColorRow5 }"
                        />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                        <div class="kreis" />
                      </div>
                    </div>
                  </div>
                </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 { 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([])
const toggleCheckboxOne = ref(true)

const schwierigkeit = ref(4)
const stimmung = ref(4)
const spannung = ref(4)
const gewalt = ref(4)
const erotik = ref(4)

const genreBool = ref(false)

const isResetButtonPressed = ref(false)
const firstClick = ref(false)

const ColorRow1 = ref('#a8a6a6')
const ColorRow2 = ref('#a8a6a6')
const ColorRow3 = ref('#a8a6a6')
const ColorRow4 = ref('#a8a6a6')
const ColorRow5 = ref('#a8a6a6')

const genre1Color = ref('#a8a6a6')

const isRow1Active = ref(false)
const isRow2Active = ref(false)
const isRow3Active = ref(false)
const isRow4Active = ref(false)
const isRow5Active = ref(false)

// const genre1 = ref(true)
// const genre2 = ref(true)
// const genre3 = ref(true)

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)*/
}

function FevercurveIsClicked(RowValue) {
  isResetButtonPressed.value = true
  switch (RowValue) {
  case "schwierigkeit":
    console.log("Line: 1")
    ColorRow1.value = '#cccccc'
    isRow1Active.value = true
    break
  case "stimmung":
    console.log("Line: 2")
    ColorRow2.value = '#cccccc'
    isRow2Active.value = true
    break
  case "spannung":
    console.log("Line: 3")
    ColorRow3.value = '#cccccc'
    isRow3Active.value = true
    break
  case "gewalt":
    console.log("Line: 4")
    ColorRow4.value = '#cccccc'
    isRow4Active.value = true
    break
  case "erotik":
    console.log("Line: 5")
    ColorRow5.value = '#cccccc'
    isRow5Active.value = true
    break
  }
  console.log("firstClick:", firstClick.value)

  if (!firstClick.value) {
    rowFevercurveConnectors()
  }
  firstClick.value = true
}

function resetFevercurve() {
  if (!isResetButtonPressed.value) {
    return
  }
  console.log("reset Fevercurve")

  isResetButtonPressed.value = false
  firstClick.value = false

  ColorRow1.value = '#a8a6a6'
  ColorRow2.value = '#a8a6a6'
  ColorRow3.value = '#a8a6a6'
  ColorRow4.value = '#a8a6a6'
  ColorRow5.value = '#a8a6a6'

  isRow1Active.value = false
  isRow2Active.value = false
  isRow3Active.value = false
  isRow4Active.value = false
  isRow5Active.value = false

  schwierigkeit.value = 4
  stimmung.value = 4
  spannung.value = 4
  gewalt.value = 4
  erotik.value = 4

  clearFevercurveConnectors()
}

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

watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
  if (isResetButtonPressed.value){
    rowFevercurveConnectors()
  }
})

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

function clearFevercurveConnectors() {
  console.log("Striche werden gecleart")

  let c = document.getElementById("myCanvas")
  let ctx = c.getContext("2d")
  ctx.clearRect(0, 0, c.width, c.height)
}


function rowFevercurveConnectors() {
  console.log("Funktion wird aufgerufen")

  let c = document.getElementById("myCanvas")
  let ctx = c.getContext("2d")

  //settings
  // let gradient = ctx.createLinearGradient(182, 5, 41, 100)
  // gradient.addColorStop("0", "#3f5efb")
  // gradient.addColorStop("1.0", "#b60529")
  // ctx.strokeStyle = gradient
  ctx.strokeStyle = "red"
  ctx.lineWidth = 4

  // clear canvas
  ctx.clearRect(0, 0, c.width, c.height)
  ctx.beginPath()

  let Breite = 240
  let Hoehe = 130
  let Kreis = 20

  ctx.moveTo(((schwierigkeit.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((1 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
  ctx.lineTo(((stimmung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((2 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
  ctx.lineTo(((spannung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((3 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
  ctx.lineTo(((gewalt.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((4 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
  ctx.lineTo(((erotik.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((5 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))

  ctx.stroke()
}
</script>

<style scoped lang="scss">
//Grid Layout
.item1 {
  grid-area: txtLinks;
  background: transparent !important;
}

.item2 {
  grid-area: Fieberkurve;
  background: transparent !important;
}

.item3 {
  grid-area: txtRechts;
  background: transparent !important;
}

.grid-container {
  display: grid;
  grid-template-areas: 'txtLinks Fieberkurve txtRechts';
  gap: 10px;
  justify-content: center;
  line-height: 26px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
}

//Grid Layout END


canvas {
  z-index: 2;
  //border:1px solid #000000;
  position: absolute;
}

.FieberkurveGesamt {
  height: 130px;
  width: 240px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;

}

.Fieberkurve {
  position: relative;
  width: 240px;
  display: flex;
  justify-content: space-between;
  //background: #27c21f;
  //padding: ;
  border-radius: 25px;
}

.kreis {
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #CECCCCDB;
  box-shadow: 2px 12px 27px -13px rgba(0,0,0,0.48);
}


.slider {
  z-index: 3;
  width: 100%;
  position: absolute;
  //top: 10px;
  -webkit-appearance: none;

  //background: #c29c1f;
  //height: 7.5px;
  //margin-top: 3.5px;

  //background: rgba(50, 150, 11, 0.81);
  outline: none;
  //border: 5px solid rgba(232, 64, 64, 0.83);
  border-radius: 8px;
  cursor: pointer;
}

.slider-track {
  position: absolute;
  width: 100%;
  border-radius: 8px;
  //background: #bb2626;
  height: 10px;
  margin-top: 5px;
}


/*  Kreis  */
/* for chrome/safari */
.slider::-webkit-slider-thumb {
  //z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #F07D00;
  cursor: pointer;
  //border: 5px solid red;
  border-radius: 100%;
}

/* for firefox */
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #000;
  cursor: pointer;
  //border: 5px solid lawngreen;
  border-radius: 4px;
}


.genre-section-main {
  display: flex;
}
</style>
