discord-decomp/modules/notifications/native/GuildHighlightsNotificationsActionSheet.tsx

// Metro module 9520 (f9521).
import { useRef, useState, useCallback, useEffect } from "react";
import { View } from "react-native";
import GuildStore from "../../../stores/GuildStore";
import UserGuildSettingsStore from "../../../stores/UserGuildSettingsStore";
import { HelpdeskArticles, HighlightSettings } from "../../../Constants";
import { FeedbackRating } from "../../feedback/Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { handleSurveyCleanup } from "../../push_feedback/PushFeedbackActions";
import { useStateFromStoresObject } from "../../../_bundle/defaultAreStatesEqual";
import { intl, t } from "../../../intl/index.native";
import { FeedbackForm } from "../../feedback/native/FeedbackForm";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetScrollView } from "../../../_bundle/Module5245";
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
import ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import { Card } from "../../../design/components/Card/native/Card.native";
import { FormSwitchRow } from "../../../design/void/Form/native/index";
import NotificationSettingsModalActionCreators from "../../../actions/NotificationSettingsModalActionCreators";
import { NotificationLabel } from "../../../utils/NotificationSettingsUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
let useStyles, useStyles2;
const GuildPill = function GuildPill(props) {
  const guild = props.guild;
  const styles2 = useStyles2();
  return <View style={styles2.guildPill}>
    <GuildIcon guild={guild} size={GuildIconSizes.SMALL_32} animate />
    <Text style={styles2.guildName} variant="heading-md/semibold" color="mobile-text-heading-primary">
      {guild?.name}
    </Text>
  </View>;
};
useStyles = createStyles({
  contentContainer: {
    padding: 24,
    alignItems: "center",
    justifyContent: "center"
  },
  header: {
    alignItems: "center",
    paddingBottom: 24
  },
  headerTitle: {
    marginBottom: 4
  },
  centerText: {
    textAlign: "center"
  },
  feedback: {
    marginTop: 16,
    alignItems: "stretch",
    alignSelf: "stretch",
    paddingBottom: 16
  },
  thanks: {
    height: 40,
    textAlign: "center",
    textAlignVertical: "center"
  },
  settings: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    marginVertical: 8,
    padding: 0
  }
});
useStyles2 = createStyles({
  guildPill: {
    flexDirection: "row",
    padding: 8,
    marginBottom: 16,
    backgroundColor: Module712.colors.GUILD_NOTIFICATIONS_BOTTOM_SHEET_PILL_BACKGROUND,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Module712.radii.round,
    ...Module712.shadows.SHADOW_LOW
  },
  guildName: {
    paddingHorizontal: 8
  }
});
export default function SummaryFeedbackActionSheet(props) {
  let r105;
  const { guildId, feedbackSettings } = props;
  const styles = useStyles();
  const ref = useRef(null);
  let [state3, setState] = useState(void 0);
  const state = state3;
  const [state2, setState2] = useState(false);
  const [state4, setState3] = useState(false);
  const callback = useCallback((a0) => {
    let r3 = state2;
    if (!state2) {
      r3 = a0?.rating == null;
    }
    if (!r3) {
      if (feedbackSettings != null) {
        const onFeedbackCompleted = feedbackSettings.onFeedbackCompleted;
        if (onFeedbackCompleted != null) {
          onFeedbackCompleted.call(feedbackSettings, a0);
        }
      }
      handleSurveyCleanup();
      setState2(true);
    }
  }, [state2, feedbackSettings]);
  useEffect(() => () => {
    callback(state);
  }, [state, callback]);
  const callback2 = useCallback((a0) => {
    setState(a0);
    const r5 = a0 == null ? {} : a0;
    const { rating, reason } = r5;
    if (rating === FeedbackRating.GOOD || reason != null) {
      callback(a0);
      setState3(false);
    } else {
      setState3(true);
    }
    handleSurveyCleanup();
  }, [callback]);
  const callback3 = useCallback(() => {
    const current = ref.current;
    if (current != null) {
      current.expandActionSheet();
    }
    setState3(false);
  }, []);
  const stateFromStoresObject = useStateFromStoresObject([UserGuildSettingsStore, GuildStore], () => ({
    guild: GuildStore.getGuild(guildId),
    muted: UserGuildSettingsStore.isMuted(guildId),
    notifyHighlights: UserGuildSettingsStore.getNotifyHighlights(guildId)
  }), [guildId]);
  const guild = stateFromStoresObject.guild;
  let muted = stateFromStoresObject.muted;
  const notifyHighlights = stateFromStoresObject.notifyHighlights;
  const r6 = feedbackSettings?.reasons != null;
  let r24 = null;
  if (r6) {
    const r74 = state == null ? {} : state;
    const { rating, reason } = r74;
    if (rating === FeedbackRating.GOOD || reason != null) {
      r105 = <Text style={[styles.centerText, styles.thanks]} variant="heading-md/semibold" color="text-brand">
        {intl.string(t.kZbFIO)}
      </Text>;
    } else {
      const props2 = {
        ratingsBodyLabel: intl.string(t.Yzl7Or),
        reasonsHeaderLabel: intl.string(t.g1q5fr),
        reasons: null,
        trackOpen: null,
        onFeedbackChanged: null
      };
      let reasons = feedbackSettings?.reasons;
      if (reasons == null) {
        reasons = [];
      }
      props2.reasons = reasons;
      props2.trackOpen = feedbackSettings != null ? feedbackSettings.onFeedbackShown : () => {};
      props2.onFeedbackChanged = callback2;
      r105 = <FeedbackForm {...props2} />;
    }
    r24 = r105;
  }
  const startHeight = 316 + (r6 ? state2 ? 64 : 148 : 0) + useSafeAreaInsets_native().bottom;
  let r131 = !r6;
  if (r6) {
    const r132 = state == null ? {} : state;
    const { rating: rating2, reason: reason2 } = r132;
    r131 = rating2 === FeedbackRating.GOOD || reason2 != null;
  }
  if (!r131) {
    r131 = state?.rating == null;
  }
  const contentHeight = r131 ? startHeight : void 0;
  const onLayout = state4 ? callback3 : void 0;
  const r192 = [<View style={styles.header}>
    <GuildPill guild={guild} />
    <Text style={styles.headerTitle} variant="heading-lg/semibold" color="mobile-text-heading-primary">
      {intl.string(t.o8Bypv)}
    </Text>
    <Text style={styles.centerText} variant="text-md/medium" color="text-default">
      {intl.format(t.enfuur, {
        helpUrl: HelpdeskUtils.getArticleURL(HelpdeskArticles.HIGHLIGHTS_NOTIFICATIONS)
      })}
    </Text>
  </View>, r24 != null && <ReanimatedRexport.View style={styles.feedback}>{r24}</ReanimatedRexport.View>, , ,];
  if (state == null) {
    state3 = {};
  }
  const r202 = state3.rating === FeedbackRating.GOOD;
  let r203 = !r202;
  if (!r202) {
    const props3 = {
      disabled: muted,
      label: intl.string(t.MVi7LQ),
      value: null,
      onValueChange: null
    };
    if (!muted) {
      muted = notifyHighlights === HighlightSettings.DISABLED;
    }
    props3.value = muted;
    props3.onValueChange = (a0) => {
      NotificationSettingsModalActionCreators.updateGuildNotificationSettings(guildId, {
        notify_highlights: a0 ? HighlightSettings.DISABLED : HighlightSettings.ENABLED
      }, NotificationLabel.highlights(!a0));
    };
    r203 = <Card style={styles.settings} shadow="low" border="subtle">
      <FormSwitchRow {...props3} />
    </Card>;
  }
  r192[2] = r203;
  r192[3] = <Text style={styles.centerText} variant="text-sm/medium" color="text-default">
    {intl.format(t.F9rfLX, {
      notifSettingsHook: () => {
        ActionSheetActionCreators.hideActionSheet();
        NotificationSettingsModalActionCreators.open(guildId);
      }
    })}
  </Text>;
  return <BottomSheet scrollable ref={ref} contentHeight={contentHeight} startHeight={startHeight}>
    <BottomSheetScrollView contentContainerStyle={styles.contentContainer} onLayout={onLayout}>
      <View>{r192}</View>
    </BottomSheetScrollView>
  </BottomSheet>;
};