<template>
  <SettingsSection
    :title="t('Settings.region.title')"
    :description="t('Settings.region.description')"
  >
    <div class="region-row">
      <div class="security-label">{{ t('Settings.region.displayLanguage') }}</div>
      <div v-show="!isEditing" class="security-static field-box">
        {{ displayLanguageLabel }}
      </div>
      <div v-show="isEditing" class="outlined-field select-field">
        <el-select
          :model-value="language"
          :placeholder="t('Settings.region.selectLanguage')"
          @update:model-value="emit('update:language', $event as LanguageValue)"
        >
          <el-option
            v-for="item in languageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>

    <div class="region-row">
      <div class="security-label">{{ t('Settings.region.region') }}</div>
      <div v-show="!isEditing" class="security-static field-box">
        {{ displayRegionLabel }}
      </div>
      <div v-show="isEditing" class="outlined-field select-field">
        <el-select
          :model-value="region"
          :placeholder="t('Settings.region.selectRegion')"
          @update:model-value="emit('update:region', $event as RegionValue)"
        >
          <el-option
            v-for="item in regionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
  </SettingsSection>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import SettingsSection from './SettingsSection.vue'
import type { LanguageValue, RegionValue, SettingOption } from '../types'

defineProps<{
  language: LanguageValue
  region: RegionValue
  displayLanguageLabel: string
  displayRegionLabel: string
  isEditing: boolean
  languageOptions: SettingOption<LanguageValue>[]
  regionOptions: SettingOption<RegionValue>[]
}>()

const emit = defineEmits<{
  (event: 'update:language', value: LanguageValue): void
  (event: 'update:region', value: RegionValue): void
}>()

const { t } = useI18n()
</script>

<style lang="less" scoped>
.field-text() {
  font-family: 'KaiseiOpti-Regular';
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #232323;
}

.field-frame() {
  width: 100%;
  min-height: 4rem;
  border: 0.1rem solid #979797;
}

.control-wrapper() {
  box-shadow: none;
  border-radius: 0;
  padding: 0 2rem;
}

.region-row + .region-row {
  margin-top: 3rem;
}

.security-label {
  margin-bottom: 0.8rem;
  font-family: 'KaiseiOpti-Medium';
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.04em;
  color: #585858;
}

.security-static,
.field-box {
  .field-frame();
  .field-text();
  display: flex;
  align-items: center;
  padding: 0.8rem 2rem;
}

.outlined-field {
  .field-frame();

  :deep(.el-select) {
    width: 100%;
    min-height: 4rem;
  }

  :deep(.el-select__wrapper) {
    .control-wrapper();
    min-height: 4rem;
  }
}
</style>
