// Metro module 14722 (f14723).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useState, useEffect, useSyncExternalStore } from "react";
import { ScrollView, View } from "react-native";
import { setAppLocale } from "../../../intl/IntlLoaderStore";
import LocaleStore from "../../user_settings/LocaleStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { TableRadioGroup } from "../../../design/components/TableRow/native/TableRadioGroup.native";
import * as _index_native from "../../../intl/index.native";
import UserSettingsActionCreators from "../../../actions/UserSettingsActionCreators";
import { TableRadioRow } from "../../../design/components/TableRow/native/TableRadioRow.native";
import { useStateFromStoresArray } from "../../../_bundle/Module589";
import Module3771 from "../../../_bundle/Module3771";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import { waitForAllDefaultIntlMessagesLoaded } from "../../../_bundle/Module1274";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { Text } from "../../../design/components/Text/native/Text";
import Test_messages from "../messages/Test.messages";
import SecondTest_messages from "../messages/SecondTest.messages";
let useStyles, LocaleInfo;
const TestLocaleSelector = function TestLocaleSelector() {
  let c21316_0 = async (c30763_0) => {
    let c30763_2;
    c30763_2 = void 0;
    let c31728_0 = c30763_0;
    await setAppLocale(c30763_0);
    UserSettingsActionCreators.updateLocale(c31728_0);
  };
  return <TableRadioGroup title="Locale" hasIcons={false} defaultValue={_index_native.intl.currentLocale} onChange={function() {
    return c21316_0.apply(this, arguments);
  }}>
    <TableRadioRow label="English" value="en-US" />
    <TableRadioRow label="French" value="fr" />
  </TableRadioGroup>;
};
LocaleInfo = function LocaleInfo() {
  const [text3, text2] = useStateFromStoresArray([LocaleStore], () => [LocaleStore.locale, LocaleStore.systemLocale]);
  const [text, setState] = useState(Module3771.locale);
  useEffect(() => {
    setTimeout(() => {
      setState(Module3771.locale());
    }, 0);
  }, [text3]);
  return <TableRowGroup hasIcons={false}>
    <TableRow label="Active System" trailing={<TableRow.TrailingText text="@discord/intl" />} />
    <TableRow label="App locale" trailing={<TableRow.TrailingText text={text3} />} />
    <TableRow label="System locale" trailing={<TableRow.TrailingText text={text2} />} />
    <TableRow label="@discord/intl locale" trailing={<TableRow.TrailingText text={_index_native.intl.currentLocale} />} />
    <TableRow label="Moment locale" trailing={<TableRow.TrailingText text={text} />} subLabel={text === Module3771.localeData()._abbr ? "Locale data matches current locale" : "Locale data does not match"} />
  </TableRowGroup>;
};
useStyles = createStyles({
  wrap: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  container: {
    padding: 16
  }
});
export default function IntlTestingSettingsPage() {
  let setState2;
  const styles = useStyles();
  useSyncExternalStore(_index_native.intl.onLocaleChange, () => _index_native.intl.currentLocale);
  setState2 = _slicedToArray(useState({}), 2)[1];
  useEffect(() => {
    waitForAllDefaultIntlMessagesLoaded().then(() => {
      setState2({});
    });
  }, []);
  return <ScrollView style={styles.wrap}>
    <Stack spacing={24} style={styles.container}>
      <LocaleInfo />
      <TestLocaleSelector />
      <Text variant="text-md/normal">
        {_index_native.intl.format(Test_messages.HMvEC5, {})}
      </Text>
      <Text variant="text-md/normal">
        {_index_native.intl.format(SecondTest_messages.swfLzV, {})}
      </Text>
      <Text variant="text-md/normal">
        {_index_native.intl.format(Test_messages.rmps8y, {})}
      </Text>
      <Text variant="text-md/normal">
        {_index_native.intl.format(Test_messages.uczI4g, {
          linkTarget: function linkTarget() {}
        })}
      </Text>
      <Text variant="text-md/normal">
        {_index_native.intl.format(Test_messages.rdfRyh, {})}
      </Text>
      <Text variant="text-md/normal">
        {_index_native.intl.format(Test_messages.XOdbAy, {
          username: "some user",
          usernameHook: (a0) => <View style={{
            backgroundColor: "green",
            borderRadius: 4,
            paddingHorizontal: 6,
            paddingVertical: 0
          }}>
            <Text variant="text-sm/normal" color="text-overlay-light">
              {a0}
            </Text>
          </View>
        })}
      </Text>
    </Stack>
  </ScrollView>;
};