// Metro module 15008 (f15009).
import { memo, useCallback } from "react";
import { Image as Image2, Pressable, View } from "react-native";
import SelectedGuildStore from "../../../stores/SelectedGuildStore";
import { DM_WIDTH, EMPTY_NUX_SERVER } from "../../../Constants";
import { MODE_CHANGE_PHYSICS } from "../../main_tabs_v2/native/MainTabsConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useToken } from "../../../design/tokens/native/useToken";
import { useStateFromStores } from "../../../_bundle/Module589";
import { transitionToGuild } from "../../routing/transitionToGuild.native";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import * as _spring from "../../../design/animation/reanimated/spring/spring";
import { intl, t } from "../../../intl/index.native";
import Module15009 from "../../../_bundle/Module15009";
import { UnreadIndicator } from "./GuildsBarAnimatedItemWrapper";
let __initData;
const hitSlop = {
  top: 4,
  left: 12,
  bottom: 4,
  right: 12
};
const useStyles = createStyles((a0) => ({
  container: {
    position: "relative",
    flexDirection: "row",
    alignItems: "center",
    marginTop: Module712.modules.mobile.GUILD_BAR_ITEM_PADDING,
    height: 55,
    width: a0
  },
  guildIndicator: {
    position: "absolute",
    left: -(DM_WIDTH - a0) / 2,
    top: 4
  },
  icon: {
    width: 59,
    height: 55,
    marginLeft: -3,
    marginRight: -6
  },
  backdrop: {
    position: "absolute",
    top: 16,
    width: a0,
    height: a0 - 10,
    borderRadius: a0 / 3
  }
}));
__initData = {
  code: "function GuildsBarItemEmptyNUXTsx1(){const{withSpring,selected,activeColor,inactiveColor,MODE_CHANGE_PHYSICS}=this.__closure;return{backgroundColor:withSpring(selected?activeColor:inactiveColor,MODE_CHANGE_PHYSICS,'animate-always')};}"
};
const r42 = memo(function GuildsBarEmptyNUX() {
  let sharedValue, token, token2;
  const styles = useStyles(useToken(Module712.modules.mobile.GUILD_BAR_ITEM_SIZE));
  const stateFromStores = useStateFromStores([SelectedGuildStore], () => SelectedGuildStore.getGuildId() === EMPTY_NUX_SERVER);
  const callback = useCallback(() => {
    transitionToGuild(EMPTY_NUX_SERVER);
  }, []);
  sharedValue = useSharedValue(false);
  const callback2 = useCallback(() => {
    sharedValue.set(true);
  }, [sharedValue]);
  const callback3 = useCallback(() => {
    sharedValue.set(false);
  }, [sharedValue]);
  token = useToken(Module712.colors.BACKGROUND_SURFACE_HIGH);
  token2 = useToken(Module712.colors.BACKGROUND_BRAND);
  const r63 = () => ({
    backgroundColor: _spring.withSpring(stateFromStores ? token2 : token, MODE_CHANGE_PHYSICS, "animate-always")
  });
  r63.__closure = {
    withSpring: _spring.withSpring,
    selected: stateFromStores,
    activeColor: token2,
    inactiveColor: token,
    MODE_CHANGE_PHYSICS
  };
  r63.__workletHash = 15012639840543;
  r63.__initData = __initData;
  const animatedStyle = useAnimatedStyle(r63);
  return <Pressable style={styles.container} onPressIn={callback2} onPressOut={callback3} onPress={callback} accessible accessibilityRole="button" accessibilityLabel={intl.string(t["3S2xmm"])} accessibilityState={{
    selected: stateFromStores
  }} hitSlop={hitSlop}>
    <ReanimatedRexport.View style={[styles.backdrop, animatedStyle]} />
    <Image2 style={styles.icon} source={Module15009} resizeMode="contain" />
    <View style={styles.guildIndicator}>
      <UnreadIndicator selected={stateFromStores === true} />
    </View>
  </Pressable>;
});
export default r42;