import KeplerA11ySettingsInterface from '@amazon-devices/kepler-a11y-settings-interface-turbo';

// 現在の設定を取得します（ゲッターメソッドはPromiseを返します）
KeplerA11ySettingsInterface.isScreenReaderEnabled().then(isEnabled => {
  console.log('スクリーンリーダーの有効状態：', isEnabled);
});

KeplerA11ySettingsInterface.getUiScaleSetting().then(scale => {
  console.log('現在のUIスケール：', scale);
});

KeplerA11ySettingsInterface.getColorCorrectionMode().then(mode => {
  console.log('色補正モード：', mode);
});

KeplerA11ySettingsInterface.getCaptionPreferences().then(captionPrefs => {
  console.log('現在の字幕の設定：', captionPrefs);
});

import KeplerA11ySettingsInterface from '@amazon-devices/kepler-a11y-settings-interface-turbo';

// スクリーンリーダーの状態の変化をリッスンします
const handleScreenReaderChange = (enabled: boolean) => {
  console.log(`スクリーンリーダーは${enabled ? '有効' : '無効'}`);
  // スクリーンリーダーの状態に応答します
};

const success = await KeplerA11ySettingsInterface.addScreenReaderStateListener(handleScreenReaderChange);
if (!success) {
  console.warn('スクリーンリーダーのリスナーの登録に失敗しました');
}

// コンポーネントがアンマウントされたら、必ずリスナーを削除します
await KeplerA11ySettingsInterface.removeScreenReaderStateListener();

import KeplerA11ySettingsInterface, { CaptioningProps } from '@amazon-devices/kepler-a11y-settings-interface-turbo';

await KeplerA11ySettingsInterface.setScreenReaderEnabled(true);
await KeplerA11ySettingsInterface.setUiScaleSetting(3);
await KeplerA11ySettingsInterface.setColorCorrectionMode('deuteranomaly');

const newPrefs: CaptioningProps = {
  textSize: 'large',
  textColor: 'white',
  textFont: 'sans_serif',
  textEdgeStyle: 'drop_shadowed',
  textOpacity: 'percent_100'
};

await KeplerA11ySettingsInterface.setCaptionPreferences(newPrefs);

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { 
  UiScaleSettingContextProvider, 
  useScaledSize, 
  useScalingMultiplier,
  useUiScaleSetting 
} from '@amazon-devices/kepler-a11y-settings-interface-turbo';

const CONTENT_WIDTH_DEFAULT_BASE = 144;
const CONTENT_HEIGHT_DEFAULT_BASE = 80;
const LOGO_DEFAULT_WIDTH = 57;
const LOGO_DEFAULT_HEIGHT = 24;

const styles = StyleSheet.create({
  viewStyle: {
    marginLeft: 8,
    alignItems: 'center',
    zIndex: 0,
  },
  text: {
    fontSize: 14,
    color: '#666',
    fontFamily: 'sans-serif',
  },
});

const App = () => {
  // スケール設定の変更に応じて自動的に更新されるスケール済みの寸法を取得します
  const contentWidthDefault = useScaledSize(CONTENT_WIDTH_DEFAULT_BASE, { 
    itemType: 'medium_upscale' 
  });
  const contentHeightDefault = useScaledSize(CONTENT_HEIGHT_DEFAULT_BASE, { 
    itemType: 'medium_upscale' 
  });
  
  // 関連する寸法に適用するスケーリング倍率を取得します
  const assetScalingMultiplier = useScalingMultiplier(LOGO_DEFAULT_WIDTH, { 
    itemType: 'image' 
  });

  // スタイルシートをメモ化して、contentWidthDefaultまたはcontentHeightDefaultが
  // useScaledSizeフックによって変更された場合にのみ更新されるようにします。
  const viewStyle = React.useMemo(
    () => ({
      ...styles.viewStyle,
      width: contentWidthDefault,
      height: contentHeightDefault,
    }),
    [contentWidthDefault, contentHeightDefault],
  );

  // スタイルシートをメモ化して、assetScalingMultiplierが
  // useScalingMultiplierフックによって変更された場合にのみ更新されるようにします。
  const assetStyle = React.useMemo(
    () => ({
      width: LOGO_DEFAULT_WIDTH * assetScalingMultiplier,
      height: LOGO_DEFAULT_HEIGHT * assetScalingMultiplier,
      marginRight: 12,
    }),
    [assetScalingMultiplier],
  );

  // 下で表示する現在のスケール係数を取得します
  const currentScale = useUiScaleSetting();

  return (
    <View style={viewStyle}>
      <Image style={assetStyle} source={logoSource} />
      <Text style={styles.text}>Current scale: {currentScale}</Text>
    </View>
  );
};

// アプリをプロバイダーでラップします。 これにより、useScaledSizeフックと
// useScalingMultiplierフックを利用するすべてのUI要素が、UiScaleSettingの設定変更に
// 動的に応答するようになります。これは、UI要素が別のライブラリからインポートされている
// 場合でも同様です。
const AppWithProvider = () => (
  <UiScaleSettingContextProvider>
    <App />
  </UiScaleSettingContextProvider>
);

export default AppWithProvider;

const scaledWidth = useScaledSize(100, {
  itemType: 'medium_upscale',
  maxSize: 200,  // 200ユニットを超えないようにします
  minSize: 50    // 50ユニットを下回らないようにします
});