<script setup>
import { ref, watch, defineProps, defineEmits } from "vue"

const props = defineProps({
  showResetButton: {
    type: Boolean,
    required: true,
  },
  showCategories: {
    type: Boolean,
    required: true,
  },
})

/*
const emit = defineEmits(['buttonClicked'])

const emitButtonClick = () => {
  emit('buttonClicked', 1)
}
*/

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

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

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

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

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()
}

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()
}




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

<template>
  <div>
    <div class="grid-container">
      <div
        v-if="props.showCategories"
        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>
        </div>
      </div>
      <div
        v-if="props.showCategories"
        class="item3"
      >
        leseleicht<br>
        traurig<br>
        entspannend<br>
        gewaltfrei<br>
        erotisch
      </div>
    </div>
    <!--              ENDE FIEBERKURVE -->
    <!--              Button Fieberkurve zurücksetzen -->
    <div
      v-if="props.showResetButton"
      style="
          width: 100%;
          margin: 5px;
          display: flex;
          justify-content: center;"
    >
      <VBtn
        size="small"
        @click="resetFevercurve"
      >
        Fieberkurve zurücksetzen
      </VBtn>
    </div>
  </div>
</template>

<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;
}
</style>
