import { FileType } from "@openchat/types"
import { useAccountId, useMemberBy } from "@openchat/ui"
import React from "react"
import { Image, Pressable, View } from "react-native"
import { useStyles } from "./community-search-item.style"
import { StyledText } from "../../../../ui-components/styled-text/styled-text"
import { Button } from "../../../../ui-components/button/button.component"
import { AppConfig } from "../../../../app/app.config"
import { AppAssets } from "../../../../app/app.assets"

export const CommunitySearchItem = ({
  community,
  numOfLines,
  size = 0,
  onJoin,
  onPress,
}: {
  community: { id: string; name: string; photo: FileType | null; about: string }
  numOfLines?: number
  size?: number
  onJoin: () => void
  onPress: () => void
}) => {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const styles = useStyles({ size })
  const accountId = useAccountId()
  const isMember = useMemberBy({
    communityId: community.id,
    identityId: accountId,
  })

  // -----------------------------------------------------------------------------

  return (
    <Pressable style={[styles.cardWrapper]} onPress={onPress}>
      {/* <View style={styles.cardBg} /> */}
      {community.photo ? (
        <Image
          source={{
            uri: community.photo.data.startsWith("data")
              ? community.photo.data
              : AppConfig.hostUrl + "/uploads/" + community.photo.data, /// TODO SHORUKH OR BOB
          }}
          style={styles.cardBg}
        />
      ) : (
        <Image
          source={AppAssets.images.communityPhotoSearchBG.uri}
          style={styles.cardBg}
        />
      )}

      {/* --------------------------------------------------------------------------- */}
      {/* PHOTO */}
      {/* --------------------------------------------------------------------------- */}

      <View style={styles.photoWrapper}>
        {community.photo ? (
          <View style={styles.photoCardWRapper}>
            <Image
              style={styles.photoCard}
              resizeMode="center"
              source={{
                uri: community.photo.data.startsWith("data")
                  ? community.photo.data
                  : AppConfig.hostUrl + "/uploads/" + community.photo.data, /// TODO SHORUKH OR BOB
              }}
            />
          </View>
        ) : (
          <View style={styles.cardGenerateContainer}>
            <View style={styles.cardGenerateWrapper} />
          </View>
        )}
      </View>

      {/* --------------------------------------------------------------------------- */}
      {/* NAME & DESCRIPTION */}
      {/* --------------------------------------------------------------------------- */}

      <View style={styles.nameAndDescWrap}>
        <View style={styles.textWrapper}>
          <StyledText style={styles.textName}>{community.name}</StyledText>
          {community.about && (
            <StyledText
              numberOfLines={numOfLines ? numOfLines : 3}
              ellipsizeMode="tail"
              style={styles.about}
            >
              {community.about}
            </StyledText>
          )}
        </View>

        {/* --------------------------------------------------------------------------- */}
        {/* FOOTER */}
        {/* --------------------------------------------------------------------------- */}

        <View style={styles.members}>
          <StyledText style={styles.memberQuantity}>
            150,450 <StyledText style={styles.memberText}>members</StyledText>
          </StyledText>
          <View style={styles.onlineMemberWrap}>
            {/* --------------------------------------------------------------------------- */}
            {/* BUTTON */}
            {/* --------------------------------------------------------------------------- */}

            <Button
              containerStyle={isMember ? styles.cardBtn : { zIndex: 100 }}
              styleText={isMember ? styles.cardBtnText : {}}
              type={isMember ? "simple" : "primary"}
              onPress={onJoin}
            >
              {isMember ? "Joined" : "Join"}
            </Button>
          </View>
        </View>
      </View>
    </Pressable>
  )
}
import { Platform, StyleSheet, useWindowDimensions } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { AppColors } from "../../../../app/app.colors"
import { AppConfig } from "../../../../app/app.config"

export function useStyles({ size }: { size: number }) {
  const { height, width } = useWindowDimensions()
  const insets = useSafeAreaInsets()

  const paddingHorizontalTitle =
    Platform.select({
      ios: height <= 667 ? 22 : height < 900 ? 28 : 50,
      android: height <= 667 ? 22 : height < 900 ? 28 : 50,
    }) || 0

  const marginTopLandscape =
    Platform.select({
      ios: height < width ? 130 : 100,
      android: height < width ? 130 : 100,
    }) || 0

  const marginTop =
    Platform.select({
      ios: height <= 667 ? marginTopLandscape : height < 900 ? 110 : 120,
      android: height <= 667 ? marginTopLandscape : height < 900 ? 110 : 120,
    }) || 0

  return StyleSheet.create({
    wrapper: {
      flex: 1,
      backgroundColor: AppColors.light,
    },

    title: {
      width: AppConfig.isTablet ? "60%" : "100%",
      alignSelf: "center",
      marginTop: AppConfig.isTablet ? 170 : marginTop,
      marginBottom: 30,
      paddingHorizontal: paddingHorizontalTitle,
      textAlign: "center",
      fontSize: 42,
      fontWeight: "700",
      fontStyle: "normal",
      textTransform: "capitalize",
    },

    container: {
      flex: 1,
      paddingLeft: AppConfig.isTablet ? 25 : insets.left + 20,
      paddingRight: AppConfig.isTablet ? 25 : insets.right + 20,
      alignItems: "stretch",
    },

    header: {
      flex: AppConfig.isTablet ? 0 : 1,
      marginTop: 30,
      marginBottom: 10,
      paddingHorizontal: AppConfig.isTablet ? 32 : 0,
    },

    description: {
      textAlign: "center",
      fontSize: 18,
      fontWeight: "400",
      lineHeight: 22.63,
      color: AppColors.textPrimaryDark,
    },

    inputWrapper: {
      width: "100%",
      marginBottom: 10,
      gap: -5,
    },

    input: {
      fontSize: 15,
      color: AppColors.headerText,
    },

    noResultContainer: {
      justifyContent: "flex-start",
      alignItems: "center",
      marginTop: 20,
    },

    noResultText: {
      fontSize: 16,
      color: "gray",
    },

    list: {
      flex: 1,
      width: "100%",
      shadowOffset: {
        width: 0,
        height: 4,
      },
      shadowRadius: 4,
      shadowColor: "#000",
      shadowOpacity: 0.05,
      marginBottom: 35,
    },

    scrollList: {
      alignItems: AppConfig.isTablet ? "center" : "stretch",
    },

    /*------------------- Community Search Item ----------------------*/

    cardWrapper: {
      position: "relative",
      width:
        AppConfig.isTablet && size ? size : AppConfig.isTablet ? 350 : "100%",
      height: 370,
      backgroundColor: AppColors.backgroundLight,
      borderRadius: 6,
      shadowColor: "#000000",
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 2,
      marginTop: 20,
      marginLeft: AppConfig.isTablet ? 10 : 0,
      marginRight: AppConfig.isTablet ? 10 : 0,
      zIndex: -1,
    },

    cardBg: {
      width: "100%",
      height: 130,
      backgroundColor: AppColors.backgroundLight,
      position: "absolute",
      borderTopLeftRadius: 6,
      borderTopRightRadius: 6,
      borderWidth: 1,
    },

    photoWrapper: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-end",
      paddingHorizontal: 20,
    },

    photoCardWRapper: {
      width: 64.924,
      height: 64,
      justifyContent: "center",
      alignItems: "center",
      marginBottom: 14,
      borderRadius: 8,
      borderColor: AppColors.light,
      borderWidth: 3,
    },

    photoCard: {
      width: "100%",
      height: "100%",
      borderRadius: 4,
    },

    cardGenerateContainer: {
      width: 64.924,
      height: 64,
      borderColor: "white",
      borderWidth: 3,
      justifyContent: "center",
      alignItems: "center",
      borderRadius: 8,
      marginBottom: 14,
    },

    cardGenerateWrapper: {
      width: "100%",
      height: "100%",
      backgroundColor: AppColors.backgroundLight,
      justifyContent: "center",
      alignItems: "center",
      borderRadius: 5,
    },

    cardGenerate: {
      width: "100%",
      height: "100%",
      justifyContent: "center",
      alignItems: "center",
      borderRadius: 4,
    },

    cardName: {
      color: AppColors.textSecondaryGray,
      fontSize: 28,
      fontStyle: "normal",
      fontWeight: "600",
      textTransform: "uppercase",
    },

    img: {
      width: "100%",
      height: "100%",
    },

    cardBtnWrap: {
      zIndex: 100,
      marginTop: 20,
    },

    cardBtn: {
      borderRadius: 5,
      borderWidth: 2,
      borderColor: AppColors.backgroundLight,
      backgroundColor: AppColors.light,
    },

    cardBtnPressed: {
      backgroundColor: AppColors.backgroundDark,
      // width: 102,
      // height: 39,
    },

    cardBtnText: {
      // color: AppColors.textPrimaryDark,
      fontSize: 16,
      fontWeight: "600",
      fontStyle: "normal",
    },

    nameAndDescWrap: {
      flex: 1,
      justifyContent: "space-between",
      marginBottom: 20,
    },

    textWrapper: {
      paddingLeft: 20,
      paddingRight: 10,
    },

    textName: {
      color: AppColors.headerText,
      fontSize: 24,
      fontWeight: "600",
      marginLeft: 3,
      marginTop: 6,
    },

    about: {
      color: AppColors.textSecondary,
      fontSize: 18,
      fontStyle: "normal",
      fontWeight: "400",
      paddingTop: 10,
      marginLeft: 3.3,
      lineHeight: 22.63,
      paddingRight: 10,
    },

    members: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      paddingHorizontal: 20,
    },

    memberQuantity: {
      marginLeft: 3,
      fontSize: 14,
      fontWeight: "400",
      color: "#000",
    },

    memberText: {
      color: AppColors.textSecondaryGray,
      fontSize: 14,
      fontWeight: "400",
      fontStyle: "normal",
    },

    onlineMemberWrap: {
      flexDirection: "row",
    },

    onlineMembers: {
      color: "#000",
      fontSize: 14,
      fontWeight: "400",
      marginRight: 5,
    },
    onlineText: {
      color: AppColors.success,
      fontSize: 14,
      fontWeight: "400",
      fontStyle: "normal",
    },

    footerBtnWrap: {
      flexDirection: "row",
      justifyContent: "flex-end",
      alignItems: "center",
      paddingHorizontal: 20,
    },

    cardBtnReject: {
      width: 104,
      height: 39,
    },

    footerBtn: {
      width: 94,
      height: 39,
    },
  })
}
I have issue here   <Image
          source={{
            uri: community.photo.data.startsWith("data")
              ? community.photo.data
              : AppConfig.hostUrl + "/uploads/" + community.photo.data, /// TODO SHORUKH OR BOB
          }}
          style={styles.cardBg}
        /> - showing 97% of image. I want it shows 100% of image. How make it shows all image part ?