<script setup>
import ActionButton from "@/components/ActionButton.vue";
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: null,
  },
  options: {
    type: Array,
    default: () => [],
  },
  requiredValue: {
    type: Boolean,
    default: false,
  },
  showRequiredToggle: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  addButtonLabel: {
    type: String,
    default: "Add Language",
  },
});

const emit = defineEmits([
  "update:modelValue",
  "update:required-value",
  "add-language",
]);

const selectedLanguage = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

const translationRequired = computed({
  get: () => !!props.requiredValue,
  set: (value) => emit("update:required-value", !!value),
});

const hasOptions = computed(
  () => Array.isArray(props.options) && props.options.length > 0,
);
</script>

<template>
  <div class="sidebar-card translation-sidebar-card">
    <h3 class="sidebar-title">Translations</h3>
    <p class="sidebar-text mb-4">Add a new language variant from here.</p>

    <VSelect
      v-model="selectedLanguage"
      :items="options"
      item-title="label"
      item-value="code"
      label="Language"
      variant="outlined"
      density="comfortable"
      :disabled="disabled || !hasOptions"
      :hint="!hasOptions ? 'All available languages are already added.' : ''"
      persistent-hint
      class="mb-3"
    />

    <div
      v-if="showRequiredToggle"
      class="d-flex align-center justify-space-between mb-3 required-toggle-row"
    >
      <div>
        <div class="text-subtitle-2 font-weight-medium">
          Required for translation
        </div>
        <div class="text-caption text-medium-emphasis">
          Mark this section as mandatory in language readiness.
        </div>
      </div>
      <VSwitch
        v-model="translationRequired"
        color="primary"
        density="comfortable"
        hide-details
        :disabled="disabled"
      />
    </div>

    <ActionButton
      :label="addButtonLabel"
      icon="pi pi-plus"
      severity="secondary"
      class="w-100"
      :disabled="disabled || !selectedLanguage"
      @click="$emit('add-language')"
    />
  </div>
</template>

<style scoped>
.translation-sidebar-card {
  width: 100%;
}

.required-toggle-row {
  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
  border-radius: 10px;
  padding: 12px;
  background: rgba(var(--v-theme-on-surface), 0.03);
}
.text-subtitle-2 {
  color: rgb(var(--v-theme-on-surface));
}
.text-medium-emphasis {
  color: rgb(var(--v-theme-on-surface), 0.7) !important;
}
</style>
