myplanscreen

import React, { useEffect, useState } from 'react';
import { FlatList, ImageBackground, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { height, width } from '../../constants/constants';
import fonts from '../../assets/fonts';
import { colors } from '../../theme';
import CustomHeader from '../../component/common/CustomHeader';
import { fontSize } from '../../utils/fontUtils';
import MyPlanTimeRemaining from '../../component/myplan/MyPlanTimeRemaining';
import Images from '../../assets/Images';
import Icon from 'react-native-vector-icons/EvilIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ImageCardWithStatus from '../../component/common/ImageCardWithStatus';
import DashedLine from '../../component/common/DashedLine';
import ExploreOurOtherPlanCard from '../../component/common/ExploreOurOtherPlanCard';
import { ThreeStarRedIcon } from '../../assets/Icons';
import { Platform } from 'react-native';
import ButtonComponent from '../../component/common/ButtonComponent';
import { useNavigation } from '@react-navigation/native';
import routes from '../../routes/routes';
import { getMyPlanDetails, getUserProfile } from '../../api';
import { IMAGE_URL } from '@env';
import moment from 'moment';
import { useDispatch, useSelector } from 'react-redux';
import { storeUserPlanDetails } from '../../redux/actions/userPlanDetails';
import BookYourCallBackModal from '../../component/common/BookYourCallBackModal';
import { storeUserDetails, storeUserProfileData } from '../../redux/actions/users';

const MyPlanScreen = () => {
  const disptach = useDispatch();
  const { userPlanDetails } = useSelector(state => state?.userPlanDetails);
  const [selectedPlan, setSelectedPlan] = useState(null)
  const [showBookYourCallBackModal, setShowBookYourCallBackModal] = useState(false)
  const navigation = useNavigation()

  const { user } = useSelector(state => state?.userDetails)

  useEffect(() => {
    getMyPlanDetails().then((res) => {
      if (res?.data?.status) {
        disptach(storeUserPlanDetails(res?.data?.data))
        getUserProfile().then((res) => {
          disptach(storeUserDetails(res.data?.data))
          disptach(storeUserProfileData(res.data?.data))
        })
      }
    }).catch((err) => { })
  }, []);

  useEffect(() => {
    if (userPlanDetails && !user?.is_recall_scheduled) {
      setShowBookYourCallBackModal(true)
    }
  }, [navigation, userPlanDetails])


  function FullCardPlanDetails({ item, index }) {
    function HeaderBox() {
      return (
        <ImageBackground style={styles.headerBoxImgContainer} resizeMode='contain' source={{ uri: `${IMAGE_URL}${item?.photo}` }} >
          <View style={styles.headerBoxContainer} >
            <View style={styles.coachTextContainer}>
              <View style={styles.coachVerticalLine} />
              <Text style={styles.coachText}>{`Get ${item?.coach_type?.no_of_coaches} coach`}</Text>
            </View>
            <Text style={styles.headerBoxSlug} >{item?.slug}</Text>
            <Text style={styles.headerBoxName} >{item?.name}</Text>
            <View style={{ flex: 1 }} />
            <ImageBackground style={styles.headerBottomImg} resizeMode='stretch' source={Images.recBgForPlandetails} >
              <ThreeStarRedIcon width={width / 20} height={width / 20} />
              <Text style={styles.headerBottomText} >Start Instantly you come to know about the happy feeling that you are going to be a mom!!</Text>
            </ImageBackground>
          </View>
        </ImageBackground>
      )
    }


    return (
      <View style={styles.fullCardContainer} >
        <HeaderBox />
        <DashedLine containerStyle={[styles.dashLineContainer]} dashGap={2} dashLength={3} width={width / 1.15} />

        {userPlanDetails?.add_on_plan?.length > 0 ? <Text style={styles.addMedicalPlan} >Added Medical Condition</Text> : null}
        <FlatList
          style={styles.medicalPlanFlatlist}
          horizontal
          data={userPlanDetails?.add_on_plan}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item, index }) => {
            return (
              <Pressable
                onPress={() => { }}
                style={styles.medicalPlanContainer}>

                <View style={styles.addOnNameDurationContainer} >
                  <Text style={styles.renderAddOnBoxName} >Get 2/3 Coaches</Text>
                  <Text style={[styles.renderAddOnBoxName, styles.addOnNameDurationContainerTextStyle]} >PCOS/PCOD care plan</Text>
                  <Text style={styles.renderAddOnBoxDurationText} >90 Days</Text>
                </View>

                <View style={styles.addOnBoxPriceContainer} >
                  <Text style={styles.renderAddOnBoxPrice} >₹999</Text>
                  <Text style={styles.renderAddOnBoxOrignalPrice} >₹1299</Text>
                </View>
              </Pressable>
            );
          }}
        />

        {userPlanDetails?.order_details?.length > 0 ? <Text style={styles.orderJourneyText} >Order Journey</Text> : null}
        <FlatList style={styles.orderHistoryFlatlistStyle} data={userPlanDetails?.order_details} renderItem={({ item, index }) => {
          return (
            <View style={styles.orderJourneyListContainer} >
              <View style={styles.orderJourneyRadioContainer} >
                <View style={styles.orderJourneyBorder} >
                  <View style={styles.orderJourneyInnerDot} >
                  </View>
                </View>
                {index < userPlanDetails.order_details?.length - 1 ? <DashedLine axis='vertical' width={width / 9.5} color={colors.green} dashGap={2} dashLength={3} dashThickness={0.8} /> : null}
              </View>

              <View style={styles.orderJourneyTextContainer} >
                <Text style={styles.orderJourneyTitleText} >{item?.title}</Text>
                <View style={styles.orderHistoryHorizontalContainer} >
                  {index == 0 && <Text style={styles.orderJourneyDateText}>Start date  </Text>}
                  {item?.date_time == null ?
                    <Text style={[styles.orderJourneyDateText, { marginRight: width / 10 }]} >Yet to be assigned</Text> :
                    <>
                      <Text style={styles.orderJourneyDateText}>{moment(item?.date_time).format("DD MMM YYYY")}</Text>
                      <View style={styles.orderHistoryDot} />
                      <Text style={styles.orderJourneyDateText}>{moment(item?.date_time).format("HH:mm A")}</Text>
                    </>}
                </View>
              </View>
            </View>
          )
        }} />

        <ButtonComponent onPress={() => navigation.navigate(routes.planDetails, { planType: 'paid', plan: { price: item?.type[0], id: item?.subscription_name_id, name: item?.name, photo: item?.photo } })} title={'Extend Plan'} bgColor={colors.transparent} style={styles.extendBtnStyle} />

        <View style={styles.benefitsContainer} >
          <View style={styles.benefitsBox} >
            <Text style={styles.benefitsText} >Benefits</Text>

            <View style={styles.expireDayContainer}>
              <Icon name="clock" size={18} />
              <Text style={styles.expireText}>{item?.duration} Days</Text>
            </View>
          </View>
          <FlatList style={{ marginTop: 5 }} data={item.benefits} renderItem={({ item, index }) => {
            return (
              <View style={styles.benefitsListContainer} >
                <View style={styles.benefitsCheckmarkContainer} >
                  <Ionicons name='checkmark' color={colors.green} size={width / 30} />
                </View>
                <Text style={styles.benefitsTextDesc} >{item?.description}</Text>
              </View>
            )
          }} />
        </View>


        <View style={styles.bottomPriceContainer} >
          <Text style={styles.bottomPaidText}>Paid</Text>
          <View style={styles.bottomPriceContainerBox} >
            <View style={styles.bottomPriceBox}>
              <Text style={styles.bottomPriceText}>{item?.type[0]?.price}</Text>
              <Text style={styles.bottomPercentageOff}>{item?.type[0]?.percentage_off} % OFF</Text>
            </View>
            <Text onPress={() => setSelectedPlan(selectedPlan ? index : null)} style={styles.seeLessText} >See Less</Text>
          </View>
        </View>
      </View>
    )
  }


  function renderPlans({ item, index }) {

    if (index == selectedPlan) {
      return (<FullCardPlanDetails item={item} index={index} />)
    }
    return (
      <Pressable onPress={() => setSelectedPlan(index)} style={styles.cardContainer}>
        <ImageCardWithStatus
          statusCode={item.statusCode}
          statusText={'Active'}
          imageUri={{ uri: `${IMAGE_URL}${item?.photo}` }}
        />
        <View style={styles.nameDayBoxContainer}>
          <View style={styles.nameDayContainer} >
            <Text style={styles.cardTitle}>{item.name}</Text>
            <View style={styles.expireDayContainer}>
              <Icon name="clock" size={18} />
              <Text style={styles.expireText}>{item?.duration} Days</Text>
            </View>
          </View>
          <View style={styles.coachTextContainer}>
            <View style={styles.coachVerticalLine} />
            <Text style={styles.coachText}>{`Get ${item?.coach_type?.no_of_coaches} Coach`}</Text>
          </View>

          <View style={styles.priceContainer}>
            <Text style={[styles.priceText, { fontSize: fontSize.fs10, fontFamily: fonts.PoppinsMedium, color: colors.c999999 }]}>{'Paid:'}</Text>
            <View style={styles.priceTextContainer}>
              <Text style={styles.priceText}>{item?.type[0]?.price}</Text>
              <Text style={{ fontFamily: fonts.PoppinsMedium, fontSize: fontSize.fs12, color: colors.purple }}>{'See Details'}</Text>
            </View>
          </View>
        </View>
      </Pressable>
    );
  }

  function ItemSeparatorComponent(style) {
    return <DashedLine containerStyle={[{ marginVertical: 10 }, style]} dashGap={3} dashLength={5} width={width / 1.15} />;
  }

  function getPlanDuration(data) {
    const today = moment();
    const endDate = moment(data);
    const remainingDays = endDate.diff(today, 'days');
    return remainingDays;
  }

  return (
    <View style={{ flex: 1, backgroundColor: colors.cf9f9f9 }} >
      <CustomHeader title={'My Plan'} menuButton={true} />
      <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false} >

        {userPlanDetails?.current_plan ?
          <MyPlanTimeRemaining
            startDate={moment(userPlanDetails?.current_plan[0]?.start_date).format("DD/MM/YYYY")}
            endDate={moment(userPlanDetails?.current_plan[0]?.end_date).format("DD/MM/YYYY")}
            days={getPlanDuration(userPlanDetails?.current_plan[0]?.end_date)}
          /> : null}

        <View style={styles.activePlanTextContainer} >
          <Text style={styles.activePlanText} >Active Plans</Text>
          <FlatList
            showsVerticalScrollIndicator={false}
            ItemSeparatorComponent={ItemSeparatorComponent}
            data={userPlanDetails?.current_plan}
            renderItem={renderPlans}
          />
        </View>
        <ExploreOurOtherPlanCard onPress={() => navigation?.navigate(routes?.buyPlan)} />
       {userPlanDetails?.length !=0 ? <BookYourCallBackModal isVisible={showBookYourCallBackModal} onClose={() => setShowBookYourCallBackModal(false)} />: null}
      </ScrollView>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardContainer: {
    width: width / 1.18,
    height: height / 8,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardTitle: {
    fontFamily: fonts.PoppinsSemiBold,
    fontSize: fontSize.fs16,
    color: colors.teal,
  },
  coachTextContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 3,
  },
  coachVerticalLine: {
    width: 1,
    height: width / 30,
    flexDirection: 'row',
    backgroundColor: colors.green,
  },
  coachText: {
    fontFamily: fonts.PoppinsSemiBold,
    fontSize: fontSize.fs12,
    color: colors.green,
    marginLeft: 5,
  },
  cardTagText: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs12,
    color: colors.c666666,
  },
  priceContainer: {
    justifyContent: 'space-between',
    marginTop: 8,
  },
  priceTextContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  priceText: {
    fontFamily: fonts.PoppinsSemiBold,
    fontSize: fontSize.fs16,
    color: colors.c222222,
  },
  offerText: {
    color: colors.orange,
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs10,
    marginBottom: 3,
    marginLeft: 5,
  },
  expireDayContainer: {
    flexDirection: 'row',
    backgroundColor: colors.cf9f9f9,
    borderRadius: 100,
    padding: 5,
  },
  expireText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs10,
    color: colors.c666666,
    marginHorizontal: 2,
  },
  otherPlanContainer: {
    width: width / 1.25,
    height: height / 9,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
    borderRadius: 12,
    backgroundColor: colors.purple,
    alignSelf: 'center',
    marginBottom: 20,
  },
  otherPlanText: {
    fontFamily: fonts.PoppinsMedium,
    color: colors.white,
    fontSize: fontSize.fs14
  },
  otherPlanDesc: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs12,
    color: colors.cE8E8E8,
    marginTop: 5,
  },
  nxtBtn: {
    width: width / 7,
    height: width / 9,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 100,
    backgroundColor: colors.white,
  },
  activePlanTextContainer: {
    width: width / 1.10,
    alignSelf: 'center',
    borderRadius: 10,
    backgroundColor: colors.white,
    paddingHorizontal: 10
  },
  activePlanText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs16,
    color: colors.c666666,
    alignSelf: 'flex-start',
    marginTop: 15,
    marginBottom: 5,
    marginLeft: 5
  },
  headerBoxImgContainer: {
    width: width * 1.4,
    height: width / 2.30,
    justifyContent: 'flex-end'
  },
  headerBoxContainer: {
    width: width,
    height: width / 2.8,
    paddingHorizontal: 5
  },
  headerBoxSlug: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs12,
    color: colors.c666666
  },
  headerBoxName: {
    fontFamily: fonts.PoppinsBold,
    fontSize: fontSize.fs24,
    color: colors.teal,
    width: width / 2,
    lineHeight: 26,
    marginVertical: 5
  },
  headerBottomImg: {
    width: width / 1.2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 5,
    paddingVertical: 3
  },
  headerBottomText: {
    flex: 1,
    color: colors.c666666,
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs10,
    lineHeight: 14,
    paddingHorizontal: 5
  },
  fullCardContainer: {
    width: width / 1.2
  },
  dashLineContainer: {
    marginTop: width / 20,
    marginBottom: 10
  },
  addMedicalPlan: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs12,
    color: colors.c666666,
    marginVertical: 10
  },
  medicalPlanFlatlist: {
    zIndex: 0,
    alignSelf: 'center'
  },
  medicalPlanContainer: {
    width: width / 1.2,
    height: width / 4.5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 8,
    backgroundColor: colors.cf9f9f9,
    borderRadius: 8,
  },
  renderAddOnBox: {
    width: width / 1.6,
    height: width / 5,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    marginRight: 15,
    borderRadius: 12,
  },
  renderAddOnBoxCheckbox: {
    width: width / 25,
    height: width / 25,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 100,
    borderWidth: 1,
  },
  renderAddOnBoxMainContainer: {
    flex: 1,
    paddingLeft: 8,
  },
  renderAddOnBoxNameContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  renderAddOnBoxName: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs12,
    color: colors.green,
  },
  addOnBoxPriceContainer: {
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    marginVertical: 3
  },
  renderAddOnBoxPrice: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs16,
    color: colors.black,
  },
  renderAddOnBoxOrignalPrice: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs12,
    textDecorationLine: 'line-through',
    color: colors.c999999,
  },
  renderAddOnBoxDurationContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  renderAddOnBoxDurationText: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs10,
    color: colors.c666666,
  },
  renderAddOnBoxDurationOffText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs12,
    color: colors.green,
  },
  orderJourneyText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs12,
    color: colors.c666666,
    marginTop: width / 20,
    marginBottom: 10
  },
  bottomPriceContainer: {
    paddingHorizontal: 5
  },
  bottomPaidText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs10,
    color: colors.c999999,
  },
  bottomPriceContainerBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  bottomPriceBox: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  bottomPriceText: {
    fontFamily: fonts.PoppinsBold,
    fontSize: fontSize.fs26,
    color: colors.c666666,
  },
  bottomPercentageOff: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs10,
    color: colors.orange,
    marginBottom: Platform.OS == 'android' ? 10 : 6,
    marginLeft: 5,
  },
  seeLessText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: fontSize.fs12,
    color: colors.purple
  },
  benefitsContainer: {
    paddingHorizontal: 5,
    marginVertical: 10
  },
  benefitsBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: "space-between"
  },
  benefitsText: {
    fontFamily: fonts.PoppinsSemiBold,
    fontSize: fontSize.fs14,
    color: colors.black
  },
  benefitsListContainer: {
    flexDirection: 'row',
    marginVertical: 5
  },
  benefitsCheckmarkContainer: {
    width: width / 25,
    height: width / 25,
    backgroundColor: colors.cf9f9f9,
    alignItems: "center",
    justifyContent: 'center',
    borderRadius: 100
  },
  benefitsTextDesc: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: fontSize.fs12,
    color: colors.c222222,
    marginLeft: 5
  },
  orderJourneyListContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  orderJourneyRadioContainer: {
    alignItems: 'center'
  },
  orderJourneyBorder: {
    width: 20,
    height: 20,
    borderWidth: 1,
    borderColor: colors.green,
    borderRadius: 100,
    overflow: 'hidden'
  },
  orderJourneyInnerDot: {
    flex: 1,
    margin: 3,
    borderRadius: 100,
    backgroundColor: colors.green
  },
  orderJourneyTextContainer: {
    paddingLeft: 10,
  },
  orderJourneyTitleText: {
    fontFamily: fonts.PoppinsSemiBold,
    color: colors.c666666,
    fontSize: fontSize.fs14,
    textTransform: 'capitalize'
  },
  orderJourneyDateText: {
    fontFamily: fonts.PoppinsRegular,
    color: colors.c666666,
    fontSize: fontSize.fs10
  },
  addOnNameDurationContainer: {
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
  addOnNameDurationContainerTextStyle: {
    marginVertical: 5,
    color: colors.black,
    fontSize: fontSize.fs14
  },
  nameDayBoxContainer: {
    flex: 1,
    padding: 10
  },
  nameDayContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  extendBtnStyle: {
    width: width / 1.2,
    marginVertical: width / 15
  },
  orderHistoryFlatlistStyle: {
    marginTop: 10
  },
  orderHistoryHorizontalContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  orderHistoryDot: {
    width: width / 50,
    height: width / 50,
    backgroundColor: colors.cE8E8E8,
    borderRadius: 100,
    marginHorizontal: 5
  }
});
export default MyPlanScreen;