// Metro module 10338 (f10339).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useState, useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import ReanimatedRexport, { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { useInAppNotificationContext } from "./InAppNotificationContext";
function $mk84445($env) {
  return (a0) => (0, $env[2])(a0.nativeEvent.layout.width);
}
function $mk84446($env) {
  return function n() {
    const r2 = $env;
    const r4 = r2[0];
    let r1 = r4;
    if (typeof r1 !== "number") {
      r1 = r4.get();
    }
    const r5 = r1 / 100;
    const r6 = r2[1];
    return {
      transform: [{
        translateX: r6 * r5 - r6
      }]
    };
  };
}
let useStyles, __initData, RedesignProgress;
const Progress = function Progress(props) {
  let env17885;
  const { percent, hideProgress } = props;
  const styles = useStyles();
  const r15 = env17885 = {};
  env17885[0] = percent;
  env17885[1] = void 0;
  env17885[2] = void 0;
  const r17 = _slicedToArray(useState(0), 2);
  const width = r17[0];
  env17885[1] = width;
  env17885[2] = r17[1];
  const callback = useCallback($mk84445(r15), []);
  const r26 = $mk84446(r15);
  r26.__closure = {
    percent,
    width
  };
  r26.__workletHash = 14879761869068;
  r26.__initData = __initData;
  return <View onLayout={callback} style={[styles.progressContainerBottom, {
    opacity: hideProgress ? 0 : 1
  }]}>
    <ReanimatedRexport.View style={[styles.progress, useAnimatedStyle(r26)]} />
  </View>;
};
RedesignProgress = function RedesignProgress(props) {
  let env17886;
  const { percent, hideProgress, type } = props;
  const styles = useStyles();
  const r16 = env17886 = {};
  env17886[0] = percent;
  env17886[1] = void 0;
  env17886[2] = void 0;
  const r18 = _slicedToArray(useState(0), 2);
  const width = r18[0];
  env17886[1] = width;
  env17886[2] = r18[1];
  const callback = useCallback($mk84445(r16), []);
  const r28 = $mk84446(r16);
  r28.__closure = {
    percent,
    width
  };
  r28.__workletHash = 14879761869068;
  r28.__initData = __initData;
  return <View onLayout={callback} style={[styles.progressContainerTop, {
    opacity: hideProgress ? 0 : 1
  }]}>
    <View style={styles.progressTrack}>
      <ReanimatedRexport.View style={[styles.progressRedesign, type === "ALERT" ? styles.progressBarWarning : styles.progressBarBrand, useAnimatedStyle(r28)]} />
    </View>
  </View>;
};
useStyles = createStyles({
  progress: {
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_BRAND,
    height: 4
  },
  progressRedesign: {
    borderRadius: Module712.radii.xs,
    height: 8
  },
  progressBarBrand: {
    backgroundColor: Module712.colors.BACKGROUND_BRAND
  },
  progressBarWarning: {
    backgroundColor: Module712.unsafe_rawColors.YELLOW_300
  },
  progressTrack: {
    width: "100%",
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    height: 8,
    overflow: "hidden"
  },
  progressContainerTop: {
    position: "absolute",
    top: -5,
    left: 16,
    right: 16
  },
  progressContainerBottom: {
    width: "100%",
    position: "absolute",
    bottom: -1
  }
});
__initData = {
  code: "function NotificationProgressTsx1(){const{percent,width}=this.__closure;const percentRemaining=(typeof percent==='number'?percent:percent.get())/100;return{transform:[{translateX:-width+width*percentRemaining}]};}"
};
export default function NotificationProgress(props) {
  const { canExpand, percent, type } = props;
  const inAppNotificationContext = useInAppNotificationContext();
  let autoDismissing = inAppNotificationContext.autoDismissing;
  const isExpanded = inAppNotificationContext.isExpanded;
  if (!autoDismissing) {
    autoDismissing = isExpanded;
  }
  return canExpand ? <RedesignProgress percent={percent} hideProgress={autoDismissing} type={type} /> : <Progress percent={percent} hideProgress={autoDismissing} />;
};