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

// 获取当前设置（Getter方法会返回Promise）
KeplerA11ySettingsInterface.isScreenReaderEnabled().then(isEnabled => {
  console.log('屏幕阅读器已启用：', isEnabled);
});

KeplerA11ySettingsInterface.getUiScaleSetting().then(scale => {
  console.log('当前用户界面缩放比例：', 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' 
  });

  // 记忆样式表，使其仅在通过useScaledSize挂钩更改
  // contentWidthDefault或contentHeightDeafault时更新。
  const viewStyle = React.useMemo(
    () => ({
      ...styles.viewStyle,
      width: contentWidthDefault,
      height: contentHeightDefault,
    }),
    [contentWidthDefault, contentHeightDefault],
  );

  // 记忆样式表，使其仅在通过useScalingMultiplier挂钩
  // 更改assetScalingMultiplier时更新。
  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挂钩来动态响应
// UiScaleSetting设置更改，即使用户界面元素是从另一个
// 库导入的。
const AppWithProvider = () => (
  <UiScaleSettingContextProvider>
    <App />
  </UiScaleSettingContextProvider>
);

export default AppWithProvider;

const scaledWidth = useScaledSize(100, {
  itemType: 'medium_upscale',
  maxSize: 200,  // 不得超出200个单位
  minSize: 50    // 不得低于50个单位
});