Internationalization

/**
 * Locale management system for Element UI internationalization
 */
interface LocaleSystem {
  use(lang: any): void;
  t(path: string, options?: any): string;
  i18n(handler: (path: string, options?: any) => string): void;
}

/**
 * Translation function for getting localized strings
 */
declare function t(path: string, options?: any): string;

/**
 * Set the current locale language
 */
declare function use(lang: any): void;

/**
 * Set custom i18n handler function
 */
declare function i18n(handler: (path: string, options?: any) => string): void;

// Available as default export
const locale: LocaleSystem;

// Import locale utilities
import { t, use, i18n } from 'element-ui/src/locale';

// Or import the entire locale object
import locale from 'element-ui/src/locale';

// Set language using built-in locale
import zhCN from 'element-ui/lib/locale/lang/zh-cn';
import enUS from 'element-ui/lib/locale/lang/en';

// Method 1: Set via locale.use()
locale.use(zhCN);

// Method 2: Set during Vue installation
import ElementUI from 'element-ui';
Vue.use(ElementUI, {
  locale: zhCN
});

// Method 3: Manual translation function
locale.i18n((key, value) => {
  // Your custom translation logic
  return customTranslate(key, value);
});

// Get translated text
const buttonText = locale.t('el.button.confirm'); // Gets "确定" for Chinese

// Available built-in locales (imported from element-ui/lib/locale/lang/)
interface BuiltinLocales {
  'af': 'Afrikaans';
  'ar': 'Arabic';
  'bg': 'Bulgarian';
  'ca': 'Catalan';
  'cs': 'Czech';
  'da': 'Danish';
  'de': 'German';
  'el': 'Greek';
  'en': 'English';
  'es': 'Spanish';
  'fa': 'Persian';
  'fi': 'Finnish';
  'fr': 'French';
  'he': 'Hebrew';
  'hu': 'Hungarian';
  'id': 'Indonesian';
  'it': 'Italian';
  'ja': 'Japanese';
  'ko': 'Korean';
  'nb-no': 'Norwegian';
  'nl': 'Dutch';
  'pl': 'Polish';
  'pt': 'Portuguese';
  'pt-br': 'Portuguese (Brazil)';
  'ro': 'Romanian';
  'ru': 'Russian';
  'sk': 'Slovak';
  'sv': 'Swedish';
  'th': 'Thai';
  'tr': 'Turkish';
  'ua': 'Ukrainian';
  'vi': 'Vietnamese';
  'zh-cn': 'Simplified Chinese';
  'zh-tw': 'Traditional Chinese';
}

// Locale object structure
interface ElementLocale {
  name: string;
  el: {
    colorpicker: object;
    select: object;
    datepicker: object;
    datetimepicker: object;
    timepicker: object;
    messageBox: object;
    upload: object;
    table: object;
    tree: object;
    transfer: object;
    image: object;
    pageHeader: object;
    // ... other component translations
  };
}

// Import specific language
import zhCN from 'element-ui/lib/locale/lang/zh-cn';
import enUS from 'element-ui/lib/locale/lang/en';
import jaJP from 'element-ui/lib/locale/lang/ja';
import frFR from 'element-ui/lib/locale/lang/fr';
import deDE from 'element-ui/lib/locale/lang/de';
import esES from 'element-ui/lib/locale/lang/es';
import ruRU from 'element-ui/lib/locale/lang/ru';

// Set language globally during installation
Vue.use(ElementUI, {
  locale: zhCN // Switch to Chinese
});

// Runtime language switching
import locale from 'element-ui/lib/locale';
locale.use(enUS); // Switch to English

// Check current locale
console.log(locale.t('el.datepicker.confirm')); // "确定" or "OK" depending on current locale

/**
 * Integration configuration with vue-i18n
 */
interface VueI18nIntegration {
  // Element UI will use vue-i18n's translation function when available
  // No additional configuration needed - automatic detection
}

// Vue-i18n messages structure for Element UI
interface ElementVueI18nMessages {
  [locale: string]: {
    el: ElementLocale['el'];
    // Your app translations
    [key: string]: any;
  };
}

// Method 1: Merge Element UI locale with vue-i18n messages
import VueI18n from 'vue-i18n';
import ElementUI from 'element-ui';
import zhCN from 'element-ui/lib/locale/lang/zh-cn';
import enUS from 'element-ui/lib/locale/lang/en';

Vue.use(VueI18n);

const messages = {
  'zh-cn': {
    message: {
      hello: '你好'
    },
    ...zhCN // Merge Element UI Chinese translations
  },
  'en': {
    message: {
      hello: 'Hello'
    },
    ...enUS // Merge Element UI English translations
  }
};

const i18n = new VueI18n({
  locale: 'zh-cn',
  messages
});

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

// Method 2: Use separate vue-i18n instance for Element UI
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    'zh-cn': { ...zhCN },
    'en': { ...enUS }
  }
});

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
});

// Runtime language switching with vue-i18n
this.$i18n.locale = 'zh-cn'; // Element UI will automatically use new locale

/**
 * Custom locale configuration structure
 */
interface CustomLocaleConfig {
  name: string;
  el: {
    colorpicker: {
      confirm: string;
      clear: string;
    };
    datepicker: {
      now: string;
      today: string;
      cancel: string;
      clear: string;
      confirm: string;
      selectDate: string;
      selectTime: string;
      startDate: string;
      startTime: string;
      endDate: string;
      endTime: string;
      prevYear: string;
      nextYear: string;
      prevMonth: string;
      nextMonth: string;
      year: string;
      month1: string;
      month2: string;
      // ... all required month names
      weeks: {
        sun: string;
        mon: string;
        tue: string;
        wed: string;
        thu: string;
        fri: string;
        sat: string;
      };
      months: {
        jan: string;
        feb: string;
        mar: string;
        apr: string;
        may: string;
        jun: string;
        jul: string;
        aug: string;
        sep: string;
        oct: string;
        nov: string;
        dec: string;
      };
    };
    select: {
      loading: string;
      noMatch: string;
      noData: string;
      placeholder: string;
    };
    cascader: {
      noMatch: string;
      loading: string;
      placeholder: string;
      noData: string;
    };
    pagination: {
      goto: string;
      pagesize: string;
      total: string;
      pageClassifier: string;
    };
    messagebox: {
      title: string;
      confirm: string;
      cancel: string;
      error: string;
    };
    upload: {
      deleteTip: string;
      delete: string;
      preview: string;
      continue: string;
    };
    table: {
      emptyText: string;
      confirmFilter: string;
      resetFilter: string;
      clearFilter: string;
      sumText: string;
    };
    tree: {
      emptyText: string;
    };
    transfer: {
      noMatch: string;
      noData: string;
      titles: string[];
      filterPlaceholder: string;
      noCheckedFormat: string;
      hasCheckedFormat: string;
    };
    image: {
      error: string;
    };
    pageHeader: {
      title: string;
    };
    popconfirm: {
      confirmButtonText: string;
      cancelButtonText: string;
    };
  };
}

// Custom locale for unsupported language (example: Finnish variant)
const customFinnish = {
  name: 'custom-fi',
  el: {
    colorpicker: {
      confirm: 'Vahvista',
      clear: 'Tyhjennä'
    },
    datepicker: {
      now: 'Nyt',
      today: 'Tänään',
      cancel: 'Peruuta',
      clear: 'Tyhjennä',
      confirm: 'Vahvista',
      selectDate: 'Valitse päivä',
      selectTime: 'Valitse aika',
      startDate: 'Aloituspäivä',
      startTime: 'Aloitusaika',
      endDate: 'Lopetuspäivä',
      endTime: 'Lopetusaika',
      prevYear: 'Edellinen vuosi',
      nextYear: 'Seuraava vuosi',
      prevMonth: 'Edellinen kuukausi',
      nextMonth: 'Seuraava kuukausi',
      year: 'vuosi',
      month1: 'Tammikuu',
      month2: 'Helmikuu',
      // ... continue with all months
      weeks: {
        sun: 'Su',
        mon: 'Ma',
        tue: 'Ti',
        wed: 'Ke',
        thu: 'To',
        fri: 'Pe',
        sat: 'La'
      },
      months: {
        jan: 'Tam',
        feb: 'Hel',
        mar: 'Maa',
        apr: 'Huh',
        may: 'Tou',
        jun: 'Kes',
        jul: 'Hei',
        aug: 'Elo',
        sep: 'Syy',
        oct: 'Lok',
        nov: 'Mar',
        dec: 'Jou'
      }
    },
    select: {
      loading: 'Ladataan',
      noMatch: 'Ei vastaavuuksia',
      noData: 'Ei tietoja',
      placeholder: 'Valitse'
    },
    // ... continue with all component translations
    messagebox: {
      title: 'Viesti',
      confirm: 'Vahvista',
      cancel: 'Peruuta',
      error: 'Virheellinen syöte'
    },
    upload: {
      deleteTip: 'Poista painamalla delete-näppäintä',
      delete: 'Poista',
      preview: 'Esikatselu',
      continue: 'Jatka'
    },
    table: {
      emptyText: 'Ei tietoja',
      confirmFilter: 'Vahvista',
      resetFilter: 'Nollaa',
      clearFilter: 'Kaikki',
      sumText: 'Summa'
    },
    tree: {
      emptyText: 'Ei tietoja'
    },
    transfer: {
      noMatch: 'Ei vastaavuuksia',
      noData: 'Ei tietoja',
      titles: ['Lista 1', 'Lista 2'],
      filterPlaceholder: 'Syötä hakusana',
      noCheckedFormat: '{total} kohdetta',
      hasCheckedFormat: '{checked}/{total} valittu'
    },
    image: {
      error: 'EPÄONNISTUI'
    },
    pageHeader: {
      title: 'Takaisin'
    },
    popconfirm: {
      confirmButtonText: 'Kyllä',
      cancelButtonText: 'Ei'
    }
  }
};

// Use custom locale
import locale from 'element-ui/lib/locale';
locale.use(customFinnish);

// Customize existing locale
import zhCN from 'element-ui/lib/locale/lang/zh-cn';

const customChinese = {
  ...zhCN,
  el: {
    ...zhCN.el,
    messagebox: {
      ...zhCN.el.messagebox,
      confirm: '好的' // Custom confirmation text
    }
  }
};

locale.use(customChinese);

/**
 * Dynamic language switching utilities
 */
interface LanguageSwitcher {
  currentLocale: string;
  availableLocales: string[];
  setLocale(locale: string): void;
  getLocale(): string;
}

// Language switcher component
<template>
  <el-select v-model="currentLanguage" @change="changeLanguage">
    <el-option 
      v-for="lang in languages" 
      :key="lang.value"
      :label="lang.label"
      :value="lang.value">
    </el-option>
  </el-select>
</template>

<script>
import locale from 'element-ui/lib/locale';
import zhCN from 'element-ui/lib/locale/lang/zh-cn';
import enUS from 'element-ui/lib/locale/lang/en';
import jaJP from 'element-ui/lib/locale/lang/ja';

export default {
  data() {
    return {
      currentLanguage: 'en',
      languages: [
        { value: 'en', label: 'English' },
        { value: 'zh-cn', label: '简体中文' },
        { value: 'ja', label: '日本語' }
      ],
      localeMap: {
        'en': enUS,
        'zh-cn': zhCN,
        'ja': jaJP
      }
    };
  },
  methods: {
    changeLanguage(lang) {
      locale.use(this.localeMap[lang]);
      this.currentLanguage = lang;
      
      // Save to localStorage for persistence
      localStorage.setItem('language', lang);
      
      // Emit event for other components
      this.$emit('language-changed', lang);
    },
    
    initLanguage() {
      const saved = localStorage.getItem('language') || 'en';
      this.changeLanguage(saved);
    }
  },
  
  mounted() {
    this.initLanguage();
  }
};
</script>

// App-level language management
// main.js
const app = new Vue({
  data: {
    currentLocale: 'en'
  },
  methods: {
    setGlobalLocale(locale) {
      this.currentLocale = locale;
      // Update document language attribute
      document.documentElement.lang = locale;
    }
  }
});

// Persist language choice
const savedLanguage = localStorage.getItem('element-language') || 'en';
app.setGlobalLocale(savedLanguage);