// Metro module 14364 (f14365).
import { useMemo, useState, useCallback } from "react";
import { Pressable, View } from "react-native";
import { getColorPresetsForEffect } from "../DisplayNameStylesConstants";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
import { getEffectColorCount } from "../DisplayNameStylesUtils";
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import showCustomColorPickerActionSheet from "../../color_picker/native/showCustomColorPickerActionSheet";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { intl, t } from "../../../intl/index.native";
import Module4611 from "../../../_bundle/Module4611";
import { int2hex } from "../../../_bundle/int2hslRaw";
import { EyeDropperIcon } from "../../../design/components/Icon/native/redesign/generated/EyeDropperIcon";
import Module12 from "../../../_bundle/Module12";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
const useStyles = createStyles({
  body: {
    paddingVertical: Module712.space.PX_12,
    paddingHorizontal: Module712.space.PX_12,
    flexGrow: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: Module712.space.PX_16
  },
  gradientContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: Module712.space.PX_8
  },
  dropperContainer: {
    left: Module712.space.PX_24,
    right: Module712.space.PX_24,
    position: "absolute",
    flexDirection: "row",
    justifyContent: "space-between"
  },
  dropper: {
    borderColor: "white",
    padding: Module712.space.PX_8,
    borderRadius: Module712.radii.round,
    borderWidth: 1
  },
  gradient: {
    height: 50,
    width: "100%",
    borderRadius: Module712.radii.sm
  },
  optionContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    paddingHorizontal: Module712.space.PX_4
  },
  swatchWrapper: {
    width: "25%",
    padding: 2
  },
  pressable: {
    height: 40,
    borderRadius: Module712.radii.sm,
    overflow: "hidden",
    borderWidth: 2,
    borderColor: "transparent"
  },
  selected: {
    borderColor: Module712.colors.BACKGROUND_BRAND
  },
  option: {
    flex: 1
  }
});
export default function DisplayNameStylesColorPickerSheet(props) {
  let state, setState, callback, callback2;
  const { selectedColors, selectedEffectId, onSelectColors } = props;
  state = void 0;
  setState = void 0;
  callback = void 0;
  callback2 = void 0;
  const styles = useStyles();
  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(selectedEffectId);
  const effectColorCount = getEffectColorCount(selectedEffectId);
  const memo = useMemo(() => getColorPresetsForEffect(selectedEffectId), [selectedEffectId]);
  [state, setState] = useState(selectedColors);
  const callback3 = useCallback(() => {
    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
    onSelectColors(state);
    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_COLOR_SELECTED, {
      default: false,
      colors: state
    });
    ActionSheetActionCreators.hideActionSheet();
  }, [state, onSelectColors]);
  const callback4 = useCallback(() => {
    let r8 = memo[0];
    if (r8 == null) {
      r8 = displayNameStylesEffectConfig.defaultColors;
    }
    setState([...r8]);
  }, [memo, displayNameStylesEffectConfig.defaultColors]);
  callback = useCallback((a0) => {
    let color = state[a0];
    if (color == null) {
      color = 0;
    }
    showCustomColorPickerActionSheet({
      color,
      onSelect: (c30739_0) => {
        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
        setState((prevState) => prevState.map((item, index) => index === a0 ? c30739_0 : item));
      },
      actionButtonVariant: "primary"
    }, "stack");
  }, [state]);
  callback2 = useCallback((a0) => {
    setState([...a0]);
  }, []);
  return <BottomSheet header={<BottomSheetTitleHeader title={displayNameStylesEffectConfig.name} trailing={<Button variant="primary" size="sm" text={intl.string(t.XqMe3N)} onPress={callback3} />} />}>
    <View style={styles.body}>
      <View style={styles.gradientContainer}>
        <Module4611 style={styles.gradient} colors={state.map((item) => int2hex(item))} start={{
          x: 0,
          y: 0
        }} end={{
          x: 1,
          y: 0
        }} />
        <View style={styles.dropperContainer}>
          {Array.from({
            length: effectColorCount
          }).map((item, index) => {
            return <Pressable key={index} style={styles.dropper} onPress={() => callback(index)} accessibilityLabel={intl.formatToPlainString(t.n5Ve0L, {
              number: index + 1
            })} accessibilityRole="button">
              <EyeDropperIcon color="white" size="sm" />
            </Pressable>;
          })}
        </View>
      </View>
      <View style={styles.optionContainer}>
        {memo.map((a0, index) => {
          let r14 = Module12.isEqual(a0, state);
          const style = [styles.pressable, ,];
          if (r14) {
            r14 = styles.selected;
          }
          style[1] = r14;
          return <View key={index} style={styles.swatchWrapper}>
            <PressableOpacity style={style} onPress={() => callback2(a0)}>
              <Module4611 style={styles.option} colors={a0.map((item) => int2hex(item))} start={{
                x: 0,
                y: 0
              }} end={{
                x: 1,
                y: 0
              }} />
            </PressableOpacity>
          </View>;
        })}
      </View>
      <Button text={intl.string(t.yBZMsQ)} onPress={callback4} variant="secondary" />
    </View>
  </BottomSheet>;
};