Untitled

/**
 * Used in Schedule Screen
 */
import React, {memo} from 'react';
import {Box, Center, HStack, Pressable, Text, VStack} from 'native-base';
import {FlashList} from '@shopify/flash-list';
import moment from 'moment';
import {FindDuration, GetWeekName} from '../../utils/functions';
import Animated, {FadeOutDown, FadeInUp, Layout} from 'react-native-reanimated';

interface CourseProps {
  name: string;
  level: {
    name: string;
  };
  instructor_name: string;
  age_group: {
    name: string;
  };
}

interface ActiveCoursesCardProps {
  onPress: () => void;
  showTitle: boolean;
  data: {
    course: CourseProps;
  }[];
}

interface RenderDurationProps {
  schedule: {
    start_time: string | null | undefined;
    weekDay: string | null | undefined;
    end_time: string | null | undefined;
  };
  showDay: boolean;
}

const RenderDuration = ({schedule, showDay}: RenderDurationProps) =>
  schedule?.start_time !== null &&
  schedule?.start_time !== undefined &&
  schedule?.start_time !== '' && (
    <Text fontWeight={400} fontFamily='body' fontSize={12} color='white'>
      {showDay ? `${GetWeekName(schedule?.weekDay)}` : ''}
      {moment(schedule?.start_time, 'hh:mm:ss').format(' h:mm A')}{' '}
      {schedule?.end_time !== null &&
        schedule?.end_time !== undefined &&
        schedule?.end_time !== '' &&
        `(${FindDuration(schedule?.end_time, schedule?.start_time)})`}
    </Text>
  );

const colors = [
  ['#AB3AFF', '#6354F5'],
  ['#A6AABC', '#9098B1'],
  ['#784EFA', '#4e85d8'],
];

const ActiveCoursesCard: React.FC<ActiveCoursesCardProps> = memo(({data, onPress, showTitle}) => {
  const renderItem = ({item, index}: {item: any; index: number}) => {
    const [color1, color2] = colors[index % colors.length];
    return (
      <Animated.View layout={Layout.duration(1000).delay(100)} entering={FadeInUp} exiting={FadeOutDown}>
        <Pressable mb='2' px='5' key={item?.uuid} onPress={onPress}>
          <Box
            zIndex={data.length - index}
            top={index * -145}
            borderRadius={20}
            h={180}
            px='3'
            py='2'
            shadow={2}
            bgColor={{
              linearGradient: {
                colors: [color1, color2],
                start: [0.0, 1.0],
                end: [0.5, 0.25],
              },
            }}>
            <Center mb={3} justifyContent={'space-between'}>
              <Text fontWeight={800} fontFamily='heading' fontSize={20} color='white' numberOfLines={1} maxW='95%'>
                {item?.course?.name}
              </Text>
              <Text fontWeight={600} fontFamily='heading' fontSize={16} color='white' numberOfLines={1} maxW='95%'>
                {item?.course?.tenant?.name}
              </Text>
            </Center>

            <HStack justifyContent={'space-between'}>
              <VStack ml='2' maxW='40%'>
                <Text fontWeight={400} fontFamily='body' fontSize={14} color='white'>
                  {item?.course?.level?.name}
                </Text>
                <Text fontWeight={400} fontFamily='body' fontSize={14} color='white' numberOfLines={1}>
                  w/ {item?.course?.instructor_name}
                </Text>
                <Text fontWeight={400} fontFamily='body' fontSize={14} color='white' numberOfLines={1}>
                  {item?.course?.age_group?.name}
                </Text>
              </VStack>
              <VStack maxW='55%'>
                {item?.course?.days &&
                  (Array.isArray(item?.course?.days) ? (
                    item?.course?.days?.length > 0 &&
                    (item?.course?.days?.every(o => o?.start_time === item?.course?.days?.start_time) &&
                    item?.course?.days?.every(o => o?.end_time === item?.course?.days?.end_time) ? (
                      <RenderDuration schedule={item?.course?.days} />
                    ) : (
                      item?.course?.days?.map?.((v, i) => (
                        <Box key={i}>
                          {i === 0 && <Box h={0} w={0} />}
                          <RenderDuration key={i} showDay schedule={v} />
                        </Box>
                      ))
                    ))
                  ) : (
                    <RenderDuration schedule={item?.course?.days} />
                  ))}
              </VStack>
            </HStack>

            <HStack position='absolute' bottom='2' ml='3.5' mt='3.5'>
              <Text fontWeight='800' fontFamily='heading' fontSize='14' color='white'>
                {moment(item?.course?.start_date, 'YYYY-MM-DD').format('MMM D')} -{' '}
                {moment(item?.course?.end_date, 'YYYY-MM-DD').format('MMM D')} {''}{' '}
                {moment(item?.course?.end_date, 'YYYY-MM-DD').format('YYYY')}
              </Text>
            </HStack>
          </Box>
        </Pressable>
      </Animated.View>
    );
  };

  return (
    <Box flex='1'>
      {data?.length === 0 ? null : (
        <>
          {showTitle ? (
            <Text fontSize='20' fontWeight='600' fontFamily='heading'>
              Active Courses
            </Text>
          ) : null}
          <FlashList
            data={data}
            renderItem={renderItem}
            estimatedItemSize={320}
            contentContainerStyle={{paddingTop: 10}}
          />
        </>
      )}
    </Box>
  );
});

export default ActiveCoursesCard;