// Metro module 15722 (f15723).
import { useRef, useState, useEffect } from "react";
import { ScrollView, View } from "react-native";
import ChannelStore from "../../../stores/ChannelStore";
import MessageStore from "../../../stores/MessageStore";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { useStateFromStores } from "../../../_bundle/Module589";
import RestrictedMessagePreviewHeader from "./RestrictedMessagePreviewHeader";
import RestrictedMessagePreviewList from "./RestrictedMessagePreviewList";
import ChatInputGuardMessageRequest from "../../chat_input/native/guard/ChatInputGuardMessageRequest";
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  scroll: {
    flex: 1
  },
  hidden: {
    opacity: 0
  },
  scrollContent: {
    paddingHorizontal: Module712.space.PX_16,
    paddingTop: Module712.space.PX_8,
    paddingBottom: Module712.space.PX_8
  },
  footer: {
    paddingHorizontal: Module712.space.PX_12
  }
});
export default function RestrictedMessageRequestPreview(props) {
  let c22390_6;
  const channelId = props.channelId;
  c22390_6 = void 0;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const ref = useRef(null);
  const ref2 = useRef(false);
  const [state, setState] = useState(false);
  const stateFromStores = useStateFromStores([MessageStore], () => MessageStore.getMessages(channelId).length > 0, [channelId]);
  const stateFromStores3 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId), [channelId]);
  const r46 = stateFromStores3 == null;
  let r47 = void 0;
  if (!r46) {
    const recipients = stateFromStores3.recipients;
    r47 = recipients == null ? void 0 : recipients[0];
  }
  c22390_6 = r47;
  const stateFromStores2 = useStateFromStores([UserStore], () => c22390_6 != null ? UserStore.getUser(c22390_6) : void 0, [r47]);
  useEffect(() => {
    if (state) {
      return void 0;
    }
    let c28141_0 = setTimeout(() => setState(true), 1000);
    return () => clearTimeout(c28141_0);
  }, [state]);
  return stateFromStores3 == null ? null : stateFromStores2 == null ? null : <View style={styles.container}>
    <ScrollView ref={ref} style={[styles.scroll, state ? null : styles.hidden]} contentContainerStyle={styles.scrollContent} onScrollBeginDrag={() => {
      ref2.current = true;
    }} onContentSizeChange={() => {
      if (!ref2.current) {
        const current = ref.current;
        if (current != null) {
          current.scrollToEnd({
            animated: false
          });
        }
      }
      if (state ? !state : stateFromStores) {
        requestAnimationFrame(() => setState(true));
      }
    }}>
      <RestrictedMessagePreviewHeader channel={stateFromStores3} user={stateFromStores2} />
      <RestrictedMessagePreviewList channelId={channelId} />
    </ScrollView>
    <View style={[styles.footer, {
      paddingBottom: Module712.space.PX_8 + bottom
    }]}>
      <ChatInputGuardMessageRequest channel={stateFromStores3} />
    </View>
  </View>;
};