Untitled

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, Image, Linking } from 'react-native';
import { Colors, Icons } from '../../themes';
import { useDispatch } from 'react-redux';
import { actions } from '../../redux/deeplink';
import {
  IconButton,
  Row,
  Space,
  Container,
  ShadowView,
  Touchable,
  ImageView,
  Text,
} from '../Common';
import { ShareAction, FollowButton } from '../ActionButtons';
import Loading from '../Loading';
import PageHeading from '../Header/PageHeading';

import {
  TEXT,
  ENTITY_NAME,
  openGoogleMapUrl,
  HandleError,
  openUrlLink,
  ShowNotification,
  formatDistance,
  formatPhoneNo,
  formatNumber,
} from '../../utils';
import ShopList from './ShopList';
import MallPost from './MallPost';
import { putFollowAction, getMallById } from '../../apis/mall';
import { actions as MallActions } from '../../redux/mall';
import Icon from 'react-native-vector-icons/Ionicons';

const MallDetail = ({ route }) => {
  const params = route.params;
  const dispatch = useDispatch();

  const [mallData, setMallData] = useState({
    loading: false,
    data: params.mall || {},
  });

  useEffect(() => {
    // get product from deeplink
    if (params.from && params.from === 'deeplink') {
      const fetchMall = async () => {
        try {
          setMallData({ ...mallData, loading: true });
          const response = await getMallById(params?.id);
          setMallData({ data: response, loading: false });
        } catch (error) {
          setMallData({ ...mallData, loading: false });
          HandleError(error);
        }
      };
      fetchMall();
      dispatch(actions.resetDeepLink());
    }
  }, []);

  useEffect(() => {
    dispatch(MallActions.setCurrentMall(mallData.data));
  }, [mallData]);

  const onFollowPress = () => {
    try {
      const data = { ...mallData.data };
      putFollowAction(data?.id, { isFollowing: !data.isFollowing });
      data.isFollowing = !data.isFollowing;
      data.followerCount = isFollowing
        ? data.followerCount - 1
        : data.followerCount + 1;
      setMallData({ ...mallData, data });
      const { onUpdateMall } = params;
      onUpdateMall && onUpdateMall(data);
    } catch (error) {
      //
    }
  };

  if (mallData?.loading) return <Loading />;

  const {
    id,
    name,
    address,
    distance_meters,
    // upcomingPost,
    description,
    isFollowing,
    followerCount,
    shop_categories,
    mapLink,
    postalCode,
    phoneNo,
    facebookUrl,
    instagramUrl,
    coverImage,
    shop,
    geoLocation,
    carparkAvailability,
    website,
  } = mallData.data;

  const onCall = () => {
    Linking.openURL(`tel:${phoneNo}`);
  };

  const onDirection = () => {
    if (!geoLocation) {
      return ShowNotification('This location is not provided');
    }
    openGoogleMapUrl({
      latitude: geoLocation.lat,
      longitude: geoLocation.lng,
    });
  };

  const openURL = (url) => () => {
    openUrlLink(url);
  };
  const renderHeader = () => {
    return (
      <>
        <ShadowView style={styles.banner}>
          <ImageView uri={coverImage?.url} shadow />
          <Row padding={16}>
            <View style={styles.fill}>
              <Text>{address}</Text>
              <Text>{formatDistance(distance_meters)}</Text>
              {/* {upcomingPost > 0 && (
                <Text type={'bold14'} color={Colors.primary}>
                  {`${upcomingPost} ${TEXT.LABEL_UPCOMING}`}
                </Text>
              )} */}
            </View>
            <Row>
              <ShadowView style={styles.circleBtn}>
                <Image source={Icons.CAR} style={styles.iconSize} />
                <Text type={'bold14'} color={Colors.primary}>
                  {(carparkAvailability && formatNumber(carparkAvailability)) ||
                    0}
                </Text>
              </ShadowView>
              <Touchable onPress={onDirection}>
                <ShadowView style={styles.circleBtn}>
                  <Image source={Icons.PEOPLE} style={styles.iconSize} />
                  <Text type={'medium8'} color={Colors.primary}>
                    {TEXT.LABEL_DIRECTION}
                  </Text>
                </ShadowView>
              </Touchable>
            </Row>
            <FollowButton
              isFollowing={isFollowing}
              counter={followerCount}
              onPress={onFollowPress}
            />
          </Row>
          <View style={styles.bannerFooter}>
            <ShareAction item={mallData.data} entity={ENTITY_NAME.MALL} />
          </View>
        </ShadowView>
        <ShopList mallId={id} shopCategories={shop_categories} />
        <ShadowView style={styles.mallDetail}>
          <Text type={'bold18'} center marginBottom={16}>
            {TEXT.LABEL_DETAIL}
          </Text>
          <Text type="medium14" justify>
            {description}
          </Text>
          <Space />
          <Text type={'bold18'} center marginBottom={16}>
            {TEXT.LABEL_CONTACT}
          </Text>
          <Touchable onPress={openURL(mapLink)}>
            <Row margin={4} horizontalCenter>
              <Image source={Icons.LOCATION} style={styles.iconSize} />
              <Text fill type={'medium14'} marginLeft={16}>
                {`${address}, ${postalCode}`}
              </Text>
            </Row>
          </Touchable>
          {!!website && (
            <Touchable onPress={openURL(website)}>
              <Row margin={4} horizontalCenter>
                <Icon name={'link'} size={24} color={Colors.primary} />
                <Text type={'medium14'} marginLeft={16}>
                  {website}
                </Text>
              </Row>
            </Touchable>
          )}
          {!!phoneNo && (
            <Touchable onPress={onCall}>
              <Row margin={4} horizontalCenter>
                <Image source={Icons.PHONE} style={styles.iconSize} />
                <Text type={'medium14'} marginLeft={16}>
                  {formatPhoneNo(phoneNo)}
                </Text>
              </Row>
            </Touchable>
          )}
          <Space />
          <Row center>
            {facebookUrl && (
              <IconButton
                icon={Icons.FACEBOOK}
                style={styles.socialIcon}
                onPress={openURL(facebookUrl)}
              />
            )}
            {instagramUrl && (
              <IconButton
                icon={Icons.INSTAGRAM}
                style={styles.socialIcon}
                onPress={openURL(instagramUrl)}
              />
            )}
          </Row>
        </ShadowView>
      </>
    )
  }

  return (
    <Container safeView>
      <PageHeading heading={name} logo={shop?.coverImage?.url} />
      <View>
        <MallPost mall={mallData.data} renderHeader={renderHeader}/>
      </View>
    </Container>
  );
};

const styles = StyleSheet.create({
  banner: {
    minHeight: 320,
    borderRadius: 16,
    marginHorizontal: 16,
    marginTop: 16,
  },
  bannerFooter: {
    paddingHorizontal: 16,
    paddingBottom: 8,
    alignItems: 'flex-end',
  },
  fill: {
    flex: 1,
  },
  mallDetail: {
    padding: 16,
    borderRadius: 16,
    marginHorizontal: 16,
    marginBottom: 24,
  },
  circleBtn: {
    width: 56,
    height: 56,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 30,
    marginTop: 8,
    marginRight: 8,
  },
  iconSize: {
    height: 20,
    width: 20,
    resizeMode: 'contain',
    tintColor: Colors.primary,
  },
  socialIcon: {
    marginHorizontal: 4,
  },
});

MallDetail.propTypes = {
  route: PropTypes.object,
};

MallDetail.defaultProps = {};

export default MallDetail;