<script setup>
import { RouterView } from 'vue-router'
import router from "@/router";
import { useApplicationStore } from './stores/application';
import { storeToRefs } from "pinia";
import RangeSliderComponent from '@/components/common/RangeSliderComponent.vue'
import { usePlayerStore } from './stores/player';
import i18n from '@/i18n/i18n'
const application = useApplicationStore()
const player = usePlayerStore()
const { settings } = storeToRefs(application)

const changeLanguage = (lang) => {
  application.language = lang
  i18n.global.locale.value = application.language
}
const saveUsername = (event) => {
  if (event.target.value.length > 0) player.username = event.target.value
}
</script>

<template>
  <div class="header">
    <div class="header-wrapper">
      <button class="header-button " @click="application.openSettings()">{{ $t('button.settings') }}</button>
      <button class="header-button " @click="application.openMenu()">{{ $t('button.menu') }}</button>
    </div>
  </div>
  <div class="settings" v-if="application.showSettings">
    <button class="button-close" @click="application.closeSettings()">{{ $t('button.close') }}</button>
    <div class="settings-group">
      <div class="settings-group-title">{{ $t('settings.sound.title') }}</div>
      <div class="mute-wrapper">
        <div class="mute-title">{{ $t('settings.sound.mute') }}</div>
        <input type="checkbox" v-model="settings.sound.muted">
      </div>
      <RangeSliderComponent v-model="settings.sound.master" :name="$t('settings.sound.master')" />
      <RangeSliderComponent v-model="settings.sound.music" :name="$t('settings.sound.music')" />
      <RangeSliderComponent v-model="settings.sound.game" :name="$t('settings.sound.effects')" />
      <RangeSliderComponent v-model="settings.sound.ambient" :name="$t('settings.sound.ambient')" />
    </div>
  </div>
  <div class="menu" v-if="application.showMenu">
    <button class="button-close" @click="application.closeMenu()">{{ $t('button.close') }}</button>
    <div class="menu-group">
      <div class="menu-group-title">{{ $t('title.player') }}</div>
      <input class="input-menu-username" type="text" @change="saveUsername($event)" :value="player.username" />
      <div class="menu-player-id">{{ player.id }}</div>
    </div>
    <div class="menu-group">
      <div class="menu-group-title">{{ $t('title.game') }}</div>
      <button class="menu-button" @click="router.replace({ name: 'index' }); application.closeMenu()">{{
        $t('button.mainScreen') }}</button>
      <button class="menu-button">{{ $t('button.instruction') }}</button>
      <button class="menu-button">{{ $t('button.rules') }}</button>
    </div>
    <div class="menu-group-bottom">
      <div class="menu-group-title">{{ $t('title.language') }}</div>
      <button class="menu-button-language" @click="changeLanguage('en')">EN</button>
      <button class="menu-button-language" @click="changeLanguage('ru')">RU</button>
    </div>
  </div>
  <div class="menu-overlay" v-if="application.showMenu || application.showSettings"></div>
  <RouterView />
</template>

<style scoped>
.header {
  width: 100%;
  align-items: center;
  height: 100px;
  margin-bottom: 20px;
  position: sticky;
  background-image: url('/public/images/header.png');
  background-color: #72c37a;
}

.header-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 1rem 0 1rem;
  height: 62px;
}

.header-button {
  margin-top: 10px;
  height: 42px;
  min-width: 130px;
  border-radius: 0.5rem;
}

.menu-overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 98;
top:0;
right: 0;
backdrop-filter: blur(4px);
}
.menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  overflow-x: hidden;
  background-color: white;
  height: 100%;
  width: 100%;
  max-width: 32rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.menu-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.menu-group {
  margin-bottom: 2rem;
}

.menu-group-bottom {
  margin-top: auto;
}

.menu-group-title {
  font-size: x-large;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
}

.menu-button-language {
  border-radius: 0.5rem;
}

.menu-button-language+.menu-button-language {
  margin-left: 1rem;
}

.menu-player-id {
  width: 100%;
  text-align: center;
  font-size: smaller;
  color: gray;
}

.settings {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 2rem;
  overflow: hidden;
  background-color: white;
  height: 100%;
  width: 100%;
  max-width: 32rem;
}

.settings-group-title {
  font-size: x-large;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1rem;
}

.mute-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 20% 70% 10%;
  align-content: baseline;
  justify-content: center;
  padding: 0 2rem 1rem 2rem;
}


.button-close {
  width: 100%;
}

.input-menu-username {
  width: 100%;
  text-align: center;
  color: black;

}

.input-menu-username &:hover,
&:focus,
&:active {
  outline: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid gray;
}
</style>
