<script>
import { defineComponent, ref, computed, onMounted } from "vue";

export default defineComponent({
  name: "SelectLang",
  render(h) {
    let mainObj = {
      comp: "VSelect",
      dive: true,
      options: {
        wrap: "span",
        class: "language-select mx-5",
        props: {
          // "v-model": this.selectedLanguage,
          items: this.languages,
          "item-text": "text",
          "item-value": "value",
          label: "Lang...",
          dense: true,
          solo: true,
          flat: true,
          hideDetails: true,
          // "prepend-inner-icon": "mdi-web-18px",
        },
        // headers: "VIcon__mdi-web",
        slots: {
          "prepend-inner": {
            comp: "VIcon",
            options: { props: { size: "medium" }, html: "mdi-web" },
          },
        },
        on: { change: this.onLanguageChange },
      },
    };
    return h("WBC", { props: { item: mainObj } });
  },
  setup() {
    // State for the language selector
    const selectedLanguage = ref("en"); // Initialize with default from Vuex or 'en'
    const languages = ref([
      { text: "English", value: "en" },
      { text: "Français", value: "fr" },
      { text: "العربية", value: "ar" },
      { text: "Español", value: "es" },
      // Add more languages as needed
    ]);

    onMounted(() => {});

    const onLanguageChange = (that) => (newLang) => {
      that.lg.set(newLang);

      let newUrl = that.store.state.currentItem.path0[that.store.state.lg];
      that.router.push(newUrl);
    };

    return {
      selectedLanguage,
      languages,
      onLanguageChange,
    };
  },
});
</script>

<style lang="stylus">
// Styles specific to the v-select within the Navbar context
// These are adapted from previous iterations to fit directly into SelectLang.vue
.language-select
  // Adjust width as needed, ensure it fits well in the navbar
  //width 2px
  width min-content
  // Remove margin-left here, as the parent .links div in Navbar.vue uses flexbox
  // and spacing should be handled by gap or margin on individual items within that flex container.
  // margin-left 1.5rem



  .v-input__slot
    margin-bottom 0 !important
  .v-select__slot
    .v-select__selections
      .v-select__selection
        font-size 0.9rem
        line-height 1.2rem
        color var(--textColor) !important // Use theme variable for text color
        margin-right 0 !important
  .v-input__append-inner
    margin-top 6px !important
  .v-input__prepend-inner
    margin-top 6px !important
    margin-right 4px !important
    .v-icon
      color var(--textColor) !important // Use theme variable for icon color
  .v-list-item__title
    font-size 0.9rem
    color var(--textColor) !important // Ensure list item text color matches

// Responsive adjustments for the language selector if needed
@media (max-width: $MQMobile)
  .language-select
    margin-left 0
    margin-top 0.5rem // Add some top margin when stacked in mobile view
</style>
