// Metro module 10913 (f10914).
import { useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { UNSAFE_markDismissibleContentAsDismissed } from "../../dismissible_content/DismissibleContentUnsafeUtils";
import { DismissibleContent } from "../../../_bundle/Module1358";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import FastImage from "../../../components_native/common/FastImage";
import Module10914 from "../../../_bundle/Module10914";
import { Button } from "../../../design/components/Button/native/Button.native";
import { intl, t } from "../../../intl/index.native";
import { BottomSheetScrollView } from "../../../_bundle/Module5245";
import { Text } from "../../../design/components/Text/native/Text";
import { TimerIcon } from "../../../design/components/Icon/native/redesign/generated/TimerIcon";
import { LinkIcon } from "../../../design/components/Icon/native/redesign/generated/LinkIcon";
const useStyles = createStyles({
  title: {
    marginBottom: Module712.space.PX_4,
    textAlign: "center"
  },
  footer: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    padding: Module712.space.PX_16
  },
  body: {
    textAlign: "center"
  },
  noticeContainer: {
    borderRadius: Module712.radii.sm,
    marginVertical: Module712.space.PX_16,
    padding: Module712.space.PX_16
  },
  innerContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingBottom: 16
  },
  secondInnerContainer: {
    flexDirection: "row",
    alignItems: "center"
  },
  text: {
    flex: 1
  },
  titleImage: {
    padding: 16,
    justifyContent: "center",
    alignItems: "center"
  },
  item: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
    marginRight: 16,
    height: 40,
    width: 40,
    borderRadius: 20,
    alignItems: "center",
    justifyContent: "center"
  },
  button: {
    paddingTop: Module712.space.PX_16
  }
});
export default function ChatGDMUpsellActionSheet(props) {
  const onClick = props.onClick;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const callback = useCallback(() => {
    UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.GDM_INVITE_REMINDER);
    ActionSheetActionCreators.hideActionSheet();
    onClick();
  }, [onClick]);
  return <BottomSheet showGradient scrollable startExpanded header={<View style={styles.titleImage}>
    <FastImage source={Module10914} resizeMode="contain" />
  </View>} footer={<View style={[styles.footer, {
    padding: 16,
    paddingBottom: bottom + 16
  }]}>
    <Button text={intl.string(t["3PatSz"])} onPress={callback} />
    <View style={styles.button}>
      <Button text={intl.string(t["ETE/oC"])} onPress={function onPress() {
        ActionSheetActionCreators.hideActionSheet();
      }} variant="tertiary" />
    </View>
  </View>}>
    <BottomSheetScrollView>
      <Text style={styles.title} variant="heading-lg/extrabold" accessibilityRole="header">
        {intl.string(t["bkqux/"])}
      </Text>
      <Text style={styles.body} variant="text-md/medium" color="text-muted">
        {intl.string(t.N6TdqN)}
      </Text>
      <View style={styles.noticeContainer}>
        <View style={styles.innerContainer}>
          <View style={styles.item}>
            <TimerIcon size="sm" />
          </View>
          <Text style={styles.text} variant="text-sm/medium" color="text-default">
            {intl.string(t.Fq3DJb)}
          </Text>
        </View>
        <View style={styles.secondInnerContainer}>
          <View style={styles.item}>
            <LinkIcon size="sm" />
          </View>
          <Text style={styles.text} variant="text-sm/medium" color="text-default">
            {intl.string(t.XKbf2G)}
          </Text>
        </View>
      </View>
    </BottomSheetScrollView>
  </BottomSheet>;
};