<template>
  <div class="sidebar-mobile-setup">
    <SideBarMakeName
      :make-name="tenantMake.name"
      :subtitle="tenantMake.subtitle"
      class="setup-make-name"
    />

    <LanguageSelector
      :initial-language="initialLanguage"
      :current-language="currentLanguageInternal"
      :supported-language-details="supportedLanguageDetails"
      :allowed-languages="allowedLanguages"
      @language-changed="handleLanguageChange"
      class="setup-language-selector"
    />

    <SideBarExplanation
      :original-text="explanationText"
      :current-language="currentLanguageInternal"
      :api-prefix="apiPrefix"
      class="setup-explanation"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import SideBarMakeName from './SideBarMakeName.vue';
import LanguageSelector from './LanguageSelector.vue';
import SideBarExplanation from './SideBarExplanation.vue';

const props = defineProps({
  tenantMake: {
    type: Object,
    default: () => ({
      name: '',
      subtitle: ''
    })
  },
  explanationText: {
    type: String,
    default: ''
  },
  initialLanguage: {
    type: String,
    default: 'en'
  },
  currentLanguage: {
    type: String,
    default: 'en'
  },
  supportedLanguageDetails: {
    type: Object,
    default: () => ({})
  },
  allowedLanguages: {
    type: Array,
    default: () => ['nl', 'en', 'fr', 'de']
  },
  apiPrefix: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['language-changed']);

const currentLanguageInternal = ref(props.currentLanguage || props.initialLanguage);

watch(
  () => props.currentLanguage,
  (newVal) => {
    if (newVal && newVal !== currentLanguageInternal.value) {
      currentLanguageInternal.value = newVal;
    }
  }
);

const handleLanguageChange = (newLanguage) => {
  currentLanguageInternal.value = newLanguage;
  emit('language-changed', newLanguage);
};
</script>

<style scoped>
.sidebar-mobile-setup {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 8px 16px 8px;
  gap: 8px;
}

.setup-make-name {
  padding-bottom: 4px;
}

.setup-language-selector {
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--sidebar-background, rgba(255, 255, 255, 0.02));
  padding: 8px;
}

.setup-explanation {
  flex: 1 1 auto;
  border-radius: 12px;
  padding: 8px;
  overflow-y: auto;
}

@media (min-width: 769px) {
  .sidebar-mobile-setup {
    display: none;
  }
}
</style>
