// Metro module 16466 (f16467).
import { useState, useCallback } from "react";
import { Pressable, View } from "react-native";
import { DEFAULT_GRADIENT_ROLE_COLORS, GRADIENT_PRESETS } from "../constants/EnhancedRoleColorConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { extractColorStringsFromServerColors } from "../../enhanced_role_colors/EnhancedRoleColorUtils";
import { isNotNullish } from "../../../../utils/GlobalUtils";
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 { intl, t } from "../../../../intl/index.native";
import { Button } from "../../../../design/components/Button/native/Button.native";
import Module4611 from "../../../../_bundle/Module4611";
import { EyeDropperIcon } from "../../../../design/components/Icon/native/redesign/generated/EyeDropperIcon";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { int2hex } from "../../../../_bundle/int2hslRaw";
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: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: Module712.space.PX_8
  },
  dropperContainer: {
    left: Module712.space.PX_24,
    right: Module712.space.PX_24,
    position: "absolute",
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between"
  },
  dropper: {
    borderColor: "white",
    tintColor: "white",
    padding: Module712.space.PX_8,
    borderRadius: Module712.radii.round,
    borderWidth: 1
  },
  gradient: {
    height: 50,
    width: "100%",
    borderRadius: Module712.radii.sm
  },
  optionContainer: {
    display: "flex",
    flexDirection: "row",
    gap: Module712.space.PX_8,
    flexWrap: "wrap",
    alignItems: "center",
    justifyContent: "center"
  },
  pressable: {
    width: 80,
    height: 50,
    borderRadius: Module712.radii.sm,
    overflow: "hidden",
    padding: 2
  },
  selected: {
    borderWidth: 2,
    borderColor: Module712.colors.BACKGROUND_BRAND
  },
  option: {
    flex: 1,
    borderRadius: Module712.radii.sm
  }
});
export default function RoleGradientPickerActionSheet(props) {
  let callback;
  let colors = props.colors;
  const onSelect2 = props.onSelect;
  callback = void 0;
  const styles = useStyles();
  if (!(colors != null && colors.secondary_color != null)) {
    colors = DEFAULT_GRADIENT_ROLE_COLORS;
  }
  const [state, setState] = useState(colors);
  const colors2 = Object.values(extractColorStringsFromServerColors(state)).filter(isNotNullish);
  const callback2 = useCallback(() => {
    onSelect2(state);
    ActionSheetActionCreators.hideActionSheet();
  }, [state, onSelect2]);
  callback = useCallback((a0) => {
    setState(a0);
  }, []);
  const callback3 = useCallback(() => {
    let color = state?.primary_color;
    if (color == null) {
      color = 0;
    }
    showCustomColorPickerActionSheet({
      color,
      onSelect: (a0) => callback({
        ...state,
        primary_color: a0
      })
    }, "stack");
  }, [state, callback]);
  const callback4 = useCallback(() => {
    let color = state?.secondary_color;
    if (color == null) {
      color = 0;
    }
    showCustomColorPickerActionSheet({
      color,
      onSelect: (a0) => callback({
        ...state,
        secondary_color: a0
      })
    }, "stack");
  }, [state, callback]);
  return <BottomSheet header={<BottomSheetTitleHeader title={intl.string(t.XpWmJz)} trailing={<Button variant="secondary" size="sm" text={intl.string(t["R3BPH+"])} onPress={callback2} />} />}>
    <View style={styles.body}>
      <View style={styles.gradientContainer}>
        <Module4611 style={styles.gradient} colors={colors2} start={{
          x: 0,
          y: 0
        }} end={{
          x: 1,
          y: 0
        }} />
        <View style={styles.dropperContainer}>
          <Pressable style={styles.dropper} onPress={callback3} accessibilityLabel={intl.string(t.QPqIEx)} accessibilityRole="button">
            <EyeDropperIcon color="white" size="sm" />
          </Pressable>
          <Pressable style={styles.dropper} onPress={callback4} accessibilityLabel={intl.string(t.fLMusI)} accessibilityRole="button">
            <EyeDropperIcon color="white" size="sm" />
          </Pressable>
        </View>
      </View>
      <View style={styles.optionContainer}>
        {GRADIENT_PRESETS.map((item) => {
          const [primary_color, secondary_color] = item.colors;
          return <PressableOpacity key={item.name} style={[styles.pressable, primary_color === state.primary_color && secondary_color === state.secondary_color && styles.selected]} onPress={() => callback({
            ...state,
            primary_color,
            secondary_color
          })}>
            <Module4611 style={styles.option} colors={[int2hex(primary_color), int2hex(secondary_color)]} start={{
              x: 0,
              y: 0
            }} end={{
              x: 1,
              y: 0
            }} />
          </PressableOpacity>;
        })}
      </View>
      <Button text={intl.string(t.yBZMsQ)} onPress={function onPress() {
        setState(DEFAULT_GRADIENT_ROLE_COLORS);
      }} />
    </View>
  </BottomSheet>;
};