// Metro module 11141 (f11142).
import * as Module19 from "react";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { View } from "react-native";
import SubscriptionStore from "../../../../stores/billing/SubscriptionStore";
import { AnalyticEvents } from "../../../../Constants";
import { PremiumTypes } from "../../../premium/PremiumConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import { previewCustomTheme, clearPreviewTheme, updateCustomTheme } from "../CustomThemeMobileActionCreators";
import { refreshTheme } from "../../../user_settings/ThemeActionCreators";
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 ClientThemes_messages from "../../intl/ClientThemes.messages";
import { Text } from "../../../../design/components/Text/native/Text";
import { saveClientTheme } from "../../../../actions/UserSettingsActionCreators";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { useStateFromStores } from "../../../../_bundle/Module589";
import PremiumUtils from "../../../../utils/PremiumUtils";
import openPremiumPlanSelectionActionSheet from "../../../premium/native/openPremiumPlanSelectionActionSheet";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import { ShinyButton, NitroWheel } from "../../../../design/void/native";
import { getBaseTheme } from "../../ClientThemesUtils";
function $mk86440() {
  return (a0) => `#${a0}`;
}
let useStyles;
const PrimaryActionButton = function PrimaryActionButton(props) {
  const onPressApply2 = props.onPressApply;
  const styles = useStyles();
  return PremiumUtils.getPremiumTypeFromSubscription(useStateFromStores([SubscriptionStore], () => SubscriptionStore.getPremiumTypeSubscription())) !== PremiumTypes.TIER_2 ? <ShinyButton text={intl.string(t.pj0XBN)} onPress={function onPressSubscribe() {
    openPremiumPlanSelectionActionSheet({
      premiumType: PremiumTypes.TIER_2,
      analyticsLocations: [AnalyticsLocation.SHARE_CUSTOM_CLIENT_THEME_EMBED],
      analyticsLocation: {}
    });
  }} renderIcon={() => <NitroWheel style={[styles.nitroWheelButton]} />} style={styles.getNitroButton} /> : <Button text={intl.string(t["1Qm822"])} onPress={onPressApply2} variant="primary" />;
};
useStyles = createStyles({
  contentWrapper: {
    paddingHorizontal: 43.5,
    paddingVertical: 12
  },
  centeredText: {
    textAlign: "center"
  },
  ctaContainer: {
    paddingHorizontal: 15,
    flexDirection: "column",
    display: "flex",
    gap: 6
  },
  nitroWheelButton: {
    marginStart: -2,
    width: 20,
    height: 20
  },
  getNitroButton: {
    borderRadius: Module712.radii.round
  }
});
export default (a0) => {
  const sharedClientTheme = a0.message.sharedClientTheme;
  const styles2 = useStyles();
  const ref = useRef(null);
  const r24 = sharedClientTheme !== void 0;
  const [state, setState] = useState(r24 ? {
    colors: sharedClientTheme.colors.map($mk86440()),
    gradientColorStops: [],
    gradientAngle: sharedClientTheme.gradient_angle,
    baseMix: sharedClientTheme.base_mix
  } : void 0);
  const [state2, setState2] = useState(r24 ? getBaseTheme(sharedClientTheme.base_theme) : void 0);
  const [state3, setState3] = useState(false);
  const ref2 = Module19.useRef(true);
  useEffect(() => {
    const r1 = sharedClientTheme !== void 0;
    setState(r1 ? {
      colors: sharedClientTheme.colors.map($mk86440()),
      gradientColorStops: [],
      gradientAngle: sharedClientTheme.gradient_angle,
      baseMix: sharedClientTheme.base_mix
    } : void 0);
    setState2(r1 ? getBaseTheme(sharedClientTheme.base_theme) : void 0);
    AnalyticsUtils.track(AnalyticEvents.CUSTOM_THEME_SHARE_PREVIEWED, {});
  }, [sharedClientTheme]);
  useEffect(() => {
    if (state !== void 0 && state2 !== void 0) {
      previewCustomTheme({
        baseTheme: state2,
        customTheme: state
      });
      refreshTheme();
    }
  }, [state, state2]);
  useLayoutEffect(() => {
    ref2.current = !state3;
  }, [state3]);
  useEffect(() => () => {
    if (ref2.current) {
      clearPreviewTheme();
      refreshTheme();
    }
  }, [ref2]);
  return <BottomSheet ref={ref} backdropOpacity={0}>
    <BottomSheetTitleHeader title={intl.string(ClientThemes_messages["3ej1LT"])} />
    <View style={styles2.contentWrapper}>
      <Text variant="heading-md/medium" style={styles2.centeredText}>
        {intl.string(ClientThemes_messages.qZMUoL)}
      </Text>
    </View>
    <View style={styles2.ctaContainer}>
      <PrimaryActionButton onPressApply={function onPressApply() {
        if (state !== void 0 && state2 !== void 0 && ref.current !== null) {
          setState3(true);
          updateCustomTheme(state, state2);
          saveClientTheme({
            customUserThemeSettings: state,
            theme: state2
          });
          clearPreviewTheme();
          AnalyticsUtils.track(AnalyticEvents.CUSTOM_THEME_SHARE_APPLIED, {});
          ref.current.closeActionSheet();
        }
      }} />
      <Button text={intl.string(t["13/7kX"])} onPress={function onPress() {
        if (ref.current !== null) {
          clearPreviewTheme();
          refreshTheme();
          ref.current.closeActionSheet();
        }
      }} variant="secondary" />
    </View>
  </BottomSheet>;
};