// Metro module 15427 (f15428).
import { ScrollView } from "react-native";
import { ONBOARDING_HOME_RESOURCES_SHEET_KEY } from "./OnboardingHomeConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useResourceChannels from "../useResourceChannels";
import { selectHomeResourceChannel } from "../GuildOnboardingHomeActionCreators";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
const useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    paddingBottom: 8,
    marginBottom: 16
  },
  channelItem: {
    display: "flex",
    justifyContent: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderRadius: Module712.radii.round,
    marginLeft: 8,
    paddingVertical: 8,
    paddingHorizontal: 12
  }
});
export default function ResourcesRow(props) {
  const guildId = props.guildId;
  const styles = useStyles();
  const resourceChannels = useResourceChannels(guildId);
  const r3 = resourceChannels.length > 2;
  return <ScrollView horizontal style={styles.container}>
    {resourceChannels.slice(0, 2).map((item) => {
      return <PressableOpacity key={item.channelId} style={styles.channelItem} onPress={() => {
        selectHomeResourceChannel(guildId, item.channelId);
      }}>
        <Text variant="text-md/medium" color="text-default">{item.title}</Text>
      </PressableOpacity>;
    })}
    {r3 ? <PressableOpacity style={styles.channelItem} onPress={() => {
      ActionSheetActionCreators.openLazy(import("./OnboardingHomeResourcesSheet"), ONBOARDING_HOME_RESOURCES_SHEET_KEY, {
        guildId
      });
    }}>
      <Text variant="text-md/medium" color="text-default">
        {intl.format(t.F6iMs4, {
          count: resourceChannels.length - 2
        })}
      </Text>
    </PressableOpacity> : null}
  </ScrollView>;
};