// Metro module 14952 (f14953).
import { useMemo, useCallback, useContext, useRef, useEffect } from "react";
import { IOS_POINTER_STYLE } from "../../../design/components/Styles/native/styleConstants";
import { GUILD_ITEM_HIT_SLOP, useGuildWrapperSize } from "./GuildsBarConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useToken } from "../../../design/tokens/native/useToken";
import * as _TransitionGroup from "../../../design/components/TransitionGroup/TransitionGroup";
import { TransitionItem } from "../../../design/components/TransitionGroup/TransitionGroup";
import * as _spring from "../../../design/animation/reanimated/spring/spring";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import ReanimatedNativeView from "../../core/native/ReanimatedNativeView";
import usePressability from "../../core/native/usePressability";
import { HomeDrawerStateContext } from "../../home_drawer/native/useHomeDrawerGesture";
import { MobileHomeDrawerExperiment } from "../../home_drawer/native/HomeDrawerExperiment";
import { intl, t } from "../../../intl/index.native";
import { AccessibilityAnnouncer } from "../../../_bundle/Module3902";
import NativeView from "../../core/native/NativeView";
import { ClipViewAnimated } from "../../../design/components/Icon/native/ClipView";
let CORNER_SPRING_PHYSICS, BAR_SPRING_PHYSICS, useStyles, useStyles2, __initData, __initData2, renderUnreadIndicator, __initData3;
const UnreadIndicator = function UnreadIndicator(props) {
  const { selected: selected2, sharedId, id, transitionState = _TransitionGroup.TransitionStates.MOUNTED } = props;
  const MOUNTED = transitionState;
  const cleanUp = props.cleanUp;
  const token = useToken(Module712.modules.mobile.GUILD_BAR_ITEM_SIZE);
  const styles = useStyles(useGuildWrapperSize());
  const disableEntering = MOUNTED === _TransitionGroup.TransitionStates.MOUNTED;
  let c21485_6 = disableEntering;
  const height = selected2 ? MOUNTED !== _TransitionGroup.TransitionStates.YEETED ? 40 : 8 : 8;
  const memo = useMemo(() => [styles.unreadIndicator, {
    height,
    marginTop: height / 2 * -1,
    marginLeft: MOUNTED === _TransitionGroup.TransitionStates.YEETED ? -4 : 0
  }], [height, MOUNTED, styles.unreadIndicator]);
  const h = function h(a0) {
    let r31;
    L5: {
      L4: {
        if (!c21485_6) {
          if (sharedId != null && sharedId.get() !== id) {
            break L4;
          }
          r31 = {
            animations: {
              originY: _spring.withSpring(a0.targetOriginY, BAR_SPRING_PHYSICS, "animate-always"),
              originX: _spring.withSpring(a0.targetOriginX, BAR_SPRING_PHYSICS, "animate-always"),
              height: _spring.withSpring(a0.targetHeight, BAR_SPRING_PHYSICS, "animate-always")
            },
            initialValues: {
              height: 8,
              originY: token / 2,
              originX: -12
            }
          };
          break L5;
        }
      }
      r31 = {
        animations: {},
        initialValues: {}
      };
    }
    return r31;
  };
  h.__closure = {
    disableEntering,
    sharedId,
    id,
    withSpring: _spring.withSpring,
    BAR_SPRING_PHYSICS,
    guildItemSize: token
  };
  h.__workletHash = 404454683979;
  h.__initData = __initData;
  const callback2 = useCallback(h, [disableEntering, sharedId, id, token]);
  const _ = function _(a0) {
    return {
      animations: {
        originY: _spring.withSpring(a0.targetOriginY, BAR_SPRING_PHYSICS, "animate-always"),
        originX: _spring.withSpring(a0.targetOriginX, BAR_SPRING_PHYSICS, "animate-always"),
        height: _spring.withSpring(a0.targetHeight, BAR_SPRING_PHYSICS, "animate-always")
      },
      initialValues: {
        height: a0.currentHeight,
        originY: a0.currentOriginY,
        originX: a0.currentOriginX
      },
      callback: (a0) => {
        if (MOUNTED === _TransitionGroup.TransitionStates.YEETED && a0 && cleanUp != null) {
          _ReanimatedRexport.runOnJS(cleanUp)();
        }
      }
    };
  };
  _.__closure = {
    withSpring: _spring.withSpring,
    BAR_SPRING_PHYSICS,
    transitionState: MOUNTED,
    TransitionStates: _TransitionGroup.TransitionStates,
    cleanUp,
    runOnJS: _ReanimatedRexport.runOnJS
  };
  _.__workletHash = 10632665703864;
  _.__initData = __initData2;
  return <ReanimatedNativeView collapsable={false} entering={callback2} layout={useCallback(_, [MOUNTED, cleanUp])} style={memo} pointerEvents="none" />;
};
renderUnreadIndicator = function renderUnreadIndicator(a0, a1, a2, a3) {
  return <UnreadIndicator key={a0} sharedId={a1.sharedId} id={a1.id} selected={a1.selected} transitionState={a2} cleanUp={a3} />;
};
CORNER_SPRING_PHYSICS = {
  mass: 0.8,
  damping: 100,
  stiffness: 150
};
BAR_SPRING_PHYSICS = {
  mass: 0.25,
  damping: 100,
  stiffness: 200
};
useStyles = createStyles(function(height2 = 56) {
  return {
    draggedElement: {
      opacity: 0
    },
    selectedBackgroundOverlay: {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    },
    container: {
      position: "relative",
      overflow: "visible"
    },
    unreadIndicator: {
      position: "absolute",
      top: height2 / 2,
      left: -4,
      height: 8,
      width: 8,
      borderRadius: Module712.radii.xs,
      backgroundColor: Module712.colors.TEXT_STRONG
    },
    expandedChildrenWrapper: {
      position: "absolute",
      left: height2 + 16,
      top: 0,
      right: 8,
      height: height2,
      transformOrigin: "0% 50%",
      display: "flex",
      flexDirection: "row",
      alignItems: "center"
    }
  };
});
useStyles2 = createStyles((a0, a1, a2, a3) => {
  let backgroundColor;
  let r25 = "transparent";
  if (a0) {
    if (!a1) {
      r25 = Module712.colors.BACKGROUND_SURFACE_HIGH;
    }
    backgroundColor = r25;
  } else {
    backgroundColor = Module712.colors.BACKGROUND_BRAND;
  }
  return {
    pressableWrapper: {
      position: "relative",
      paddingTop: Module712.modules.mobile.GUILD_BAR_ITEM_MARGIN,
      paddingBottom: Module712.modules.mobile.GUILD_BAR_ITEM_MARGIN,
      paddingLeft: 12,
      height: a3,
      width: a2 + GUILD_ITEM_HIT_SLOP.left + GUILD_ITEM_HIT_SLOP.right
    },
    itemShape: {
      position: "relative",
      width: a2,
      height: a2,
      overflow: "hidden",
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: a1 ? "transparent" : Module712.colors.MOBILE_GUILDBAR_ICON_BACKGROUND_DEFAULT
    },
    itemShapeSelected: {
      backgroundColor
    }
  };
});
__initData = {
  code: "function GuildsBarAnimatedItemWrapperTsx1(values){const{disableEntering,sharedId,id,withSpring,BAR_SPRING_PHYSICS,guildItemSize}=this.__closure;if(disableEntering||sharedId!=null&&sharedId.get()!==id){return{animations:{},initialValues:{}};}return{animations:{originY:withSpring(values.targetOriginY,BAR_SPRING_PHYSICS,'animate-always'),originX:withSpring(values.targetOriginX,BAR_SPRING_PHYSICS,'animate-always'),height:withSpring(values.targetHeight,BAR_SPRING_PHYSICS,'animate-always')},initialValues:{height:8,originY:guildItemSize/2,originX:-12}};}"
};
__initData2 = {
  code: "function GuildsBarAnimatedItemWrapperTsx2(values){const{withSpring,BAR_SPRING_PHYSICS,transitionState,TransitionStates,cleanUp,runOnJS}=this.__closure;return{animations:{originY:withSpring(values.targetOriginY,BAR_SPRING_PHYSICS,'animate-always'),originX:withSpring(values.targetOriginX,BAR_SPRING_PHYSICS,'animate-always'),height:withSpring(values.targetHeight,BAR_SPRING_PHYSICS,'animate-always')},initialValues:{height:values.currentHeight,originY:values.currentOriginY,originX:values.currentOriginX},callback:function(finished){if(transitionState===TransitionStates.YEETED&&finished&&cleanUp!=null){runOnJS(cleanUp)();}}};}"
};
__initData3 = {
  code: "function GuildsBarAnimatedItemWrapperTsx3(){const{withSpring,circle,guildItemSelectedBorderRadius,guildItemSize,CORNER_SPRING_PHYSICS}=this.__closure;return{borderRadius:withSpring(!circle?guildItemSelectedBorderRadius:guildItemSize/2,CORNER_SPRING_PHYSICS,'animate-always')};}"
};
export default function GuildsBarAnimatedItemWrapper(props) {
  let c21486_17, ref, c21486_19;
  const { id: id2, selected, unread, circle, children, externalChildren, expandedChildren, config, label, hint, draggable = false } = props;
  let c21486_4 = draggable;
  const { cutouts, isDragTarget = false } = props;
  let c21486_5 = isDragTarget;
  const { dragState, isDragPreview = false, draggedItemSize = 0 } = props;
  const top = draggedItemSize;
  const { overState, styles: styles2, accessibilityActions, onAccessibilityAction, preventClipping = false, expanded, entering, exiting, layout, zIndex: zIndex2 = 0 } = props;
  const zIndex = zIndex2;
  const sharedId2 = props.sharedId;
  c21486_17 = void 0;
  ref = void 0;
  c21486_19 = void 0;
  const guildWrapperSize = useGuildWrapperSize();
  const token2 = useToken(Module712.modules.mobile.GUILD_BAR_ITEM_SIZE);
  const styles3 = useStyles(guildWrapperSize);
  const pressability = usePressability(config);
  const token3 = useToken(Module712.modules.mobile.GUILD_ITEM_SELECTED_BORDER_RADIUS);
  const W = () => ({
    borderRadius: _spring.withSpring(circle ? token2 / 2 : token3, CORNER_SPRING_PHYSICS, "animate-always")
  });
  W.__closure = {
    withSpring: _spring.withSpring,
    circle,
    guildItemSelectedBorderRadius: token3,
    guildItemSize: token2,
    CORNER_SPRING_PHYSICS
  };
  W.__workletHash = 15930523896348;
  W.__initData = __initData3;
  const animatedStyle = useAnimatedStyle(W);
  const context = useContext(HomeDrawerStateContext);
  const { guildsBarLabelDrawerStyle, guildsBarIconDrawerStyle, guildsBarUnreadDrawerStyle } = context;
  const memo = useMemo(() => {
    let r20, top2;
    const r7 = c21486_5 && dragState === "dragging" ? overState === "self" ? overState != null && overState !== "self" ? dragState !== "dragging" ? "none" : "drag-target" : "none" : "hide" : overState != null && overState !== "self" ? dragState !== "dragging" ? "none" : "drag-target" : "none";
    const height2 = r7 === "drag-target" ? guildWrapperSize + top : r7 !== "hide" ? guildWrapperSize : 0;
    L17: {
      r20 = {
        height: height2,
        top: null,
        zIndex: null
      };
      top2 = 0;
      if (r7 === "drag-target") {
        if (overState !== "before") {
          top2 = 0;
          if (overState !== "convert-before") {
            break L17;
          }
        }
        top2 = top;
      }
    }
    r20.top = top2;
    r20.zIndex = zIndex;
    return r20;
  }, [isDragTarget, dragState, top, overState, zIndex, guildWrapperSize]);
  const memo2 = useMemo(() => [styles2.pressableWrapper, c21486_5 ? styles3.draggedElement : void 0, IOS_POINTER_STYLE], [styles2.pressableWrapper, isDragTarget, styles3.draggedElement]);
  const r94 = (unread ? !unread : !selected) || isDragTarget || isDragPreview;
  c21486_17 = r94;
  const memo3 = useMemo(() => {
    if (c21486_17) {
      return void 0;
    }
    return {
      selected,
      sharedId: sharedId2,
      id: id2
    };
  }, [r94, selected, sharedId2, id2]);
  const enableHome = MobileHomeDrawerExperiment.useConfig({
    location: "guilds_bar"
  }).enableHome;
  ref = useRef(void 0);
  useEffect(() => {
    if (ref.current !== void 0) {
      if (ref.current !== expanded) {
        AccessibilityAnnouncer.announce(intl.string(expanded ? t.CUnsOR : t.jsudFd));
        ref.current = expanded;
      }
    } else {
      ref.current = expanded;
    }
  }, [expanded]);
  const r2 = accessibilityActions != null && accessibilityActions.length > 0;
  c21486_19 = r2;
  const memo4 = useMemo(() => {
    const r10 = hint != null && hint.length > 0;
    const r5 = [];
    if (r10) {
      r5.push(hint);
    }
    if (c21486_4) {
      r5.push(intl.string(t.BGMUFB));
    }
    if (c21486_19) {
      r5.push(intl.string(t.X2x0MF));
    }
    return r5.join(". ");
  }, [hint, draggable, r2]);
  const r122 = enableHome ? styles3.container : null;
  return <ReanimatedNativeView style={[r122, memo]} layout={layout} entering={entering} exiting={exiting} preventClipping={preventClipping} collapsable={false}>
    <ReanimatedNativeView style={enableHome ? guildsBarIconDrawerStyle : null}>
      <NativeView {...pressability} style={memo2} accessibilityLabel={label} accessible accessibilityRole="button" accessibilityState={{
        selected,
        expanded
      }} hitSlop={GUILD_ITEM_HIT_SLOP} accessibilityHint={memo4.length > 0 ? memo4 : void 0} collapsable={false} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction}>
        {externalChildren}
        <ReanimatedNativeView pointerEvents="none" style={[{
          position: "absolute",
          width: guildWrapperSize,
          height: guildWrapperSize
        }, enableHome ? guildsBarUnreadDrawerStyle : null]}>
          <TransitionItem item={memo3} renderItem={renderUnreadIndicator} />
        </ReanimatedNativeView>
        <ClipViewAnimated style={[styles2.itemShape, animatedStyle]} cutouts={cutouts}>
          <NativeView pointerEvents="none" style={[styles3.selectedBackgroundOverlay, selected ? styles2.itemShapeSelected : null]} />
          {isDragTarget ? !isDragTarget : children}
        </ClipViewAnimated>
      </NativeView>
    </ReanimatedNativeView>
    {enableHome ? <ReanimatedNativeView {...pressability} style={[styles3.expandedChildrenWrapper, guildsBarLabelDrawerStyle]}>
      {isDragTarget ? !isDragTarget : expandedChildren}
    </ReanimatedNativeView> : null}
  </ReanimatedNativeView>;
};
export function useGuildsBarAnimatedWrapperStyles(r2 = {}) {
  const { disableSelectedColor = false, disableBGColor = false } = r2;
  return useStyles2(disableSelectedColor, disableBGColor, useToken(Module712.modules.mobile.GUILD_BAR_ITEM_SIZE), useGuildWrapperSize());
}
export { UnreadIndicator };
export { renderUnreadIndicator };