<template>
  <div>
    <div class="row text-center">
      <div class="col-12">
        <h1 class="h3 fw-bold mb-4">
          {{ t("Please choose a soundscape") }}
        </h1>
        <p class="text-muted mx-auto">
          {{ t("You can change your selection at any time.") }}
        </p>
      </div>
      <div class="col-12 pt-4">
        <div class="d-flex justify-content-center">
          <div class="checkmark px-1 pt-2 d-block d-sm-inline-block d-inline-block" @click.prevent="saveSetting('Lagoon')">
            <input id="success-outlined1" type="radio" class="btn-check" name="options-outlined" autocomplete="off">
            <label class="btn pt-4 checklabel" for="success-outlined1">
              <svg width="75" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45.524 2c-6.347 0-11.391 2.593-15.426 6.39-4.034 3.797-7.11 8.764-9.814 13.642-2.703 4.878-5.047 9.685-7.452 13.157-2.406 3.47-4.707 5.458-7.474 5.458a1.219 1.219 0 0 0-.518.107 1.339 1.339 0 0 0-.441.32 1.506 1.506 0 0 0-.295.485 1.63 1.63 0 0 0 0 1.148c.068.181.169.346.295.484.126.139.276.248.44.321.165.074.342.11.519.107 3.927 0 6.981-2.844 9.597-6.619 2.616-3.775 4.958-8.629 7.61-13.412 2.651-4.784 5.6-9.479 9.265-12.928 3.664-3.449 7.992-5.687 13.694-5.687 1.97 0 5.187.55 7.72 1.977 2.533 1.427 4.33 3.462 4.33 6.941 0 4.46-6.184 6.167-8.208 2.236a1.432 1.432 0 0 0-.434-.51 1.217 1.217 0 0 0-1.22-.136 1.349 1.349 0 0 0-.517.405c-1.007 1.278-1.838 1.665-2.536 1.724-.699.06-1.396-.226-2.09-.813-.693-.586-1.331-1.464-1.765-2.328-.433-.864-.635-1.755-.635-2.064a1.629 1.629 0 0 0-.097-.575 1.509 1.509 0 0 0-.289-.49 1.34 1.34 0 0 0-.436-.328 1.226 1.226 0 0 0-1.034 0 1.339 1.339 0 0 0-.437.328c-.124.14-.222.307-.289.49a1.638 1.638 0 0 0-.096.575c0 1.177.384 2.33.975 3.51.592 1.18 1.418 2.345 2.482 3.245a6.356 6.356 0 0 0 1.925 1.13c.257 6.345 3.448 12.1 8.177 16.272 4.934 4.352 11.567 7.057 18.574 7.057a1.23 1.23 0 0 0 .519-.107 1.34 1.34 0 0 0 .44-.32c.127-.139.227-.304.295-.485a1.627 1.627 0 0 0 0-1.148 1.505 1.505 0 0 0-.295-.485 1.344 1.344 0 0 0-.44-.32 1.22 1.22 0 0 0-.519-.107c-6.382 0-12.468-2.498-16.906-6.414-4.182-3.689-6.837-8.578-7.134-13.807.837-.253 1.66-.796 2.459-1.507 3.944 4.576 12.209 1.793 12.209-5.028 0-4.695-2.721-7.863-5.795-9.595C51.384 2.565 47.906 2 45.524 2ZM37.47 22.79a1.28 1.28 0 0 0-.94.45 1.578 1.578 0 0 0-.378 1.056c0 3.468 1.48 7.008 3.415 10.132 1.935 3.124 4.345 5.82 6.554 7.455.146.112.31.19.484.231.174.04.353.042.528.005.174-.037.34-.112.488-.221.148-.11.275-.25.374-.414.098-.164.166-.349.2-.542a1.646 1.646 0 0 0-.004-.586 1.576 1.576 0 0 0-.207-.538 1.41 1.41 0 0 0-.378-.408c-1.809-1.339-4.084-3.845-5.832-6.666-1.747-2.821-2.944-5.97-2.944-8.448a1.623 1.623 0 0 0-.099-.58 1.508 1.508 0 0 0-.294-.492 1.334 1.334 0 0 0-.444-.326 1.224 1.224 0 0 0-.523-.109Zm-7.994 25.265c-.517 0-.994.338-1.213.86 0 0-2.327 5.112-6.82 5.112-4.494 0-6.82-5.112-6.82-5.112-.246-.564-.78-.902-1.339-.84l-.126.003c-.423.094-.778.401-.962.837 0 0-2.395 5.112-6.82 5.112-.48-.006-.93.27-1.177.734a1.648 1.648 0 0 0 0 1.501c.247.465.697.744 1.177.738 4.566 0 6.846-3.033 8.033-4.973C14.592 53.972 16.85 57 21.444 57c4.592 0 6.85-3.028 8.033-4.973C30.653 53.972 32.917 57 37.51 57c4.593 0 6.857-3.028 8.034-4.973C46.719 53.972 48.978 57 53.576 57c4.598 0 6.856-3.028 8.033-4.973C62.791 53.967 65.071 57 69.642 57c.481.006.93-.274 1.177-.738a1.648 1.648 0 0 0 0-1.5c-.246-.466-.696-.74-1.177-.735-4.435 0-6.82-5.112-6.82-5.112-.22-.524-.696-.86-1.213-.86-.517 0-.994.338-1.213.86 0 0-2.322 5.112-6.82 5.112-4.499 0-6.82-5.112-6.82-5.112-.22-.524-.697-.86-1.213-.86-.517 0-.994.338-1.214.86 0 0-2.321 5.112-6.82 5.112-4.498 0-6.82-5.112-6.82-5.112-.22-.524-.696-.86-1.213-.86Z" fill="currentColor" stroke="currentColor" /></svg>
              <p class="text-center">{{ t("Lagoon") }}</p>
            </label>
          </div>

          <div class="checkmark px-1 pt-2 d-inline-block" @click.prevent="saveSetting('Tropics')">
            <input id="danger-outlined1" type="radio" class="btn-check checkmark" name="options-outlined" autocomplete="off">
            <label class="btn checklabel  ms-0 ms-sm-3 pt-4 " for="danger-outlined1">
              <svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M29.965 1.006c-.059.011-.118.027-.172.043-.64.146-1.09.722-1.074 1.38v8.276c-.006.495.252.959.682 1.212.43.248.957.248 1.386 0 .43-.253.688-.717.683-1.212V2.429a1.373 1.373 0 0 0-.43-1.051 1.373 1.373 0 0 0-1.075-.372ZM10.363 9.11c-.515.091-.93.469-1.074.97a1.388 1.388 0 0 0 .387 1.4l5.846 5.863c.333.41.865.598 1.38.48.511-.12.914-.523 1.032-1.035a1.388 1.388 0 0 0-.478-1.385L11.61 9.541a1.379 1.379 0 0 0-1.118-.431h-.129Zm39.032 0c-.312.043-.602.2-.817.43l-5.846 5.863a1.388 1.388 0 0 0-.478 1.385c.118.512.521.916 1.032 1.034a1.38 1.38 0 0 0 1.38-.48l5.847-5.861c.43-.41.553-1.051.3-1.59a1.375 1.375 0 0 0-1.418-.781Zm-19.43 7.112c-.043.01-.086.027-.129.043a1.422 1.422 0 0 0-.258.043l-.043.043c-7.297.313-13.197 6.272-13.197 13.664 0 7.592 6.185 13.794 13.756 13.794 7.571 0 13.756-6.202 13.756-13.794 0-7.365-5.852-13.303-13.111-13.664-.048 0-.08-.043-.129-.043a1.324 1.324 0 0 0-.43-.086h-.215Zm.043 2.759h.216c6.017.07 10.875 4.983 10.875 11.034 0 6.1-4.922 11.035-11.005 11.035-6.077 0-11.004-4.935-11.004-11.035 0-6.067 4.879-10.986 10.918-11.034ZM2.196 28.636a1.392 1.392 0 0 0 .387 2.759h8.253c.495.005.957-.254 1.21-.685a1.396 1.396 0 0 0 0-1.39 1.383 1.383 0 0 0-1.21-.684H2.195Zm46.77 0a1.392 1.392 0 0 0 .387 2.759h8.252c.495.005.957-.254 1.21-.685a1.396 1.396 0 0 0 0-1.39 1.383 1.383 0 0 0-1.21-.684H48.965Zm-32.628 13.62a1.38 1.38 0 0 0-.816.432L9.676 48.55a1.388 1.388 0 0 0-.479 1.385c.119.512.522.916 1.032 1.034a1.38 1.38 0 0 0 1.381-.48l5.846-5.861a1.378 1.378 0 0 0 .312-1.525 1.378 1.378 0 0 0-1.3-.846h-.13Zm27.082 0c-.516.093-.93.47-1.075.97a1.388 1.388 0 0 0 .387 1.401l5.846 5.863c.333.41.865.598 1.381.48.51-.12.914-.523 1.032-1.035a1.388 1.388 0 0 0-.478-1.385l-5.846-5.862a1.373 1.373 0 0 0-.99-.431h-.258Zm-13.455 5.648c-.059.01-.118.026-.172.043-.64.145-1.09.722-1.074 1.379v8.276c-.006.496.252.959.682 1.212.43.248.957.248 1.386 0 .43-.253.688-.716.683-1.212v-8.276a1.373 1.373 0 0 0-.43-1.05 1.373 1.373 0 0 0-1.075-.373Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" /></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h60v60H0z" /></clipPath></defs></svg>
              <p class="text-center">{{ t("Tropics") }}</p>
            </label>
          </div>
        </div>
        <div class="d-flex mx-auto justify-content-center ">
          <div class="checkmark box12 pt-2 pt-sm-3 px-1 d-block d-sm-inline-block" @click.prevent="saveSetting('Forest')">
            <input id="success-outlined2" type="radio" class="btn-check" name="options-outlined" autocomplete="off">
            <label class="btn pt-4 checklabel" for="success-outlined2">
              <svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path
                fill="none"
                d="M16.998 39.947V57m17.053-8.526V57m-8.526-34.105v.568a8.526 8.526 0 0 1-3.127 16.484s-9.11.05-11.084 0a8.526 8.526 0 0 1-2.842-16.484v-.568a8.526 8.526 0 1 1 17.053 0Z"
                stroke="currentColor"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              /><path
                fill="none"
                d="M31.209 48.474h23.59a2.842 2.842 0 0 0 1.989-4.832l-8.526-9.379h.852a2.843 2.843 0 0 0 1.99-4.831l-8.527-9.38h.569a2.843 2.843 0 0 0 2.273-4.831L34.051 3l-3.979 4.263"
                stroke="currentColor"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              /></svg>
              <p class="text-center">{{ t("Forest") }}</p>
            </label>
          </div>
          <div class="checkmark box12 pt-2 px-1 pt-sm-3 d-block d-sm-inline-block" @click.prevent="saveSetting('Meadow')">
            <input id="danger-outlined" type="radio" class="btn-check  " name="options-outlined" autocomplete="off">
            <label class="btn pt-4 checklabel ms-0 ms-lg-3" for="danger-outlined">
              <svg width="60" height="60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.716 1.592C13.234 1.155 14.08.975 15 1c1.574.042 2.951 1.506 3.5 2 10 9 15.035 13.525 17.402 23.261 1.598 6.573 2.014 11.137 2.5 13.573 3.316-5.574 8.12-15.3 16.098-18.49.563-.226 1.404-.61 2-.5.596.108 1.053.09 1.5.5.447.408.693.415.854.999.162.584.174.92 0 1.5l-.934 2.418c-4.382 14.59-7.018 19.582-6.518 30.073 0 .855.004 1.134-.402 1.666-.124.162-.743.834-1.598.834-.855 0-1.41-.072-1.902-.834-.413-.64-.486-1.533-.486-2.388 0-9.844 4.198-19.51 7.388-30.278-3.615 2.398-9.402 9.917-11 13-2.465 4.75-3.777 10.205-3.777 17.278 0 .855-.118 1.603-.625 2.388-.394.61-.798.834-1.653.834s-1.379-.578-1.847-1.334c-.398-.643-.432-1.033-.432-1.888 0-9.64-1.736-24.465-4.568-32.778-1.901-5.571-8.871-11.824-13.692-16.5 3.277 12.438 7.65 31.088 7.65 48.456v.822c0 .855.115 1.631-.458 2.388-.425.561-.931.826-1.777.834-.838.009-1.28-.33-1.723-.834-.657-.748-.5-1.645-.5-2.5 0-7.379-.16-13.989-1.987-19.657-1.05-3.264-8.977-12.07-11.693-14.5C9.284 31.503 13 44.923 13 55.612c0 .855.124 1.668-.5 2.388-.439.507-.83.834-1.5.834s-1.058-.33-1.5-.834c-.657-.748-.5-1.645-.5-2.5 0-12.45-2.174-20.043-6.933-34.314a3.222 3.222 0 0 1 4.253-4.008c4.495 1.794 9.116 9.046 11.693 11.878-.859-6.502-3.746-17.723-6.212-23.8a3.222 3.222 0 0 1 .915-3.664Z" fill="currentColor" /></svg>
              <p class="text-center">{{ t("Meadow") }}</p>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'pinia'
import { useAudioStore } from '@/stores/audio'
import { useCounterStore } from '@/stores/counter'
export default {
  emits: ['next-step'],
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath
    }
  },
  data () {
    return {
      bar_val: 100,
      form: {
        soundscape: ''
      }
    }
  },
  computed: { ...mapState(useCounterStore, ['count']) },
  ...mapState(useAudioStore, ['connectedSoundScape']),
  mounted () {
    this.increment(100)
  },
  methods: {
    ...mapActions(useCounterStore, ['increment']),
    ...mapActions(useCounterStore, ['decrement']),

    async saveSetting (value) {
      this.form.soundscape = value
      this.connectedSoundScape = value

      try {
        const { data } = await this.$axios.post('/api/update-setting', this.form)
        if (data.success) {
          this.form = data.setting

          // Jetzt erst weiterleiten
          useRouter().push('/')
        } else {
          this.$toast.error('Speichern fehlgeschlagen.')
        }
      } catch (e) {
        this.$toast.error('something went wrong while saving...')
      }
    }

  }
}
</script>

<style scoped>
.bar{
  background-color: #e9c046;
}
.checklabel:hover{
  border-color: #e9c046;
}
.checklabel {
  color: #e9c046 !important;
  border: 1px solid #e9c046;
}

.checkmark input:checked ~ .checklabel {
  background-color: #e9c046;
  border: 1px solid #e9c046;
  color: #f4f5f7 !important;
}
.checkmark input:checked ~ .checklabel svg path {
  fill: white;
}
.checkmark input:hover ~ .checklabel {
  background-color: #e9c046;
  border: 1px solid #e9c046;
  color: #f4f5f7 !important;
}

@media only screen and (max-width: 992px) and (min-width: 575px)  {
  .box12{
    padding: 11px !important;
  }
}
</style>
