/**
 * i18n使用示例
 * 这个文件展示了如何在不同场景下使用国际化功能
 */

import { View, Text, Button } from '@tarojs/components';
import { useState } from 'react';
import { useI18n } from '../hooks/useI18n';
import LanguageSwitcher from '../components/LanguageSwitcher';

// 示例1: 基本使用
function BasicExample() {
  const { t } = useI18n();

  return (
    <View>
      <Text>{t('common.confirm')}</Text>
      <Text>{t('home.title')}</Text>
      <Text>{t('navigation.playground')}</Text>
    </View>
  );
}

// 示例2: 带参数的翻译
function ParameterExample() {
  const { t } = useI18n();
  const userName = '张三';
  const count = 42;

  return (
    <View>
      {/* 注意：需要在语言文件中定义支持参数的翻译键 */}
      <Text>{t('welcome.message', { name: userName })}</Text>
      <Text>{t('notification.count', { count: count.toString() })}</Text>
    </View>
  );
}

// 示例3: 语言切换
function LanguageSwitchExample() {
  const { currentLanguage, changeLanguage, supportedLanguages, languageNames } = useI18n();

  const handleLanguageChange = async (language: string) => {
    try {
      await changeLanguage(language as any);
    } catch (error) {
      console.error('Language change failed:', error);
    }
  };

  return (
    <View>
      <Text>当前语言: {languageNames[currentLanguage]}</Text>

      {/* 方式1: 使用内置的语言切换组件 */}
      <LanguageSwitcher />

      {/* 方式2: 自定义语言切换按钮 */}
      {supportedLanguages.map(lang => (
        <Button
          key={lang}
          onClick={() => handleLanguageChange(lang)}
          disabled={lang === currentLanguage}
        >
          {languageNames[lang]}
        </Button>
      ))}
    </View>
  );
}

// 示例4: 数字和日期格式化
function FormattingExample() {
  const { formatNumber, formatDate } = useI18n();

  return (
    <View>
      <Text>数字: {formatNumber(1234.56)}</Text>
      <Text>日期: {formatDate(new Date())}</Text>
      <Text>自定义日期: {formatDate(new Date(), {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })}</Text>
    </View>
  );
}

// 示例5: 条件渲染基于语言
function ConditionalExample() {
  const { currentLanguage, t } = useI18n();

  return (
    <View>
      <Text>{t('common.loading')}</Text>

      {/* 根据语言显示不同内容 */}
      {currentLanguage === 'zh-CN' && (
        <Text>这是中文特有的内容</Text>
      )}

      {currentLanguage === 'en-US' && (
        <Text>This is English-specific content</Text>
      )}
    </View>
  );
}

// 示例6: 在类组件中使用（如果需要）
import { Component } from 'react';
import { getCurrentLanguage, t } from '../i18n/utils';

class ClassComponentExample extends Component {
  state = {
    currentLanguage: getCurrentLanguage(),
  };

  render() {
    return (
      <View>
        <Text>{t('common.confirm')}</Text>
        <Text>当前语言: {this.state.currentLanguage}</Text>
      </View>
    );
  }
}

export {
  BasicExample,
  ParameterExample,
  LanguageSwitchExample,
  FormattingExample,
  ConditionalExample,
  ClassComponentExample,
};
