ProductListingScreen.js

import React, {useState, useRef, useEffect, useContext} from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableWithoutFeedback,
  Linking,
  Modal,
  ActivityIndicator,
  TextInput,
  Pressable,
  ActionSheetIOS,
  Switch,
  TouchableOpacity,
  Alert,
  Platform,
} from 'react-native';
import {SwiperFlatList} from 'react-native-swiper-flatlist';
import FastImage from 'react-native-fast-image';
import ImageViewer from 'react-native-image-zoom-viewer';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import ReactModal from 'react-native-modal';
import RBSheet from 'react-native-raw-bottom-sheet';
import LottieView from 'lottie-react-native';

import SheetComponentButton from '../components/SheetComponentButton';
import UploadForm from './UploadScreen/UploadForm';
import IconButton from '../components/IconButton';
import PostApi from '../api/api';
import ProductTitle from '../components/ProductTitle';
import Screen from '../components/Screen';
import ShortProfile from '../components/ShortProfileComponent';
import ReportThisAd from '../components/ReportThisAd';
import DotIndicator from '../components/ProductListingComponents/DotIndicator';
import ProductDescription from '../components/ProductListingComponents/ProductDescription';
import {height, width} from '../config/dimensions';
import colors from '../config/colors';
import MiniMap from '../components/MapComponent/MiniMap';
import AppButton from '../components/AppButton';
import SavedIconButton from '../components/SavedIconButton';
import constants from '../utils/constants';
import AppIndicator from '../components/AppIndicator';
import TokenContext from '../context/TokenContext';
import PriceComponent from '../components/ProductListingComponents/PriceComponent';
import {
  chatSvg,
  phoneSvg,
  fuelSvg,
  speedometer,
  gearType,
  editSvg,
  deleteSvg,
  notAllowed,
  hidden,
  tickMark,
} from '../utils/svgfiles';
import ReportCheckBox from '../components/ReportCheckBox';
import DetailsComponent from '../components/ProductListingComponents/DetailsComponent';
import CarBasicsComponent from '../components/ProductListingComponents/CarBasicsComponent';

function ProductListingScreen({route, navigation}) {
  const {token, setToken} = useContext(TokenContext);
  // TODO:- Fix Rendering Issues in this Screen...

  const data = route.params;
  console.log('this is data', data);
  const mountedRef = useRef(true);
  const editDeleteRef = useRef();
  const hideStockRef = useRef();
  const [postDetails, setPostDetails] = useState();
  const [dataFetched, setDataFetched] = useState(false);
  const [renderUI, setRenderUI] = useState(false);
  const [isSavedArray, setIsSavedArray] = useState([]);
  const [imageModalVisible, setImageModelVisible] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [showEdit, setShowEdit] = useState(false);
  const [imageModalUriIndex, setImageModalUriIndex] = useState(0);
  const [isFetched, setIsFetched] = useState(false);
  const scrollx = useRef(new Animated.Value(0)).current;
  const [profileInfo, setProfileInfo] = useState([]);
  const [isImageLoading, setIsImageLoading] = useState(true);
  const [reportComment, setReportComment] = useState('');
  const [reportLabels, setReportLabels] = useState([]);
  const [isAvailable, setIsAvailable] = useState(true);
  const [stateChange, setStateChanged] = useState(false);

  const [checkboxValue, setCheckboxValue] = useState([
    {label: 'Offensive Content', checked: false},
    {label: 'Fraud', checked: false},
    {label: 'Duplicate Post', checked: false},
    {label: 'Other', checked: false},
  ]);

  const sheetRef = useRef();
  const sucessRef = useRef();

  const toggleSwitch = () => {
    setStateChanged(false);
    setIsAvailable(previousState => !previousState);
  };

  const openActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: [
          'Cancel',
          postDetails.hidden ? 'Unhide Product' : 'Hide Product',
          postDetails.out_of_stock ? 'Available' : 'Out of Stock',
        ],
        destructiveButtonIndex: postDetails.out_of_stock ? null : 2,
        cancelButtonIndex: 0,
      },
      buttonIndex => {
        if (buttonIndex === 1) {
          hidePost();
        }
        if (buttonIndex === 2) {
          outOfStock();
        }
      },
    );
  };

  const getSavedPostId = async () => {
    try {
      const response = await PostApi.ServerApi.get('/user/saved_post_ids', {
        headers: {
          'auth-token': token,
        },
      });
      setIsSavedArray(response.data);
      getProfileDetails();
    } catch (err) {
      console.log(err);
    }
  };

  const savePost = async id => {
    try {
      const data = {
        postid: id,
      };
      const response = await PostApi.ServerApi.put('/user/save_post', data, {
        headers: {
          'auth-token': token,
        },
      });

      if (response.data.message === 'Post Saved') {
        setIsSavedArray(isSaved => [...isSaved, id]);
      } else {
        setIsSavedArray(isSavedArray.filter(item => item !== id));
      }
    } catch (err) {
      console.log('saved post fucked', err);
    }
  };

  var imageUriData = []; // for swiper flatlist
  if (dataFetched === true && isFetched === true) {
    for (var i = 0; i < postDetails.post_images.length; i++) {
      imageUriData.push({
        id: i,
        source: postDetails.post_images[i],
      });
    }
  }

  var images = []; //for ImageViewer
  if (dataFetched === true && isFetched === true) {
    for (var i = 0; i < postDetails.post_images.length; i++) {
      images.push({
        url: postDetails.post_images[i],
        props: {
          id: i,
        },
      });
    }
  }

  const mapNavigation = () => {
    const address = data.address;
    const url = Platform.select({
      ios: 'http://maps.apple.com/?daddr=' + address,
      android: 'https://www.google.com/maps/search/?api=1&query=' + address,
    });

    Linking.canOpenURL(url).then(supported => {
      if (supported) {
        return Linking.openURL(url);
      } else {
        const browser_url =
          'https://www.google.com/maps/search/?api=1&query=' + address;
        return Linking.openURL(browser_url);
      }
    });
  };

  //TODO:-State Update is not working
  const getProfileDetails = async () => {
    try {
      const response = await PostApi.ServerApi.get('/user/short_profile', {
        headers: {
          'auth-token': token,
        },
        params: {
          id: data.id,
        },
      });
      setProfileInfo(response.data);
      setIsFetched(true);
    } catch (error) {
      console.log('This is Profile Details', error);
    }
  };

  const deletePost = async id => {
    try {
      const data = {
        postid: id,
      };
      await PostApi.ServerApi.delete('/post/delete_my_post', {
        headers: {
          'auth-token': token,
        },
        data,
      });
      setDeleting(true);
      setTimeout(function () {
        setDeleting(false);
        navigation.goBack();
      }, 600);
    } catch (err) {
      console.log('delete post fucked', err);
    }
  };

  const hidePost = async () => {
    setRenderUI(false);
    try {
      const hideData = {
        postid: data.postid,
      };

      const response = await PostApi.ServerApi.put(
        '/user/hide_post',
        hideData,
        {
          headers: {
            'auth-token': token,
          },
        },
      );

      if (response.data.message === 'Post is Hidden') {
        setIsAvailable(false);
        setStateChanged(true);
        setRenderUI(true);
      } else {
        setIsAvailable(true);
        setStateChanged(true);
        setRenderUI(true);
      }
    } catch (err) {
      console.log(err);
    }
  };

  const outOfStock = async () => {
    setRenderUI(false);
    try {
      const stockData = {
        postid: data.postid,
      };
      const response = await PostApi.ServerApi.put(
        '/post/out_of_stock',
        stockData,
        {
          headers: {
            'auth-token': token,
          },
        },
      );
      if (response.data.message === 'Post is now out of stock') {
        setIsAvailable(false);
        setStateChanged(true);
        setRenderUI(true);
      } else {
        setIsAvailable(true);
        setStateChanged(true);
        setRenderUI(true);
      }
    } catch (err) {
      console.log(err);
    }
  };

  const showDeleteAlert = () => {
    Alert.alert(
      'Delete Post',
      'Are you sure do you want to delete this Post?',
      [
        {
          text: 'Delete',
          onPress: () => {
            deletePost(data.postid);
          },
          style: 'destructive',
        },
        {text: 'Cancel', style: 'cancel'},
      ],
    );
  };

  const showEditDeleteActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ['Cancel', 'Edit Product', 'Delete Product'],
        destructiveButtonIndex: 2,
        cancelButtonIndex: 0,
      },
      buttonIndex => {
        if (buttonIndex === 1) {
          setShowEdit(true);
        }
        if (buttonIndex === 2) {
          showDeleteAlert();
        }
      },
    );
  };

  const incrementViewsCount = async () => {
    try {
      const viewIcrementData = {
        postid: data.postid,
      };

      const response = await PostApi.ServerApi.put(
        '/views/increment_view',
        viewIcrementData,
        {
          headers: {
            'auth-token': token,
          },
        },
      );
      console.info(response.data);
    } catch (err) {
      console.log(err);
    }
  };

  const getPostDetails = async () => {
    try {
      const response = await PostApi.ServerApi.get('/post/one_post', {
        headers: {
          'auth-token': token,
        },
        params: {
          postid: data.postid,
        },
      });
      setPostDetails(Object.assign({}, ...response.data));
      setDataFetched(true);
      console.log(postDetails);
      getProfileDetails();
    } catch (err) {
      console.log(err);
    }
  };

  async function reportAd() {
    try {
      const reportData = {
        report_type: 'Post',
        postid: data.postid,
        report_title: reportLabels.join(' , '),
        report_description:
          reportComment.trim() === '' ? undefined : reportComment.trim(),
      };
      const response = await PostApi.ServerApi.put(
        '/report/report_post',
        reportData,
        {
          headers: {
            'auth-token': token,
          },
        },
      );
      console.log(response.data);
      if (
        response.data.message === 'Report has been made.' ||
        response.data.message === 'You have already reported this post.'
      ) {
        sheetRef.current.close();
        setTimeout(() => {
          sucessRef.current.open();
          setReportLabels([]);
          setReportComment();
        }, 1000);
      }
    } catch (err) {
      let message =
        typeof err.response !== 'undefined'
          ? err.response.data.message
          : err.message;
      console.warn('error', message);
    }
  }

  async function checkUserDetails() {
    try {
      const profileId = profileInfo.id;
      const response = await PostApi.ServerApi.get(
        '/notify/check_number_hidden',
        {
          headers: {
            'auth-token': token,
          },
          params: {
            to_id: profileId,
          },
        },
      );
      console.log(response.data);
      if (response.data.message === 'User number is Hidden') {
        Alert.alert(
          'Notify',
          `${profileInfo.full_name} has hidden his mobile number. Are you sure do you want to share your number?`,
          [
            {
              text: 'Share My Number',
              onPress: () => {
                sendNotification(profileId);
              },
            },
            {text: 'Cancel', style: 'cancel'},
          ],
        );
      } else {
        Linking.openURL(`tel:${response.data.mobile_no}`);
      }
    } catch (err) {
      return console.log(err);
    }
  }

  async function sendNotification(id) {
    try {
      const notifyData = {
        to_id: id,
        postid: data.postid,
        req_type: 'Request_Number',
      };
      const response = await PostApi.ServerApi.post(
        '/notify/new_notification',
        notifyData,
        {
          headers: {
            'auth-token': token,
          },
        },
      );
      console.log(response.data);
    } catch (err) {
      console.log(err);
    }
  }

  function openEditSheet() {
    return editDeleteRef.current.open();
  }

  function closeEditSheet() {
    return editDeleteRef.current.close();
  }

  function openHideStockSheet() {
    return hideStockRef.current.open();
  }

  function closeHideStockSheet() {
    return hideStockRef.current.close();
  }

  useEffect(() => {
    getPostDetails();
    getSavedPostId();
    return () => {
      mountedRef.current = false;
    };
  }, [renderUI]);

  useEffect(() => {
    incrementViewsCount(data.postid);
  }, []);

  return (
    <>
      {deleting ? (
        <View style={styles.deleteProgress}>
          <ActivityIndicator size="large" color={colors.darkblue} />
        </View>
      ) : null}

      {showEdit ? (
        <ReactModal
          animationIn="slideInUp"
          animationOut="slideOutDown"
          animationInTiming={450}
          animationOutTiming={250}
          style={styles.modal}
          isVisible={showEdit}>
          <UploadForm
            isEdit={true}
            postid={postDetails.postid}
            productTitle={postDetails.title}
            desc={postDetails.description}
            postImages={postDetails.post_images}
            setShowEdit={setShowEdit}
            address={postDetails.address}
            ram={postDetails.ram}
            hdd={postDetails.hdd}
            lat={postDetails.location.lat}
            lon={postDetails.location.lon}
            address={postDetails.address}
            rent_price={postDetails.price}
            rent_type={postDetails.rent_type}
            setRenderUI={setRenderUI}
            selling_price={postDetails.selling_price}
            route={{
              params: {
                category: postDetails.category,
                title:
                  postDetails.sub_category === undefined
                    ? postDetails.category
                    : postDetails.sub_category,
              },
            }}
            meals_included={
              postDetails.meals_included ? postDetails.meals_included : ''
            }
            gear_type={postDetails.gear_type ? postDetails.gear_type : ''}
            fuel_type={postDetails.fuel_type ? postDetails.fuel_type : ''}
            mileage={postDetails.mileage ? postDetails.mileage : ''}
            km_driven={postDetails.km_driven ? postDetails.mileage : ''}
            salary_from={postDetails.salary_from ? postDetails.salary_from : ''}
            salary_to={postDetails.salary_to ? postDetails.salary_to : ''}
            position_type={
              postDetails.position_type ? postDetails.position_type : ''
            }
            salary_period={
              postDetails.salary_period ? postDetails.salary_period : ''
            }
            bath_rooms={postDetails.bath_rooms ? postDetails.bath_rooms : ''}
            bed_rooms={postDetails.bed_rooms ? postDetails.bed_rooms : ''}
            furnished={postDetails.furnished ? postDetails.furnished : ''}
            bachelors={postDetails.bachelors ? postDetails.bachelors : ''}
            plot_area={postDetails.plot_area ? postDetails.plot_area : ''}
            length={postDetails.length ? postDetails.length : ''}
            breath={postDetails.breath ? postDetails.breath : ''}
            facing={postDetails.facing ? postDetails.facing : ''}
          />
        </ReactModal>
      ) : null}

      {dataFetched ? (
        <Screen style={{backgroundColor: colors.white}}>
          <View style={styles.headerButtons}>
            <IconButton
              onPress={() => {
                navigation.goBack();
              }}
              icon="arrow-back"
            />
            {data.isMine ? (
              <TouchableOpacity
                onPress={() => {
                  if (Platform.OS === 'ios') {
                    showEditDeleteActionSheet();
                  } else {
                    openEditSheet();
                  }
                }}
                activeOpacity={0.9}
                style={styles.moreButton}>
                <MaterialIcon
                  name="more-vert"
                  color={colors.darkblue}
                  size={parseInt(width * 0.06)}
                />
              </TouchableOpacity>
            ) : (
              <SavedIconButton
                saved={isSavedArray.includes(data.postid)}
                onPress={() => {
                  savePost(data.postid);
                }}
              />
            )}
          </View>
          {isFetched ? (
            <ScrollView>
              <View style={{marginBottom: height * 0.08}}>
                <View
                  style={{
                    height: height * 0.36,
                    width: '100%',
                    marginBottom: width * 0.02,
                  }}>
                  <SwiperFlatList
                    index={0}
                    showPagination={true}
                    pagingEnabled={true}
                    PaginationComponent={() => (
                      <DotIndicator data={imageUriData} scrollx={scrollx} />
                    )}
                    onScroll={Animated.event(
                      [{nativeEvent: {contentOffset: {x: scrollx}}}],
                      {
                        useNativeDriver: false,
                      },
                    )}
                    data={imageUriData}
                    keyExtractor={item => item.id}
                    renderItem={({item}) => (
                      <TouchableWithoutFeedback
                        onPress={() => (
                          setImageModelVisible(true),
                          setImageModalUriIndex(item.id)
                        )}>
                        <View
                          style={{
                            height: '100%',
                            width: width,
                            backgroundColor: colors.white,
                            justifyContent: 'center',
                          }}>
                          {isImageLoading ? (
                            <ActivityIndicator
                              size={40}
                              color={colors.darkblue}
                              style={{
                                position: 'absolute',
                                top: '50%',
                                left: '44%',
                              }}
                            />
                          ) : null}

                          <FastImage
                            resizeMode={FastImage.resizeMode.contain}
                            source={{uri: item.source}}
                            style={{
                              height: '100%',
                              width: '100%',
                              priority: FastImage.priority.high,
                            }}
                            onLoadEnd={() => {
                              setIsImageLoading(false);
                            }}
                          />
                        </View>
                      </TouchableWithoutFeedback>
                    )}
                  />
                </View>
                <ProductTitle title={postDetails.title} />
                {isVerified ? (
                  <View
                    style={{
                      width: '100%',
                      flexDirection: 'row',
                      justifyContent: 'flex-start',
                    }}>
                    <Verified />
                    <Featured />
                  </View>
                ) : null}
                <View>
                  <View
                    style={{
                      borderTopWidth: 1,
                      borderBottomWidth: 1,
                      borderColor: colors.blueBorder,
                    }}>
                    <PriceComponent
                      price={
                        Platform.OS === 'ios'
                          ? postDetails.price.toLocaleString()
                          : postDetails.price
                              .toString()
                              .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                      }
                      showRentPrice={postDetails.price === 0 ? false : true}
                      rent_type={postDetails.rent_type}
                      show={postDetails.selling_price != 0 ? true : false}
                      sellingPrice={
                        Platform.OS === 'ios'
                          ? postDetails.selling_price.toLocaleString()
                          : postDetails.selling_price
                              .toString()
                              .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                      }
                    />
                  </View>
                  {postDetails.category === 'Cars' ? (
                    <View>
                      <View style={{padding: parseInt(height * 0.016)}}>
                        <Text style={styles.detailsTitle}>Car basics</Text>
                        <View
                          style={{
                            flexDirection: 'row',
                            justifyContent: 'space-around',
                          }}>
                          <CarBasicsComponent
                            xml={fuelSvg}
                            title={postDetails.fuel_type}
                          />
                          <CarBasicsComponent
                            xml={speedometer}
                            title={postDetails.km_driven}
                            showKm={true}
                          />
                          <CarBasicsComponent
                            xml={gearType}
                            title={postDetails.gear_type}
                          />
                          <CarBasicsComponent
                            xml={speedometer}
                            title={postDetails.mileage}
                          />
                        </View>
                      </View>
                      <View
                        style={{
                          borderTopWidth: 1,
                          borderColor: colors.blueBorder,
                        }}
                      />
                    </View>
                  ) : null}
                  {postDetails.sub_category === 'Laptops' ||
                  postDetails.sub_category === 'Desktops' ? (
                    <View>
                      <View style={{padding: parseInt(height * 0.016)}}>
                        <Text style={styles.detailsTitle}>Details</Text>
                        <DetailsComponent
                          subTitle="Ram"
                          title={postDetails.ram}
                        />
                        <DetailsComponent
                          subTitle="HDD"
                          title={postDetails.hdd}
                        />
                      </View>
                      <View
                        style={{
                          borderTopWidth: 1,
                          borderColor: colors.blueBorder,
                        }}
                      />
                    </View>
                  ) : null}
                  <ProductDescription
                    title="Description"
                    description={postDetails.description}
                  />
                  <ShortProfile
                    name={isFetched ? profileInfo.full_name : null}
                    image={isFetched ? profileInfo.profile_pic : null}
                    isMine={data.isMine}
                    onPress={() => navigation.push('UserDetail', profileInfo)}
                  />
                  <View
                    style={{
                      padding: parseInt(height * 0.016),
                    }}>
                    <Text style={styles.locationHeading}>Location</Text>
                    <Pressable onPress={mapNavigation}>
                      <Text
                        style={{
                          fontSize: parseInt(width * 0.036),
                          color: colors.greyText,
                        }}>
                        Tap to view location
                      </Text>
                    </Pressable>
                    <View
                      style={{
                        borderRadius: parseInt(width * 0.016),
                        overflow: 'hidden',
                        marginVertical: parseInt(height * 0.016),
                      }}>
                      <MiniMap
                        style={{
                          height: parseInt(height * 0.18),
                          width: '100%',
                        }}
                        lat={postDetails.location.lat}
                        lon={postDetails.location.lon}
                        onPress={mapNavigation}></MiniMap>
                      <View
                        style={{
                          height: parseInt(height * 0.05),
                          backgroundColor: colors.mediumGrey,
                        }}>
                        <ScrollView
                          horizontal
                          showsHorizontalScrollIndicator={false}
                          contentContainerStyle={{
                            justifyContent: 'center',
                            alignItems: 'center',
                            paddingHorizontal: width * 0.026,
                          }}>
                          <Text
                            numberOfLines={1}
                            style={{
                              fontSize: parseInt(width * 0.036),
                              fontWeight: '600',
                              color: colors.iconBlack,
                            }}>
                            {postDetails.address}
                          </Text>
                        </ScrollView>
                      </View>
                    </View>
                  </View>
                  {!data.isMine ? (
                    <View
                      style={{
                        borderTopWidth: 1,
                        borderBottomWidth: 1,
                        borderColor: colors.blueBorder,
                        padding: parseInt(width * 0.04),
                      }}>
                      {/* TODO:- Report Post Validation Needed */}
                      <ReportThisAd
                        title="Report this Ad"
                        onPress={() => sheetRef.current.open()}
                      />
                    </View>
                  ) : null}
                </View>
              </View>
            </ScrollView>
          ) : (
            <View
              style={{flex: 1, alignSelf: 'center', justifyContent: 'center'}}>
              <ActivityIndicator
                color={colors.darkblue}
                size="large"></ActivityIndicator>
            </View>
          )}
          <View>
            {data.isMine ? (
              <View style={styles.bottomContainer}>
                <View style={{flex: 1}}>
                  <View
                    style={{
                      flex: 1,
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      flexDirection: 'row',
                      padding: parseInt(height * 0.018),
                      backgroundColor: postDetails.out_of_stock
                        ? colors.errorMessage
                        : postDetails.hidden
                        ? colors.darkYellow
                        : colors.white,
                    }}>
                    {postDetails.out_of_stock ? (
                      <Text style={[styles.statusText, {color: colors.white}]}>
                        Out of stock
                      </Text>
                    ) : postDetails.hidden ? (
                      <Text style={styles.statusText}>Hidden</Text>
                    ) : (
                      <Text style={styles.statusText}>Available</Text>
                    )}
                    <Switch
                      style={{
                        transform: [
                          {scaleX: Platform.OS === 'ios' ? 0.7 : 1},
                          {scaleY: Platform.OS === 'ios' ? 0.7 : 1},
                        ],
                      }}
                      trackColor={{
                        false: '#767577',
                        true:
                          Platform.OS === 'ios'
                            ? colors.darkblue
                            : colors.switchBoby,
                      }}
                      thumbColor={
                        Platform.OS === 'android'
                          ? postDetails.hidden || postDetails.out_of_stock
                            ? colors.white
                            : colors.switchBud
                          : null
                      }
                      onTouchStart={() => {
                        if (Platform.OS === 'ios') {
                          openActionSheet();
                        } else {
                          openHideStockSheet();
                        }
                      }}
                      onValueChange={toggleSwitch}
                      value={
                        postDetails.out_of_stock === true ||
                        postDetails.hidden === true
                          ? false
                          : true
                      }
                    />
                  </View>
                </View>
              </View>
            ) : (
              <View style={styles.bottomContainer}>
                <AppButton
                  onPress={checkUserDetails}
                  width={parseInt(width * 0.066)}
                  height={parseInt(width * 0.066)}
                  xml={phoneSvg}
                  title="Call"
                  style={{
                    width: width * 0.48,
                    borderColor: colors.darkYellow,
                    borderWidth: 1.5,
                    backgroundColor: colors.transparent,
                  }}
                />
                <AppButton
                  width={parseInt(width * 0.066)}
                  height={parseInt(width * 0.066)}
                  xml={chatSvg}
                  title="Chat"
                  onPress={() => navigation.navigate('Chat')}
                  style={{width: width * 0.48}}
                />
              </View>
            )}
          </View>
          <Modal
            visible={imageModalVisible}
            transparent={true}
            onRequestClose={() => {
              setImageModelVisible(false);
            }}>
            <ImageViewer
              pageAnimateTime={200}
              onSwipeDown={() => {
                setImageModelVisible(false);
              }}
              enableSwipeDown={true}
              imageUrls={images}
              index={imageModalUriIndex}
            />
          </Modal>
          <RBSheet
            ref={sucessRef}
            closeOnDragDown
            customStyles={{
              container: styles.sheetContainer,
              draggableIcon: {
                backgroundColor: colors.draggableIcon,
                width: parseInt(width * 0.4),
              },
            }}
            height={height * 0.26}>
            <Screen style={{flex: 1}}>
              <View style={{justifyContent: 'center', alignItems: 'center'}}>
                <LottieView
                  style={{
                    width: parseInt(width * 0.12),
                    height: parseInt(width * 0.12),
                  }}
                  onAnimationFinish={() => {
                    setTimeout(() => {
                      sucessRef.current.close();
                    }, 2500);
                  }}
                  loop={false}
                  autoPlay
                  source={require('../assets/animation/done_green.json')}
                />
                <View
                  style={{
                    paddingHorizontal: parseInt(width * 0.06),
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text
                    style={{
                      fontSize: parseInt(width * 0.046),
                      fontWeight: '600',
                      color: colors.iconBlack,
                      marginTop: parseInt(height * 0.018),
                    }}>
                    Thanks for letting us know
                  </Text>
                  <Text
                    style={{
                      fontSize: parseInt(width * 0.04),
                      textAlign: 'center',
                      paddingVertical: parseInt(height * 0.024),
                    }}>
                    Your feedback is important in help us to keep the app safe.
                  </Text>
                </View>
              </View>
            </Screen>
          </RBSheet>
          <RBSheet
            ref={sheetRef}
            customStyles={{container: styles.sheetContainer}}
            closeOnPressBack={true}
            closeOnPressMask
            height={height * 0.58}>
            <Screen style={{flex: 1, justifyContent: 'space-between'}}>
              <>
                <View>
                  <View style={styles.reportTitle}>
                    <Text
                      style={{
                        fontWeight: '500',
                        fontSize: parseInt(width * 0.044),
                      }}>
                      Report
                    </Text>
                    <TouchableWithoutFeedback
                      onPress={() => sheetRef.current.close()}>
                      <MaterialIcon
                        name="close"
                        size={parseInt(width * 0.052)}
                      />
                    </TouchableWithoutFeedback>
                  </View>
                  <View
                    style={{
                      paddingHorizontal: parseInt(width * 0.026),
                    }}>
                    {checkboxValue.map((checkbox, i) => (
                      <ReportCheckBox
                        title={checkbox.label}
                        key={i}
                        onPress={isChecked => {
                          if (isChecked) {
                            if (!reportLabels.includes(checkbox.label)) {
                              setReportLabels(oldArray => [
                                ...oldArray,
                                checkbox.label,
                              ]);
                            }
                          } else {
                            if (reportLabels.includes(checkbox.label)) {
                              setReportLabels(array =>
                                array.filter((_, index) => index !== i),
                              );
                            }
                          }
                        }}
                      />
                    ))}
                  </View>
                  <View
                    style={{
                      paddingHorizontal: parseInt(width * 0.026),
                      paddingVertical: parseInt(height * 0.016),
                    }}>
                    <Text
                      style={{
                        fontSize: parseInt(width * 0.036),
                        color: colors.iconBlack,
                        fontWeight: '500',
                      }}>
                      Comment
                    </Text>
                    <TextInput
                      multiline
                      maxLength={255}
                      placeholder="Elaborate the report (Optional)"
                      style={styles.descriptionTextInput}
                      onChangeText={text => setReportComment(text)}
                      value={reportComment}
                    />
                  </View>
                </View>
                <View style={styles.reportBottomButton}>
                  <AppButton
                    title="Cancel"
                    onPress={() => sheetRef.current.close()}
                    style={{
                      width: width * 0.48,
                      backgroundColor: colors.transparent,
                    }}
                  />
                  <AppButton
                    title="Send"
                    style={{width: width * 0.48}}
                    onPress={reportAd}
                  />
                </View>
              </>
            </Screen>
          </RBSheet>
          <RBSheet
            ref={hideStockRef}
            closeOnDragDown
            closeOnPressMask
            height={parseInt(height * 0.22)}
            openDuration={150}
            customStyles={bottomSheetStyle}>
            <SheetComponentButton
              title={postDetails.hidden ? 'Unhide Product' : 'Hide Product'}
              icon={hidden}
              onPress={() => {
                closeHideStockSheet();
                setTimeout(() => {
                  hidePost();
                }, 200);
              }}
            />
            <SheetComponentButton
              title={!postDetails.out_of_stock ? 'Out of stock' : 'Available'}
              icon={!postDetails.out_of_stock ? notAllowed : tickMark}
              onPress={() => {
                closeHideStockSheet();
                setTimeout(() => {
                  outOfStock();
                }, 200);
              }}
            />
          </RBSheet>
          <RBSheet
            ref={editDeleteRef}
            closeOnDragDown={true}
            closeOnPressMask={true}
            height={parseInt(height * 0.22)}
            openDuration={150}
            customStyles={bottomSheetStyle}>
            <SheetComponentButton
              title="Edit Product"
              icon={editSvg}
              onPress={() => {
                closeEditSheet();
                setTimeout(() => {
                  setShowEdit(true);
                  console.log(showEdit);
                  setRenderUI(false);
                }, 200);
              }}
            />
            <SheetComponentButton
              title="Delete Product"
              icon={deleteSvg}
              onPress={() => {
                closeEditSheet();
                setTimeout(() => {
                  showDeleteAlert();
                }, 200);
              }}
            />
          </RBSheet>
        </Screen>
      ) : (
        <AppIndicator />
      )}
    </>
  );
}

const styles = StyleSheet.create({
  buttonContainer: {
    marginStart: 10,
    width: '46%',
  },
  statusText: {
    fontWeight: '600',
    fontSize: parseInt(width * 0.037),
  },
  moreButton: {
    width: width * 0.1,
    height: width * 0.1,
    backgroundColor: colors.white,
    borderRadius: (width * 0.1) / 2,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
  },
  reportBottomButton: {
    justifyContent: 'space-evenly',
    flexDirection: 'row',
    backgroundColor: colors.white,
    borderColor: colors.blueBorder,
    alignItems: 'center',
    borderTopWidth: 1,
    paddingVertical: parseInt(height * 0.011),
    bottom: 3,
  },
  iconBackground: {
    backgroundColor: colors.darkblue,
    height: parseInt(height * 0.062),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: parseInt(width * 0.016),
    width: parseInt(width * 0.18),
  },
  largeIconButton: {
    width: parseInt(width * 0.46),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: colors.darkblue,
    borderWidth: 1.2,
    borderRadius: parseInt(width * 0.016),
  },
  descriptionTextInput: {
    borderWidth: 1,
    borderColor: colors.blueBorder,
    width: width,
    height: parseInt(height * 0.1),
    textAlignVertical: 'top',
    borderRadius: parseInt(width * 0.016),
    marginVertical: parseInt(width * 0.022),
    padding: parseInt(width * 0.016),
  },
  reportTitle: {
    flexDirection: 'row',
    width: width,
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: parseInt(width * 0.026),
    paddingVertical: parseInt(height * 0.016),
  },
  bottomContainer: {
    flexDirection: 'row',
    position: 'absolute',
    justifyContent: 'space-evenly',
    paddingVertical: parseInt(height * 0.005) * 2,
    left: 0,
    right: 0,
    bottom: 0,
    borderTopWidth: 1,
    borderColor: colors.blueBorder,
    backgroundColor: colors.white,
  },
  sheetContainer: {
    borderTopStartRadius: width * 0.02,
    borderTopEndRadius: width * 0.02,
    elevation: 20,
  },
  dotsImage: {
    marginTop: 5,
    alignSelf: 'center',
  },
  headerButtons: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    position: 'absolute',
    padding: height * 0.016,
    top: 0,
    left: 0,
    right: 0,
    width: '100%',
    zIndex: 1,
  },
  locationHeading: {
    fontWeight: '700',
    fontSize: width * 0.036,
    marginBottom: parseInt(height * 0.004),
    color: colors.iconBlack,
  },
  pagination: {
    width: width * 0.03,
    height: height * 0.015,
  },
  productImage: {
    width: '100%',
    height: '100%',
  },
  titleText: {
    marginStart: 15,
    marginTop: 10,
    fontSize: 14,
    fontWeight: '800',
  },
  deleteProgress: {
    flex: 1,
    width: '100%',
    height: '100%',
    position: 'absolute',
    backgroundColor: colors.blackAlpha,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    alignContent: 'center',
    zIndex: 12,
  },
  modal: {
    margin: 0, // This is the important style you need to set
    backgroundColor: colors.white,
    alignItems: undefined,
    justifyContent: undefined,
  },
  detailsTitle: {
    fontWeight: '700',
    fontSize: parseInt(width * 0.036),
    marginBottom: parseInt(height * 0.014),
    color: colors.iconBlack,
  },
});

const bottomSheetStyle = {
  wrapper: {
    backgroundColor: colors.blackAlpha,
  },
  draggableIcon: {
    backgroundColor: colors.draggableIcon,
  },
  container: {
    borderTopStartRadius: width * 0.02,
    borderTopEndRadius: width * 0.02,
    elevation: 20,
  },
};

export default ProductListingScreen;