toneopplans backup

import React, { useEffect, useCallback, useState } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import { colors } from '../../../../theme';
import CardComponent from '../../../../component/common/CardComponent';
import { useSelector } from 'react-redux';
import { trackScreenEvent } from '../../../../utils/FirebaseTrackEvents';
import { useFocusEffect, useNavigation } from '@react-navigation/native';
import { height, width } from '../../../../constants/constants';
import DashedLine from '../../../../component/common/DashedLine';
import ImageCardWithStatus from '../../../../component/common/ImageCardWithStatus';
import fonts from '../../../../assets/fonts';
import Icon from 'react-native-vector-icons/EvilIcons';
import ExploreOurOtherPlanCard from '../../../../component/common/ExploreOurOtherPlanCard';
import { getToneopPlans } from '../../../../api';
import { ShowErrorMessage } from '../../../../component/common/showErrorMessage';
import moment from 'moment';
import { fontSize } from '../../../../utils/fontUtils';
import { IMAGE_URL } from '@env';
import routes from '../../../../routes/routes';

const ToneOpPlans = () => {
  const { user } = useSelector(store => store?.userDetails)
  const navigation = useNavigation()
  useFocusEffect(
    useCallback(() => {
      const params = {
        user_id: user.user_id,
        screen_name: 'ToneOpPlansList',
        is_event: 0,
      };
      trackScreenEvent(params);
    }, [])
  )

  useEffect(() => {
    getToneopPlans().then(res => {
      if (res.data.status) {
        setOrdersData(res.data.data)
      } else {
        ShowErrorMessage('Unknown error occured!')
      }

    }).catch(err => console.log(err?.response))
  }, [])

  const [ordersData, setOrdersData] = useState(null)
  function renderPlans({ item, index }) {
    const isCompleted = moment(item.start_date).isAfter(moment(item?.end_date))
    return (
      <View style={styles.cardContainer}>
        <View style={styles.imgStatusContainer}>
          <ImageCardWithStatus
            statusCode={item.statusCode}
            statusText={item.statusText}
            imageUri={IMAGE_URL + item.plan_img}
          />
          {isCompleted ?
            <View style={styles.completedContainer}>
              <Text style={styles.statusTxt}>Ongoing</Text>
            </View>
            :
            <View style={styles.ongoingContainer}>
              <Text style={styles.statusTxt}>Ongoing</Text>
            </View>}
        </View>
        <View style={styles.planContentContainer}>
          <Text style={styles.cardTitle}>{item.subscription_name}</Text>
          <View style={styles.coachTextContainer}>
            <View style={styles.coachVerticalLine} />
            <Text style={styles.coachText}>Get {item.sub_coach} Coach</Text>
          </View>
          <View style={styles.coachesTypeContainer}>
            {item?.coach_type?.map((val, index) =>
              <Text key={index} style={styles.cardTagText}>{val}{item.coach_type?.length - 1 > index ? ',' : null} </Text>
            )}
          </View>

          <View style={styles.priceContainer}>
            <View style={styles.priceTextContainer}>
              <Text style={styles.priceText}>₹{item?.actual_price}</Text>
              <Text style={styles.offerText}>{item.percentage_off}% OFF</Text>
            </View>

            <View style={styles.expireDayContainer}>
              <Icon name="clock" size={18} />
              <Text style={styles.expireText}>{item?.duration}</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
  function ItemSeparatorComponent() {
    return <DashedLine dashGap={5} dashLength={7} width={width / 1.2} />;
  }

  return (
    <View style={styles.container}>
      <CardComponent>
        <FlatList
          ItemSeparatorComponent={ItemSeparatorComponent}
          data={ordersData}
          renderItem={renderPlans}
        />
        <ExploreOurOtherPlanCard onPress={() => navigation.navigate(routes.buyPlanStack)} />
      </CardComponent>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.cf9f9f9,
  },
  cardContainer: {
    width: width / 1.1,
    height: height / 7.5,
    flexDirection: 'row',
    paddingHorizontal: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardTitle: {
    fontFamily: fonts.PoppinsSemiBold,
    fontSize: 16,
    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: 12,
    color: colors.green,
    marginLeft: 5,
  },
  cardTagText: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: 12,
    color: colors.c666666,
  },
  coachesTypeContainer: {
    alignItems: 'center', flexDirection: 'row'
  },
  completedContainer: {
    borderRadius: 45,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 4,
    paddingHorizontal: 10,
    backgroundColor: colors.green,
    position: 'absolute',
    bottom: 10,
    alignSelf: 'center'
  },
  planContentContainer: {
    flex: 1,
    padding: 10
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 8,
  },
  priceTextContainer: { flexDirection: 'row', alignItems: 'flex-end' },
  priceText: {
    fontFamily: fonts.PoppinsSemiBold,
    fontSize: 18,
    color: colors.c666666,
  },
  offerText: {
    color: colors.orange,
    fontFamily: fonts.PoppinsRegular,
    fontSize: 10,
    marginBottom: 3,
    marginLeft: 5,
  },
  expireDayContainer: {
    flexDirection: 'row',
    backgroundColor: colors.cf9f9f9,
    borderRadius: 100,
    padding: 5,
  },
  expireText: {
    fontFamily: fonts.PoppinsMedium,
    fontSize: 10,
    color: colors.c666666,
    marginHorizontal: 2,
  },
  imgStatusContainer: {
    position: 'relative',
  },
  ongoingContainer: {
    borderRadius: 45,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 4,
    paddingHorizontal: 10,
    backgroundColor: colors.mangoYellow,
    position: 'absolute',
    bottom: 10,
    alignSelf: 'center'
  },
  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 },
  otherPlanDesc: {
    fontFamily: fonts.PoppinsRegular,
    fontSize: 12,
    color: colors.cE8E8E8,
    marginTop: 5,
  },
  nxtBtn: {
    width: width / 7,
    height: width / 9,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 100,
    backgroundColor: colors.white,
  },
  statusTxt: {
    fontSize: fontSize.fs10,
    fontFamily: fonts.PoppinsMedium,
    color: colors.white
  }
});

export default ToneOpPlans;