<!-- SideBar.vue -->
<template>
  <div class="sidebar">
    <SideBarLogo 
      :logo-url="tenantMake.logo_url"
      :make-name="tenantMake.name"
    />
    
    <SideBarMakeName 
      :make-name="tenantMake.name"
      :subtitle="tenantMake.subtitle"
    />
    
    <LanguageSelector
      :initial-language="initialLanguage"
      :current-language="currentLanguage"
      :supported-language-details="supportedLanguageDetails"
      :allowed-languages="allowedLanguages"
      @language-changed="handleLanguageChange"
    />
    
    <SideBarExplanation
      :original-text="explanationText"
      :current-language="currentLanguage"
      :api-prefix="apiPrefix"
    />
  </div>
</template>

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

const props = defineProps({
  tenantMake: {
    type: Object,
    default: () => ({
      name: '',
      logo_url: '',
      subtitle: ''
    })
  },
  explanationText: {
    type: String,
    default: ''
  },
  initialLanguage: {
    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 currentLanguage = ref(props.initialLanguage);

const handleLanguageChange = (newLanguage) => {
  currentLanguage.value = newLanguage;
  
  // Emit to parent
  emit('language-changed', newLanguage);
  
  // Global event for backward compatibility
  const globalEvent = new CustomEvent('language-changed', {
    detail: { language: newLanguage }
  });
  document.dispatchEvent(globalEvent);
  
  // Update chatConfig
  if (window.chatConfig) {
    window.chatConfig.language = newLanguage;
  }
  
  // Save preference
  localStorage.setItem('preferredLanguage', newLanguage);
};
</script>

<style scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sidebar-background);
  color: var(--sidebar-color);
  width: 300px;
  min-width: 250px;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    min-width: unset;
  }
}
</style>