// Metro module 9633 (f9634).
import { FlatList, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { isStickerPackAnimated } from "../StickersUtils";
import { intl, t } from "../../../intl/index.native";
import { Text } from "../../../design/components/Text/native/Text";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
const useStyles = createStyles({
  informationContainer: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    width: "90%",
    marginHorizontal: "5%",
    padding: 16,
    borderRadius: Module712.radii.xs,
    shadowColor: Module712.colors.BLACK,
    shadowOffset: {
      width: 2,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 5
  },
  headerContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 8
  },
  informationHeader: {
    lineHeight: 20
  },
  informationContentContainer: {
    flexDirection: "row"
  },
  informationContent: {
    lineHeight: 20
  },
  informationContentDescription: {
    flex: 1,
    marginLeft: 5
  }
});
export default function StickerPackInformationPopout(props) {
  const { stickerPack, onClose, style } = props;
  const styles = useStyles();
  const data = [];
  if (isStickerPackAnimated(stickerPack)) {
    data.push({
      key: "animated",
      description: intl.string(t.W11rMa)
    });
  }
  return <View style={[styles.informationContainer, style]}>
    <View style={styles.headerContainer}>
      <Text style={styles.informationHeader} variant="text-md/semibold" color="mobile-text-heading-primary">
        {intl.format(t.XDm6yN, {
          stickerPackName: stickerPack.name
        })}
      </Text>
      <PressableOpacity onPress={onClose} accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)}>
        <Text variant="text-md/bold" color="text-brand">
          {intl.string(t.cpT0Cq)}
        </Text>
      </PressableOpacity>
    </View>
    <FlatList data={data} renderItem={function renderItem(info) {
      return <View style={styles.informationContentContainer}>
        <Text style={styles.informationContent} variant="text-md/medium" color="text-default">•</Text>
        <Text style={[styles.informationContent, styles.informationContentDescription]} variant="text-md/medium" color="text-default">{info.item.description}</Text>
      </View>;
    }} />
  </View>;
};
export function doesStickerPackHavePopoutInformation(a0) {
  const r2 = [];
  if (isStickerPackAnimated(a0)) {
    r2.push({
      key: "animated",
      description: intl.string(t.W11rMa)
    });
  }
  return r2.length > 0;
}