<template>
  <div class="box-style-settings">
    <SectionTitle :title="$t('setting.box.title')" :style="{ marginTop: '40px' }" />
    <div class="box-style">
      <div
        v-for="option in boxStyleOptions"
        :key="option.value"
        class="button"
        :class="{ 'is-active': isActive(option.type) }"
        @click="boxStyleHandlers.setBoxMode(option.type)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SectionTitle from './SectionTitle.vue'
  import { useSettingStore } from '@/store/modules/setting'
  import { useSettingsConfig } from '../composables/useSettingsConfig'
  import { useSettingsHandlers } from '../composables/useSettingsHandlers'
  import { storeToRefs } from 'pinia'

  const settingStore = useSettingStore()
  const { boxBorderMode } = storeToRefs(settingStore)
  const { boxStyleOptions } = useSettingsConfig()
  const { boxStyleHandlers } = useSettingsHandlers()

  // 判断当前选项是否激活
  const isActive = (type: 'border-mode' | 'shadow-mode') => {
    return type === 'border-mode' ? boxBorderMode.value : !boxBorderMode.value
  }
</script>

<style lang="scss" scoped>
  .box-style-settings {
    .box-style {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px;
      margin-top: 20px;
      background-color: var(--art-gray-200);
      border-radius: 7px;

      .button {
        width: calc(50% - 3px);
        height: 34px;
        font-size: 14px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        border-radius: 6px;
        transition: all 0.2s !important;

        &.is-active {
          color: var(--art-gray-800);
          background-color: var(--art-main-bg-color);
        }

        &:hover:not(.is-active) {
          color: var(--art-gray-800);
          background-color: rgba($color: #000, $alpha: 4%);
        }
      }
    }
  }

  .dark {
    .box-style-settings {
      .box-style {
        .button {
          &.is-active {
            color: #fff !important;
            background-color: rgba(var(--art-gray-400-rgb), 0.7);
          }

          &:hover:not(.is-active) {
            background-color: rgba($color: #000, $alpha: 20%);
          }
        }
      }
    }
  }
</style>
