// Metro module 14359 (f14360).
import { useState, useCallback } from "react";
import { Pressable, View } from "react-native";
import { FLYWHEEL_EFFECTS } from "../DisplayNameStylesConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
import { useVisibleEffectOrder } from "../DisplayNameStylesEffectOrder";
import { useDisplayNameStylesNewEffects } from "../hooks/useDisplayNameStylesNewItems";
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
import { intl, t } from "../../../intl/index.native";
import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
import { Button } from "../../../design/components/Button/native/Button.native";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { DISPLAY_NAME_STYLES_EFFECT_NAMES, useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
import UsernameWithEffects from "./UsernameWithEffects";
import { EffectDisplayType } from "../types";
import { Text } from "../../../design/components/Text/native/Text";
let useStyles;
const EffectTile = function EffectTile(props) {
  const { userId: userId2, effectId } = props;
  let selected = props.selected;
  let showNewDot = props.showNewDot;
  const onClick2 = props.onClick;
  const styles = useStyles();
  let r27 = DISPLAY_NAME_STYLES_EFFECT_NAMES[effectId];
  if (r27 == null) {
    r27 = DisplayNameStyles_messages.OpWJ3f;
  }
  const userName = intl.string(r27);
  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(effectId);
  let r10 = FLYWHEEL_EFFECTS.includes(effectId);
  const props2 = {
    onPress: onClick2,
    accessibilityRole: "button",
    accessibilityLabel: r10 ? `${userName}, ${intl.string(t.oW0eUd)}` : userName,
    accessibilityState: {
      selected
    },
    children: null
  };
  const style = [styles.effectCard, ,];
  if (selected) {
    selected = styles.effectCardSelected;
  }
  style[1] = selected;
  const r67 = [<UsernameWithEffects userId={userId2} userName={userName} effectDisplayType={EffectDisplayType.STATIC} pendingDisplayNameStyles={displayNameStylesEffectConfig.previewStyles} style={styles.effectName} variant="text-md/semibold" />, , ,];
  if (showNewDot) {
    showNewDot = <View style={styles.tileNewDot} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
  }
  r67[1] = showNewDot;
  if (r10) {
    r10 = <Text variant="text-xs/normal" color="text-subtle" style={styles.betaCaption}>
      {intl.string(t.oW0eUd)}
    </Text>;
  }
  r67[2] = r10;
  props2.children = <View style={style}>{r67}</View>;
  return <Pressable key={effectId} {...props2} />;
};
useStyles = createStyles({
  header: {
    paddingTop: 4
  },
  headerTrailing: {
    justifyContent: "center",
    alignItems: "center"
  },
  container: {
    flex: 1
  },
  contentContainer: {
    padding: Module712.space.PX_8,
    paddingLeft: Module712.space.PX_16,
    alignItems: "center"
  },
  gridContainer: {
    flexWrap: "wrap",
    width: 350
  },
  effectCard: {
    width: 109,
    height: 80,
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    borderRadius: Module712.radii.sm,
    borderWidth: 1,
    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    justifyContent: "center",
    alignItems: "center"
  },
  effectCardSelected: {
    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
  },
  effectName: {
    textAlign: "center"
  },
  tileNewDot: {
    position: "absolute",
    top: Module712.space.PX_8,
    right: Module712.space.PX_8,
    width: Module712.space.PX_8,
    height: Module712.space.PX_8,
    borderRadius: Module712.space.PX_8 / 2,
    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND,
    shadowColor: Module712.colors.BADGE_BACKGROUND_BRAND,
    shadowRadius: Module712.space.PX_4,
    shadowOpacity: 1,
    elevation: 4
  },
  betaCaption: {
    position: "absolute",
    bottom: Module712.space.PX_4,
    left: 0,
    right: 0,
    textAlign: "center"
  }
});
export default function DisplayNameStylesEffectPickerSheet(props) {
  const { userId, selectedEffectId, onSelectEffect } = props;
  const styles = useStyles();
  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
  const visibleEffectOrder = useVisibleEffectOrder();
  const displayNameStylesNewEffects = useDisplayNameStylesNewEffects(visibleEffectOrder);
  const { dotEffectIds, dismissEffectDot } = displayNameStylesNewEffects;
  const [state, setState] = useState(selectedEffectId);
  const r2 = state !== selectedEffectId;
  let c21175_6 = r2;
  const callback = useCallback((a0) => {
    setState(a0);
  }, []);
  const callback2 = useCallback(() => {
    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
    if (c21175_6) {
      onSelectEffect(state);
    }
    ActionSheetActionCreators.hideActionSheet();
  }, [r2, state, onSelectEffect]);
  return userId != null ? <BottomSheet ref={bottomSheetRef} header={<View style={styles.header}>
    <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages.RVtMxT)} trailing={<View style={styles.headerTrailing}>
      <Button text={intl.string(t.XqMe3N)} onPress={callback2} variant="primary" size="sm" />
    </View>} />
  </View>}>
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Stack direction="horizontal" spacing={8} style={styles.gridContainer}>
          {visibleEffectOrder.map((item) => {
            return <EffectTile key={item} userId={userId} effectId={item} selected={item === state} showNewDot={dotEffectIds.has(item)} onClick={() => {
              callback(item);
              if (dotEffectIds.has(item)) {
                dismissEffectDot(item);
              }
            }} />;
          })}
        </Stack>
      </View>
    </View>
  </BottomSheet> : null;
};