<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
        <h1 class="h3 fw-bold text-center py-3">
          {{ t("Settings") }}
        </h1>
        <!-- new accordion  -->
        <div class="accordion">
          <div class="accordion-item">
            <div class="accordion-toggle form-check form-switch float-end">
              <label for="toggleAdaptiveSoundscape" class="fw-semibold form-switch__label">{{ t('Adaptive soundscape') }}<br>
                <span class="fw-normal">{{ t('Adaptive Soundscape Text') }}</span>
              </label>
              <input
                id="toggleAdaptiveSoundscape"
                class="form-check-input"
                :checked="adaptiveSoundscape"
                type="checkbox"
                role="switch"
                @change="handleAdaptiveToggle"
              >
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-toggle form-check form-switch float-end">
              <label for="timer" class="fw-semibold">{{ t('Activate Pomodorotimer') }}</label>
              <input
                id="timer"
                class="form-check-input"
                :checked="timerActivated"
                type="checkbox"
                role="switch"
                @change="handleTimerToggle"
              >
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header h3" @click="toggleAccordion($event, 'headphoneTypes')">
              <button class="accordion-button" aria-expanded="false">
                {{ t("Headphones Type") }}
              </button>
            </h2>
            <div class="accordion-content" data-type="headphoneTypes">
              <ul>
                <li>
                  <a :class="{'drop-active':form.headphone_type=='In-ear'}" class="dropdown-item py-2 fs-6" to="/" @click.prevent="saveSetting('In-ear','headphone')"> {{ t("In-Ear") }}
                    <span class="float-end">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="14"
                        viewBox="0 0 20 14"
                        fill="none"
                        data-v-ae18e86e=""
                      ><path d="M5.86326 0.60383C5.69013 0.609264 5.51657 0.627075 5.34451 0.657737C4.88569 0.739501 4.4352 0.912309 4.02107 1.18117L3.30544 1.64524C2.71774 2.02688 2.27864 2.55432 2.00544 3.14758C1.98493 3.14951 1.96412 3.14938 1.94373 3.15227H1.94294C1.75699 3.17883 1.57619 3.24528 1.41404 3.35071C-0.00156889 4.27007 -0.428929 6.152 0.481226 7.54055C1.39142 8.92916 3.28901 9.29666 4.70466 8.37727C4.74672 8.34996 4.78281 8.3166 4.82107 8.28508V12.3999C4.82107 13.1684 5.45259 13.7999 6.22107 13.7999H6.62107C7.38955 13.7999 8.02107 13.1684 8.02107 12.3999V7.17571C9.63509 6.08744 10.0866 3.89546 9.01638 2.26321H9.0156L8.98826 2.22102C8.27851 1.13851 7.07518 0.565795 5.86326 0.60383ZM14.1367 0.60383C12.9248 0.565795 11.7215 1.13853 11.0117 2.22102L10.9844 2.26321H10.9836C9.91334 3.89546 10.3649 6.08744 11.9789 7.17571V12.3999C11.9789 13.1684 12.6104 13.7999 13.3789 13.7999H13.7789C14.5474 13.7999 15.1789 13.1684 15.1789 12.3999V8.28508C15.2171 8.3166 15.2532 8.34996 15.2953 8.37727C16.7109 9.29666 18.6085 8.92916 19.5187 7.54055C20.4289 6.152 20.0015 4.27007 18.5859 3.35071C18.4238 3.24528 18.243 3.17883 18.057 3.15227H18.0562C18.0358 3.14937 18.015 3.14951 17.9945 3.14758C17.7213 2.55435 17.2822 2.02688 16.6945 1.64524L15.9789 1.18117C15.5648 0.912309 15.1143 0.739501 14.6554 0.657737C14.4834 0.627075 14.3098 0.609264 14.1367 0.60383ZM6.02576 1.39836C6.92104 1.41207 7.79198 1.85474 8.31951 2.6593V2.66008L8.34763 2.70227C9.19089 3.98939 8.82915 5.69986 7.53513 6.54055L7.38201 6.63977L6.81951 7.00539C6.34418 7.31393 5.81229 7.45778 5.28591 7.45539C5.29385 7.39239 5.29784 7.3285 5.29607 7.26399C5.28081 6.71556 5.13096 5.85253 4.51638 4.91555C3.95274 4.05623 3.29846 3.58927 2.80857 3.33508C3.02187 2.93601 3.33186 2.58227 3.74138 2.31633L4.45701 1.85149C4.94251 1.53628 5.48859 1.39014 6.02576 1.39836ZM13.9742 1.39836C14.5114 1.39014 15.0574 1.53628 15.5429 1.85149L16.2586 2.31633C16.6681 2.58227 16.9781 2.93601 17.1914 3.33508C16.7015 3.58927 16.0472 4.05623 15.4836 4.91555C14.869 5.85253 14.7191 6.71556 14.7039 7.26399C14.7021 7.32823 14.7062 7.39186 14.714 7.45461C14.1877 7.457 13.6558 7.31393 13.1804 7.00539L12.6179 6.63977L12.4648 6.54055H12.464C11.1704 5.69974 10.8092 3.98923 11.6523 2.70227L11.6531 2.70149L11.6804 2.66008V2.6593C12.208 1.85474 13.0789 1.41207 13.9742 1.39836ZM6.67966 2.22961C6.56437 2.22145 6.44581 2.24642 6.33826 2.30852L5.29841 2.90852C5.01161 3.07412 4.91328 3.44125 5.07888 3.72805C5.24448 4.01485 5.61161 4.11318 5.89841 3.94758L6.93826 3.34758C7.22506 3.18198 7.32339 2.81485 7.15779 2.52805C7.05429 2.3488 6.87182 2.24322 6.67966 2.22961ZM13.3203 2.22961C13.1281 2.24322 12.9457 2.3488 12.8422 2.52805C12.6766 2.81485 12.7749 3.18198 13.0617 3.34758L14.1015 3.94758C14.3883 4.11318 14.7555 4.01485 14.9211 3.72805C15.0867 3.44125 14.9883 3.07412 14.7015 2.90852L13.6617 2.30852C13.5541 2.24642 13.4356 2.22145 13.3203 2.22961ZM2.05544 3.94367C2.15001 3.93026 2.24566 3.94415 2.33044 3.9843h1.33123C2.72151 4.16819 3.32214 4.55465 3.84685 5.35461C4.37147 6.15443 4.48413 6.85669 4.49607 7.28586C4.49887 7.38806 4.46868 7.48582 4.40935 7.57102C4.37312 7.62294 4.32668 7.66905 4.26951 7.70617C3.20676 8.39638 1.81658 8.11847 1.14998 7.10149C0.48333 6.08444 0.787183 4.71203 1.84998 4.0218C1.91401 3.98016 1.98405 3.95398 2.05544 3.94367ZM17.8031 3.94367C17.8493 3.93687 17.8966 3.93706 17.9437 3.94367C18.0154 3.95391 18.0857 3.98003 18.15 4.0218C19.2128 4.71203 19.5166 6.08444 18.85 7.10149C18.1834 8.11847 16.7932 8.39638 15.7304 7.70617C15.6733 7.66905 15.6268 7.62294 15.5906 7.57102C15.5313 7.48582 15.5011 7.38806 15.5039 7.28586C15.5158 6.85669 15.6285 6.15443 16.1531 5.35461C16.6778 4.55465 17.2784 4.16819 17.6687 3.9843H17.6695C17.7118 3.96429 17.7569 3.95048 17.8031 3.94367ZM2.01951 5.4218C1.92048 5.42359 1.82564 5.46204 1.75334 5.52973C1.68104 5.59741 1.63641 5.68951 1.6281 5.78821C1.59915 6.08549 1.66547 6.39728 1.83982 6.66477V6.66555C2.01442 6.93255 2.27361 7.11937 2.55779 7.21242C2.60816 7.23057 2.66166 7.23841 2.71512 7.2355C2.76858 7.23258 2.82091 7.21897 2.86901 7.19546C2.91711 7.17195 2.96 7.13903 2.99514 7.09864C3.03028 7.05825 3.05696 7.01121 3.07359 6.96032C3.09022 6.90944 3.09647 6.85573 3.09196 6.80238C3.08746 6.74903 3.07229 6.69713 3.04736 6.64975C3.02242 6.60237 2.98823 6.56048 2.94682 6.52656C2.9054 6.49264 2.85759 6.46737 2.80623 6.45227C2.68261 6.41179 2.58191 6.33754 2.51013 6.22805C2.43888 6.11874 2.41154 5.99546 2.42419 5.86555C2.43041 5.80907 2.42453 5.75191 2.40693 5.69789C2.38933 5.64386 2.36043 5.5942 2.32214 5.55222C2.28385 5.51023 2.23706 5.47688 2.18488 5.4544C2.13269 5.43191 2.07632 5.4208 2.01951 5.4218ZM17.9687 5.4218C17.9129 5.42245 17.8578 5.43478 17.8071 5.458C17.7563 5.48121 17.7109 5.5148 17.6739 5.5566C17.6369 5.59839 17.609 5.64747 17.5921 5.70068C17.5752 5.75389 17.5697 5.81005 17.5758 5.86555C17.5884 5.99546 17.5611 6.11874 17.4898 6.22805C17.418 6.33754 17.3173 6.41179 17.1937 6.45227C17.1424 6.46737 17.0946 6.49264 17.0531 6.52656C17.0117 6.56048 16.9775 6.60237 16.9526 6.64975C16.9277 6.69713 16.9125 6.74903 16.908 6.80238C16.9035 6.85573 16.9097 6.90944 16.9264 6.96032C16.943 7.01121 16.9697 7.05825 17.0048 7.09864C17.04 7.13903 17.0828 7.17195 17.1309 7.19546C17.179 7.21897 17.2314 7.23258 17.2848 7.2355C17.3383 7.23841 17.3918 7.23057 17.4422 7.21242C17.7263 7.11937 17.9855 6.93255 18.1601 6.66555V6.66477C18.3345 6.39728 18.4008 6.08549 18.3719 5.78821C18.3634 5.68751 18.3171 5.59375 18.2423 5.52578C18.1675 5.45781 18.0698 5.42066 17.9687 5.4218ZM7.22107 7.69602V12.3999C7.22107 12.7362 6.95739 12.9999 6.62107 12.9999H6.22107C5.88475 12.9999 5.62107 12.7362 5.62107 12.3999V8.23977C6.17397 8.18959 6.72271 8.01196 7.22107 7.69602ZM12.7789 7.69602C13.2772 8.01196 13.826 8.18959 14.3789 8.23977V12.3999C14.3789 12.7362 14.1152 12.9999 13.7789 12.9999H13.3789C13.0426 12.9999 12.7789 12.7362 12.7789 12.3999V7.69602Z" fill="currentColor" fill-opacity="0.8" data-v-ae18e86e="" /></svg>
                    </span>
                  </a>
                </li>
                <li>
                  <a :class="{'drop-active':form.headphone_type=='Over-ear'}" class="dropdown-item fs-6 py-2" to="/hometropics" @click.prevent="saveSetting('Over-ear','headphone')"> {{ t("Over-Ear") }}
                    <span class="float-end">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        fill="none"
                        data-v-ae18e86e=""
                      ><path d="M9.99906 0.399902C5.37528 0.399902 1.59906 3.97515 1.59906 8.3999C1.54605 8.39915 1.49343 8.40895 1.44424 8.42871C1.39505 8.44848 1.35028 8.47782 1.31254 8.51504C1.27479 8.55226 1.24481 8.59661 1.22435 8.64551C1.20389 8.69441 1.19336 8.74689 1.19336 8.7999C1.19336 8.85291 1.20389 8.90539 1.22435 8.9543C1.24481 9.0032 1.27479 9.04755 1.31254 9.08477C1.35028 9.12198 1.39505 9.15133 1.44424 9.17109C1.49343 9.19086 1.54605 9.20065 1.59906 9.1999h1.39906C2.45206 9.20065 2.50469 9.19086 2.55387 9.17109C2.60306 9.15133 2.64783 9.12198 2.68558 9.08477C2.72333 9.04755 2.7533 9.0032 2.77376 8.9543C2.79422 8.90539 2.80475 8.85291 2.80475 8.7999C2.80475 8.74689 2.79422 8.69441 2.77376 8.64551C2.7533 8.59661 2.72333 8.55226 2.68558 8.51504C2.64783 8.47782 2.60306 8.44848 2.55387 8.42871C2.50469 8.40895 2.45206 8.39915 2.39906 8.3999C2.39906 8.26095 2.41274 8.12521 2.42093 7.98818C2.47673 8.00825 2.53628 8.01566 2.5953 8.00989C2.65431 8.00411 2.7113 7.98529 2.76214 7.95478C2.81298 7.92428 2.85641 7.88285 2.88928 7.8335C2.92215 7.78415 2.94363 7.72811 2.95218 7.66943C3.08435 6.92305 3.68762 5.67079 4.82952 4.64678C5.97143 3.62276 7.63909 2.7999 9.95843 2.7999C12.2778 2.7999 13.9454 3.62276 15.0873 4.64678C16.2292 5.67079 16.8325 6.92305 16.9647 7.66943C16.9743 7.7355 17.0002 7.79812 17.0402 7.85159C17.0801 7.90506 17.1329 7.94767 17.1935 7.97555C17.2542 8.00343 17.3208 8.01569 17.3874 8.01121C17.454 8.00673 17.5185 7.98565 17.5748 7.9499C17.5846 8.09947 17.5991 8.24803 17.5991 8.3999C17.5461 8.39915 17.4934 8.40895 17.4442 8.42871C17.3951 8.44848 17.3503 8.47782 17.3125 8.51504C17.2748 8.55226 17.2448 8.59661 17.2244 8.64551C17.2039 8.69441 17.1934 8.74689 17.1934 8.7999C17.1934 8.85291 17.2039 8.90539 17.2244 8.9543C17.2448 9.0032 17.2748 9.04755 17.3125 9.08477C17.3503 9.12198 17.3951 9.15133 17.4442 9.17109C17.4934 9.19086 17.5461 9.20065 17.5991 9.1999H18.3991C18.4521 9.20065 18.5047 9.19086 18.5539 9.17109C18.6031 9.15133 18.6478 9.12198 18.6856 9.08477C18.7233 9.04755 18.7533 9.0032 18.7738 8.9543C18.7942 8.90539 18.8048 8.85291 18.8048 8.7999C18.8048 8.74689 18.7942 8.69441 18.7738 8.64551C18.7533 8.59661 18.7233 8.55226 18.6856 8.51504C18.6478 8.47782 18.6031 8.44848 18.5539 8.42871C18.5047 8.40895 18.4521 8.39915 18.3991 8.3999C18.3991 3.97515 14.6228 0.399902 9.99906 0.399902ZM9.99906 1.1999C13.2576 1.1999 16.0138 3.13596 17.0991 5.84834C16.7475 5.24495 16.2586 4.62261 15.6217 4.05146C14.3479 2.90918 12.4691 1.9999 9.95843 1.9999C7.44777 1.9999 5.56894 2.90918 4.29515 4.05146C3.79393 4.50094 3.38775 4.98206 3.06468 5.46084C4.24908 2.95324 6.89748 1.1999 9.99906 1.1999ZM1.59906 9.9999V11.1218H1.62484C1.38611 11.348 1.19906 11.7199 1.19906 12.2288C1.19906 12.6388 1.31376 13.2311 1.50062 13.9608C1.68748 14.6906 1.95104 15.5341 2.2639 16.3421C2.57676 17.1501 2.93618 17.9204 3.33421 18.5147C3.73224 19.1091 4.17147 19.5999 4.79906 19.5999C5.31001 19.5999 5.67754 19.2834 5.86468 18.9585V18.9577C5.88225 18.9273 5.8905 18.9018 5.90374 18.8733C6.06853 18.924 6.25172 18.9476 6.44828 18.9476C6.68365 18.9476 6.91542 18.8809 7.09359 18.7429C7.27176 18.6048 7.38351 18.4112 7.44593 18.2132C7.57078 17.8171 7.54043 17.3775 7.45999 16.8968C7.29913 15.9353 6.89112 14.8076 6.56078 13.9335C6.22974 13.057 5.93316 12.2301 5.57796 11.5851C5.40036 11.2626 5.20855 10.9819 4.96624 10.7655C4.72394 10.5491 4.41189 10.3999 4.07093 10.3999C3.63714 10.3999 3.24635 10.5877 3.02953 10.903C3.02055 10.9161 3.01603 10.9311 3.00765 10.9444C2.85925 10.8725 2.65933 10.7999 2.39906 10.7999V9.9999H1.59906ZM17.5991 9.9999V10.7999C17.3388 10.7999 17.1389 10.8725 16.9905 10.9444C16.9821 10.9311 16.9776 10.9161 16.9686 10.903C16.7518 10.5877 16.361 10.3999 15.9272 10.3999C15.5862 10.3999 15.2742 10.5492 15.0319 10.7655C14.7896 10.9819 14.5977 11.2626 14.4202 11.5851C14.065 12.2301 13.7684 13.057 13.4373 13.9335C13.107 14.8076 12.699 15.9353 12.5381 16.8968C12.4577 17.3775 12.4273 17.8171 12.5522 18.2132C12.6146 18.4112 12.7264 18.6048 12.9045 18.7429C13.0827 18.8809 13.3145 18.9476 13.5498 18.9476C13.7461 18.9476 13.929 18.9238 14.0936 18.8733C14.1069 18.9021 14.1157 18.9277 14.1334 18.9585C14.3206 19.2834 14.6881 19.5999 15.1991 19.5999C15.8266 19.5999 16.2659 19.1091 16.6639 18.5147C17.0619 17.9204 17.4214 17.1501 17.7342 16.3421C18.0471 15.5341 18.3106 14.6906 18.4975 13.9608C18.6844 13.2311 18.7991 12.6388 18.7991 12.2288C18.7991 11.7199 18.612 11.348 18.3733 11.1218H18.3991V9.9999H17.5991ZM4.07093 11.1999C4.19417 11.1999 4.29506 11.2395 4.43265 11.3624C4.57024 11.4853 4.72498 11.6946 4.87718 11.971C5.18159 12.5238 5.47897 13.3336 5.81234 14.2163C6.13839 15.079 6.5303 16.1883 6.67093 17.0288C6.74125 17.4491 6.73656 17.8015 6.68265 17.9726C6.65569 18.0581 6.62743 18.0917 6.60374 18.1101C6.58006 18.1284 6.5473 18.1476 6.44828 18.1476C6.16154 18.1476 6.08366 18.1084 6.01078 18.0437C5.93789 17.9789 5.84083 17.8157 5.70687 17.5194C5.45163 16.9549 4.99967 15.6824 4.61859 14.6577C4.42972 14.1499 4.20674 13.5374 4.01937 13.0015C3.83211 12.4658 3.67696 11.9853 3.64046 11.8272V11.8265C3.58995 11.6062 3.62663 11.4467 3.6889 11.3562C3.75127 11.2654 3.84112 11.1999 4.07093 11.1999ZM15.9272 11.1999C16.157 11.1999 16.2468 11.2654 16.3092 11.3562C16.3716 11.4469 16.4085 11.6064 16.3577 11.8272C16.3212 11.9853 16.166 12.4658 15.9787 13.0015C15.7914 13.5374 15.5684 14.1499 15.3795 14.6577C14.9985 15.6823 14.5463 16.9545 14.2912 17.5194C14.1573 17.8157 14.0602 17.9789 13.9873 18.0437C13.9145 18.1084 13.8366 18.1476 13.5498 18.1476C13.4508 18.1476 13.4181 18.1284 13.3944 18.1101C13.3707 18.0917 13.3424 18.0581 13.3155 17.9726C13.2615 17.8015 13.2569 17.4491 13.3272 17.0288C13.4678 16.1883 13.8597 15.079 14.1858 14.2163C14.5191 13.3336 14.8165 12.5238 15.1209 11.971C15.2731 11.6946 15.4279 11.4853 15.5655 11.3624C15.7031 11.2395 15.8039 11.1999 15.9272 11.1999ZM2.39906 11.5999C2.55657 11.5999 2.61602 11.63 2.70296 11.6788C2.73409 11.6963 2.77966 11.7274 2.82484 11.7562C2.83157 11.8393 2.84163 11.9231 2.86077 12.0062C2.86077 12.0064 2.86077 12.0067 2.86077 12.0069C2.922 12.2724 3.07387 12.722 3.2639 13.2655C3.45393 13.8091 3.67826 14.4249 3.86859 14.9366C4.24591 15.9512 4.6852 17.2008 4.97796 17.8483C5.06307 18.0366 5.14392 18.2073 5.24593 18.3624C5.24212 18.3743 5.23437 18.3912 5.23109 18.4015C5.20528 18.4825 5.19023 18.5265 5.17171 18.5585C5.10839 18.6686 4.94867 18.7999 4.79906 18.7999C4.67664 18.7999 4.34087 18.581 3.99828 18.0694C3.65568 17.5579 3.30885 16.8268 3.00921 16.053C2.70958 15.2792 2.45438 14.4605 2.27562 13.7624C2.09685 13.0643 1.99906 12.4628 1.99906 12.2288C1.99906 11.8436 2.10498 11.7403 2.19203 11.6757C2.27907 11.611 2.41548 11.5999 2.39906 11.5999ZM17.5991 11.5999C17.5826 11.5999 17.719 11.611 17.8061 11.6757C17.8931 11.7403 17.9991 11.8436 17.9991 12.2288C17.9991 12.4628 17.9013 13.0643 17.7225 13.7624C17.5437 14.4605 17.2885 15.2792 16.9889 16.053C16.6893 16.8269 16.3424 17.5579 15.9998 18.0694C15.6572 18.581 15.3215 18.7999 15.1991 18.7999C15.0494 18.7999 14.8897 18.6686 14.8264 18.5585C14.8079 18.5265 14.7928 18.4825 14.767 18.4015C14.7637 18.3912 14.756 18.3743 14.7522 18.3624C14.8542 18.2073 14.935 18.0366 15.0202 17.8483C15.3123 17.2012 15.7522 15.9513 16.1295 14.9366C16.3199 14.4249 16.5442 13.8091 16.7342 13.2655C16.9242 12.722 17.0761 12.2724 17.1373 12.0069C17.1373 12.0067 17.1373 12.0064 17.1373 12.0062C17.1565 11.9231 17.1665 11.8393 17.1733 11.7562C17.2185 11.7274 17.264 11.6963 17.2952 11.6788C17.3821 11.63 17.4415 11.5999 17.5991 11.5999Z" fill="currentColor" fill-opacity="0.8" data-v-ae18e86e="" /></svg>
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header h3" @click="toggleAccordion($event, 'anc')">
              <button class="accordion-button" aria-expanded="false">
                {{ t("ANC") }}
              </button>
            </h2>
            <div class="accordion-content" data-type="anc">
              <ul>
                <li>
                  <a :class="{'drop-active':form.anc_type==='yes'||form.anc_type==='Yes'}" class="dropdown-item py-2 fs-6" to="/" @click.prevent="saveSetting('yes','anc')"> {{ t('Yes') }}  <span class="float-end">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="16"
                      viewBox="0 0 20 16"
                      fill="none"
                      data-v-ae18e86e=""
                    ><path d="M5.16262 0.387549C5.14543 0.390674 5.12825 0.395362 5.11262 0.400049C4.92668 0.442237 4.79543 0.609424 4.80012 0.800049V15.2C4.79856 15.3438 4.87356 15.4782 4.99856 15.5516C5.12356 15.6235 5.27668 15.6235 5.40168 15.5516C5.52668 15.4782 5.60168 15.3438 5.60012 15.2V0.800049C5.60481 0.684424 5.55793 0.573487 5.47512 0.495361C5.39075 0.415674 5.27668 0.376612 5.16262 0.387549ZM14.7626 0.387549C14.7454 0.390674 14.7282 0.395362 14.7126 0.400049C14.5267 0.442237 14.3954 0.609424 14.4001 0.800049V15.2C14.3986 15.3438 14.4736 15.4782 14.5986 15.5516C14.7236 15.6235 14.8767 15.6235 15.0017 15.5516C15.1267 15.4782 15.2017 15.3438 15.2001 15.2V0.800049C15.2048 0.684424 15.1579 0.573487 15.0751 0.495361C14.9907 0.415674 14.8767 0.376612 14.7626 0.387549ZM2.76262 3.98755C2.74543 3.99067 2.72825 3.99536 2.71262 4.00005C2.52668 4.04224 2.39543 4.20942 2.40012 4.40005V11.6C2.39856 11.7438 2.47356 11.8782 2.59856 11.9516C2.72356 12.0235 2.87668 12.0235 3.00168 11.9516C3.12668 11.8782 3.20168 11.7438 3.20012 11.6V4.40005C3.20481 4.28442 3.15793 4.17349 3.07512 4.09536C2.99075 4.01567 2.87668 3.97661 2.76262 3.98755ZM17.1626 3.98755C17.1454 3.99067 17.1282 3.99536 17.1126 4.00005C16.9267 4.04224 16.7954 4.20942 16.8001 4.40005V11.6C16.7986 11.7438 16.8736 11.8782 16.9986 11.9516C17.1236 12.0235 17.2767 12.0235 17.4017 11.9516C17.5267 11.8782 17.6017 11.7438 17.6001 11.6V4.40005C17.6048 4.28442 17.5579 4.17349 17.4751 4.09536C17.3907 4.01567 17.2767 3.97661 17.1626 3.98755ZM7.56262 4.38755C7.54543 4.39067 7.52825 4.39536 7.51262 4.40005C7.32668 4.44224 7.19543 4.60942 7.20012 4.80005V8.00005V11.2C7.19856 11.3438 7.27356 11.4782 7.39856 11.5516C7.52356 11.6235 7.67668 11.6235 7.80168 11.5516C7.92668 11.4782 8.00168 11.3438 8.00012 11.2V4.80005C8.00481 4.68442 7.95793 4.57349 7.87512 4.49536C7.79075 4.41567 7.67668 4.37661 7.56262 4.38755ZM12.3626 4.38755C12.3454 4.39067 12.3282 4.39536 12.3126 4.40005C12.1267 4.44224 11.9954 4.60942 12.0001 4.80005V11.2C11.9986 11.3438 12.0736 11.4782 12.1986 11.5516C12.3236 11.6235 12.4767 11.6235 12.6017 11.5516C12.7267 11.4782 12.8017 11.3438 12.8001 11.2V4.80005C12.8048 4.68442 12.7579 4.57349 12.6751 4.49536C12.5907 4.41567 12.4767 4.37661 12.3626 4.38755ZM0.362622 6.38755C0.345434 6.39067 0.328247 6.39536 0.312622 6.40005C0.126684 6.44224 -0.00456587 6.60942 0.000121649 6.80005V9.20005C-0.00144085 9.3438 0.0735592 9.47817 0.198559 9.55161C0.323559 9.62349 0.476684 9.62349 0.601684 9.55161C0.726684 9.47817 0.801684 9.3438 0.800122 9.20005V6.80005C0.804809 6.68442 0.757934 6.57349 0.675122 6.49536C0.590747 6.41567 0.476684 6.37661 0.362622 6.38755ZM9.96262 6.38755C9.94543 6.39067 9.92825 6.39536 9.91262 6.40005C9.72668 6.44224 9.59543 6.60942 9.60012 6.80005V9.20005C9.59856 9.3438 9.67356 9.47817 9.79856 9.55161C9.92356 9.62349 10.0767 9.62349 10.2017 9.55161C10.3267 9.47817 10.4017 9.3438 10.4001 9.20005V6.80005C10.4048 6.68442 10.3579 6.57349 10.2751 6.49536C10.1907 6.41567 10.0767 6.37661 9.96262 6.38755ZM19.5626 6.38755C19.5454 6.39067 19.5282 6.39536 19.5126 6.40005C19.3267 6.44224 19.1954 6.60942 19.2001 6.80005V9.20005C19.1986 9.3438 19.2736 9.47817 19.3986 9.55161C19.5236 9.62349 19.6767 9.62349 19.8017 9.55161C19.9267 9.47817 20.0017 9.3438 20.0001 9.20005V6.80005C20.0048 6.68442 19.9579 6.57349 19.8751 6.49536C19.7907 6.41567 19.6767 6.37661 19.5626 6.38755Z" fill="currentColor" fill-opacity="0.8" data-v-ae18e86e="" /></svg>
                  </span>
                  </a>
                </li>
                <li>
                  <a :class="{'drop-active':form.anc_type==='no'||form.anc_type==='No'}" class="dropdown-item fs-6 py-2" to="/hometropics" @click.prevent="saveSetting('no','anc')">      {{ t('No') }}
                    <span class="float-end">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        fill="none"
                        data-v-ae18e86e=""
                      ><g clip-path="url(#clip0_143_324)" data-v-ae18e86e=""><path d="M5.16262 2.38755C5.14543 2.39067 5.12825 2.39536 5.11262 2.40005C4.92668 2.44224 4.79543 2.60942 4.80012 2.80005V17.2C4.79856 17.3438 4.87356 17.4782 4.99856 17.5516C5.12356 17.6235 5.27668 17.6235 5.40168 17.5516C5.52668 17.4782 5.60168 17.3438 5.60012 17.2V2.80005C5.60481 2.68442 5.55793 2.57349 5.47512 2.49536C5.39075 2.41567 5.27668 2.37661 5.16262 2.38755ZM14.7626 2.38755C14.7454 2.39067 14.7282 2.39536 14.7126 2.40005C14.5267 2.44224 14.3954 2.60942 14.4001 2.80005V17.2C14.3986 17.3438 14.4736 17.4782 14.5986 17.5516C14.7236 17.6235 14.8767 17.6235 15.0017 17.5516C15.1267 17.4782 15.2017 17.3438 15.2001 17.2V2.80005C15.2048 2.68442 15.1579 2.57349 15.0751 2.49536C14.9907 2.41567 14.8767 2.37661 14.7626 2.38755ZM2.76262 5.98755C2.74543 5.99067 2.72825 5.99536 2.71262 6.00005C2.52668 6.04224 2.39543 6.20942 2.40012 6.40005V13.6C2.39856 13.7438 2.47356 13.8782 2.59856 13.9516C2.72356 14.0235 2.87668 14.0235 3.00168 13.9516C3.12668 13.8782 3.20168 13.7438 3.20012 13.6V6.40005C3.20481 6.28442 3.15793 6.17349 3.07512 6.09536C2.99075 6.01567 2.87668 5.97661 2.76262 5.98755ZM17.1626 5.98755C17.1454 5.99067 17.1282 5.99536 17.1126 6.00005C16.9267 6.04224 16.7954 6.20942 16.8001 6.40005V13.6C16.7986 13.7438 16.8736 13.8782 16.9986 13.9516C17.1236 14.0235 17.2767 14.0235 17.4017 13.9516C17.5267 13.8782 17.6017 13.7438 17.6001 13.6V6.40005C17.6048 6.28442 17.5579 6.17349 17.4751 6.09536C17.3907 6.01567 17.2767 5.97661 17.1626 5.98755ZM7.56262 6.38755C7.54543 6.39067 7.52825 6.39536 7.51262 6.40005C7.32668 6.44224 7.19543 6.60942 7.20012 6.80005V10V13.2C7.19856 13.3438 7.27356 13.4782 7.39856 13.5516C7.52356 13.6235 7.67668 13.6235 7.80168 13.5516C7.92668 13.4782 8.00168 13.3438 8.00012 13.2V6.80005C8.00481 6.68442 7.95793 6.57349 7.87512 6.49536C7.79075 6.41567 7.67668 6.37661 7.56262 6.38755ZM12.3626 6.38755C12.3454 6.39067 12.3282 6.39536 12.3126 6.40005C12.1267 6.44224 11.9954 6.60942 12.0001 6.80005V13.2C11.9986 13.3438 12.0736 13.4782 12.1986 13.5516C12.3236 13.6235 12.4767 13.6235 12.6017 13.5516C12.7267 13.4782 12.8017 13.3438 12.8001 13.2V6.80005C12.8048 6.68442 12.7579 6.57349 12.6751 6.49536C12.5907 6.41567 12.4767 6.37661 12.3626 6.38755ZM0.362622 8.38755C0.345434 8.39067 0.328247 8.39536 0.312622 8.40005C0.126684 8.44224 -0.00456587 8.60942 0.000121649 8.80005V11.2C-0.00144085 11.3438 0.0735592 11.4782 0.198559 11.5516C0.323559 11.6235 0.476684 11.6235 0.601684 11.5516C0.726684 11.4782 0.801684 11.3438 0.800122 11.2V8.80005C0.804809 8.68442 0.757934 8.57349 0.675122 8.49536C0.590747 8.41567 0.476684 8.37661 0.362622 8.38755ZM9.96262 8.38755C9.94543 8.39067 9.92825 8.39536 9.91262 8.40005C9.72668 8.44224 9.59543 8.60942 9.60012 8.80005V11.2C9.59856 11.3438 9.67356 11.4782 9.79856 11.5516C9.92356 11.6235 10.0767 11.6235 10.2017 11.5516C10.3267 11.4782 10.4017 11.3438 10.4001 11.2V8.80005C10.4048 8.68442 10.3579 8.57349 10.2751 8.49536C10.1907 8.41567 10.0767 8.37661 9.96262 8.38755ZM19.5626 8.38755C19.5454 8.39067 19.5282 8.39536 19.5126 8.40005C19.3267 8.44224 19.1954 8.60942 19.2001 8.80005V11.2C19.1986 11.3438 19.2736 11.4782 19.3986 11.5516C19.5236 11.6235 19.6767 11.6235 19.8017 11.5516C19.9267 11.4782 20.0017 11.3438 20.0001 11.2V8.80005C20.0048 8.68442 19.9579 8.57349 19.8751 8.49536C19.7907 8.41567 19.6767 8.37661 19.5626 8.38755Z" fill="currentColor" fill-opacity="0.8" data-v-ae18e86e="" /><rect
                        x="1.82617"
                        y="0.907189"
                        width="24.343"
                        height="1.3"
                        rx="0.65"
                        transform="rotate(45 1.82617 0.907189)"
                        fill="currentColor"
                        stroke="white"
                        stroke-width="0.5"
                        data-v-ae18e86e=""
                      /></g><defs data-v-ae18e86e=""><clipPath id="clip0_143_324" data-v-ae18e86e=""><rect width="20" height="20" fill="white" data-v-ae18e86e="" /></clipPath></defs></svg>
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header h3" @click="toggleAccordion($event, 'audioInput')">
              <button class="accordion-button" aria-expanded="false">
                {{ t("Audio_Input") }}
              </button>
            </h2>
            <div class="accordion-content" data-type="audioInput">
              <ul v-if="audioInputDevices.length">
                <li v-for="(item,index) in audioInputDevices" :key="item.deviceId">
                  <a
                    :key="index"
                    :class="{'drop-active':item.deviceId==audioInputDevice().deviceId}"
                    class="dropdown-item py-2 fs-6"
                    to="/"
                    @click.prevent="saveInputdevice(item)"
                  > {{ item.label }} <span class="float-end">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      version="1.1"
                      width="20"
                      height="20"
                      viewBox="0 0 256 256"
                      xml:space="preserve"
                    >
                      <defs />
                      <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
                        <path d="M 45 70.968 c -16.013 0 -29.042 -13.028 -29.042 -29.042 c 0 -1.712 1.388 -3.099 3.099 -3.099 c 1.712 0 3.099 1.388 3.099 3.099 C 22.157 54.522 32.404 64.77 45 64.77 c 12.595 0 22.843 -10.248 22.843 -22.843 c 0 -1.712 1.387 -3.099 3.099 -3.099 s 3.099 1.388 3.099 3.099 C 74.042 57.94 61.013 70.968 45 70.968 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                        <path d="M 45 60.738 L 45 60.738 c -10.285 0 -18.7 -8.415 -18.7 -18.7 V 18.7 C 26.3 8.415 34.715 0 45 0 h 0 c 10.285 0 18.7 8.415 18.7 18.7 v 23.337 C 63.7 52.322 55.285 60.738 45 60.738 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                        <path d="M 45 89.213 c -1.712 0 -3.099 -1.387 -3.099 -3.099 V 68.655 c 0 -1.712 1.388 -3.099 3.099 -3.099 c 1.712 0 3.099 1.387 3.099 3.099 v 17.459 C 48.099 87.826 46.712 89.213 45 89.213 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                        <path d="M 55.451 90 H 34.549 c -1.712 0 -3.099 -1.387 -3.099 -3.099 s 1.388 -3.099 3.099 -3.099 h 20.901 c 1.712 0 3.099 1.387 3.099 3.099 S 57.163 90 55.451 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill:currentColor; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                      </g>
                    </svg>
                  </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header h3" @click="toggleAccordion($event, 'audioOutput')">
              <button class="accordion-button" aria-expanded="false">
                {{ t("Audio_Output") }}
              </button>
            </h2>
            <div class="accordion-content" data-type="audioOutput">
              <ul v-if="audioOutputDevices.length">
                <li v-for="(item,index) in audioOutputDevices" :key="item.deviceId">
                  <a
                    :key="index"
                    :class="{'drop-active':item.deviceId==audioOutputDevice().deviceId}"
                    class="dropdown-item py-2 fs-6"
                    to="/"
                    @click.prevent="saveOutputDevice(item)"
                  > {{ item.label }} <span class="float-end">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="15" height="15" viewBox="0 0 75 75">
                      <path
                        d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z"
                        style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;"
                      />
                      <path d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round" />
                    </svg>
                  </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'pinia'
import { ref, onMounted, onUnmounted, watch } from 'vue'
import audioVisualClient from '~/plugins/AudioVisual.client'
import { useUserStore } from '~/stores/user'
import { ANC } from '@/stores/interfaces/ANC'
import { HeadsetType } from '@/stores/interfaces/HeadsetType'
import { useTimerStore } from '~/stores/timer'
import { useMicStore } from '@/stores/microphone'
import { useAudioStore } from '~/stores/audio'
export default {
  name: 'Soundscape',
  setup () {
    const { t } = useI18n()
    const localePath = useLocalePath()
    const timer = useTimerStore()
    const timerActivated = useUserStore().isTimerActivated

    return { t, localePath, timer, timerActivated }
  },
  data () {
    return {
      adaptiveSoundscape: true,
      form: {
        soundscape: '',
        headphone_type: '',
        anc_type: '',
        adaptive_sound_scape: ''

      },
      audioInputDevices: [],
      audioOutputDevices: [],
      ...mapState(useUserStore, ['audioInputDevice', 'audioOutputDevice'])
    }
  },
  beforeUnmount () {
    useMicStore().detachMicrophone()
    useAudioStore().stopAudioContextMonitor()
    useAudioStore().resetAudioContext()
  },
  mounted () {
    this.fetchSettings()
  },
  methods: {
    ...mapActions(useUserStore, ['saveInputdevice', 'saveOutputDevice', 'updateHeadsetType', 'updateANC']),
    audioVisualClient,
    getUserMedia () {
      const constraints = {
        audio: { deviceId: this.selectedDevice ? { exact: this.selectedDevice } : undefined }
      }

      try {
        return navigator.mediaDevices.getUserMedia(constraints)
      } catch (error) {
        // useNuxtApp().$logger.error('Error accessing media devices: ', error)
      }
    },
    async toggleAccordion (event, type) {
      const header = event.currentTarget
      const content = header.nextElementSibling
      const isOpen = content.style.maxHeight

      if (type === 'audioOutput' || type === 'audioInput') {
        this.$logger.log(type)
        await this.getAudioDevices() // warte, bis Geräte da sind
      }

      // Close all other accordion items
      document.querySelectorAll('.accordion-header').forEach((item) => {
        item.nextElementSibling.style.maxHeight = null
        item.classList.remove('open')
      })

      // Toggle the clicked accordion item
      if (isOpen) {
        content.style.maxHeight = null
        header.classList.remove('open')
        content.querySelectorAll('a, button, input').forEach((el) => {
          el.setAttribute('tabindex', '-1')
        })
      } else {
        content.style.maxHeight = content.scrollHeight + 'px'
        header.classList.add('open')
        content.querySelectorAll('a, button, input').forEach((el) => {
          el.setAttribute('tabindex', '0')
        })
      }
    },
    fetchSettings () {
      this.$axios.post('/api/fetch-settings', this.form).then(({ data }) => {
        if (data.success) {
          this.form = data.setting
          if (data.setting.adaptive_sound_scape === 'yes' || data.setting.adaptive_sound_scape === 'Yes') {
            this.adaptiveSoundscape = true
          } else {
            this.adaptiveSoundscape = false
          }
        }
      }).catch(() => {
        this.$toast.error('something went wrong while saving...')
      })
    },
    saveSetting (value, type) {
      if (type === 'soundscape') {
        this.form.soundscape = value
      }
      if (type === 'headphone') {
        this.form.headphone_type = value
        if (value === 'In-ear') { this.updateHeadsetType(HeadsetType.InEar) } else { this.updateHeadsetType(HeadsetType.OverEar) }
      }
      if (type === 'anc') {
        this.form.anc_type = value
        if (value === 'yes' || value === 'Yes') { this.updateANC(ANC.Yes) } else { this.updateANC(ANC.No) }
      }
      if (type === 'adaptive') {
        this.form.adaptive_sound_scape = value ? 'yes' : 'no'
      }
      this.$axios.post('/api/update-setting', this.form).then(({ data }) => {
        if (data.success) {
          this.$toast.success(data.message)
          this.form = data.setting
          useUserStore().user.settings = data.setting
        }
      }).catch(() => {
        this.$toast.error('something went wrong while saving...')
      })
    },
    handleAdaptiveToggle (event) {
      const newValue = event.target.checked
      this.adaptiveSoundscape = newValue
      this.saveSetting(newValue, 'adaptive')
      useUserStore().user.settings.adaptive_sound_scape = newValue
    },
    handleTimerToggle (event) {
      const visibilityState = event.target.checked

      this.$axios.put('/api/account/timer-visible', {
        state: visibilityState
      }).then(() => {
        useUserStore().toggleTimerVisibility(visibilityState)
      })
    },
    async getAudioDevices () {
      useMicStore().attachMicrophone()
      try {
        await this.getUserMedia()
        const devices = await navigator.mediaDevices.enumerateDevices()
        this.audioInputDevices = devices.filter(device => device.kind === 'audioinput')
        this.audioOutputDevices = devices.filter(device => device.kind === 'audiooutput')
        this.selectedDevice = this.audioInputDevices.length > 0 ? this.audioInputDevices[0].deviceId : null
      } catch (error) {
        this.$logger.error('Error enumerating media devices: ', error)
      }
    }
  }

}
</script>

<style scoped>
.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion-button:not(.open) {
  background-color: rgb(244, 245, 247) !important;
  font-weight: 600;
}
.accordion-button:not(.open):hover, .accordion-button:not(.open):focus {
  background-color: rgb(226, 229, 234) !important;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease;
  background-color: rgb(244, 245, 247);
  opacity: 1;
  visibility: visible;
}

.accordion-button::after{
  transform: none !important;
  transition: 250ms ease-in-out;
}

.accordion-item .dropdown-item{
  padding: 0 1.5em;
}

.dropdown-item.drop-select {
  background-color: #e9c046;
}

.accordion-header.open > .accordion-button::after{
  transform: rotate(180deg) !important;
}

.accordion-toggle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1em 1.25em;
  background-color: rgb(244, 245, 247);
  margin-bottom: 0.5em;
}

.accordion-content ul{
  padding-left: 0;
  list-style: none;
}

.accordion-content a, button:focus-visible {
  outline: none;
  border-radius: 0;
}

.form-check-input {
  background-color: #f0f0f0 !important;

  &:checked{
    background-color: #e9c046 !important;
  }
  &:focus {
    color: white;
  }
}
.form-switch .form-check-input {
    padding: 10px 16px;
    background-color: white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.accordion-button:not(.open)::after {
    background-image: var(--bs-accordion-btn-icon);
    fill: white;
}
/* Behalten Sie Ihre bestehenden Stile bei */
.accordion-item {
   border: none;
}

.drop-active{
  color: white !important;
  background-color: #e9c046;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

/* old styles */
.accordion-item {
   border: none;
}
.accordion-button:not(.open) {
   color: black;
   box-shadow: none;
}
.accordion-button:focus {
  z-index: 3;
  border:none;
  outline: 0;
  box-shadow: none;
}
.form-switch .form-check-input {
  padding: 10px 16px;
  background-color: black;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");

}
.drop-active{
  color: white !important;
  background-color: #e9c046;
  border-radius: 10px;
  margin-top: 2px;
}
</style>
~/stores/audio
