<template>
  <div>
    <div class="row">
      <div class="col-12 ">
        <h4 class="text-center fw-bold pt-5">{{t("How is your audio hardware connected?")}}</h4>
        <p class="text-center mb-0 pb-0 text-muted">As input, please select the microphone of your laptop or mobile device – not of your headphones.</p>
        <p class="text-center mt-0 pt-0 text-muted">To use Mindboost, headphones are required.</p>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-11 pt-md-4">
        <form>
          <div class="row justify-content-center">
            <div class="col-md-3 text-center">
              <h6 class="pb-0 mb-0">Input device:</h6>
              <p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select laptop or mobile device microphone)</p>
              <select class="form-select pt-1 mt-0 select-box ">
                <option>Internal Microphone</option>
              </select>
            </div>
          </div>

          <div class="row justify-content-center pt-3">
            <div class="col-md-3 text-center">
              <h6 class="pb-0 mb-0 " >Output device:</h6>
              <p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select headphones or headphone output)</p>
              <select class="form-select pt-1 mt-0 select-box ">
                <option>Audio Output</option>
              </select>
            </div>
          </div>

          <div class="row justify-content-center pt-3">
            <div class="col-md-3 text-center">
              <button class="btn col-4 next-btn" >NEXT</button>
            </div>
          </div>
        </form>
      </div>

    </div>


  </div>
</template>
<script>
import {useCounterStore} from '@/stores/counter';
import {mapState,mapActions} from "pinia";
export default {
  setup() {
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },
  mounted() {
    this.increment(100);
  },
  computed:{...mapState(useCounterStore,['count'])},

  data(){
    return{
      bar_val:100,
      form:{
        soundscape:'',
      }
    }
  },
  methods:{
    ...mapActions(useCounterStore,['increment']),
    ...mapActions(useCounterStore,['decrement']),
    saveSetting(value){
      this.form.soundscape=value;
      this.$axios.post('/api/update-setting',this.form).then(({data})=>{
        console.log(data);
        if(data.success){
          // this.$toast.success(data.message);
          this.$router.push(this.localePath('letsgo'));
        }
      }).catch((e)=>{
        this.$toast.error("something went wrong while saving...");
      })
    }
  },
}
</script>

<style scoped>
.bar{
  background-color: #e9c046;
}

.select-box{
  border: 2px solid #e9c046;
  box-shadow: none;
}

.select-box:focus{
  border: 2px solid #e9c046;
  box-shadow: none;

}
.next-btn{
  background: #e9c046;
  color: white;
  font-weight: 600;
  font-size: 18px;
  padding: 8px 10px;
}
.next-btn:hover{
  background: #e9c046;
  color: white;
}
</style>