Untitled

import AppIcon from '@components/common/icon';
import {NAVIGATION_CONSTANTS} from '@constants';
import {useNavigation} from '@react-navigation/native';
import {Colors, Typography} from '@themes';
import Dimension from '@utils/Dimension';
import _ from 'lodash';
import moment from 'moment';
import * as React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
import {useSelector} from 'react-redux';

let widthDate = (Dimension.widthScreen - 26) / 5;

const InsightMonthItem = ({offset, data, title}) => {
  console.log('offset', offset);
  let now = moment();
  const user = useSelector(state => state.auth.user);
  const createdDate = moment(user?.created_date).clone().startOf('day');
  const {navigate} = useNavigation();
  let start_date = moment().clone().subtract(offset, 'month').startOf('month');
  const contentCompleted =
    useSelector(state => state.temp.contentCompleted) || {};
  let end_date = moment()
    .clone()
    .subtract(offset, 'month')
    .endOf('month')
    .format('DD');
  let totalDays = Number(end_date) - Number(start_date.format('DD')) + 1;
  let startDateName = start_date.format('ddd');
  let emptyNumber = DateFullName[startDateName];
  return (
    <View style={[styles.container]}>
      <View style={styles.monthTitleView}>
        <Text style={styles.monthTitle}>{title}</Text>
      </View>
      <View style={styles.calendar}>
        {Array.from({length: 5}).map((e, index) => (
          <View style={styles.calendarHeader}>
            <Text style={styles.text}>{DateName[index]}</Text>
          </View>
        ))}

        {Array.from({length: emptyNumber}).map(e => (
          <View style={styles.emptyDate} />
        ))}
        {Array.from({length: totalDays}).map((e, index) => {
          let weekDay = start_date.clone().add(index, 'day');
          if (
            weekDay.format('ddd') === 'Sat' ||
            weekDay.format('ddd') === 'Sun'
          )
            return null;
          if (!data) {
            return (
              <View style={styles.dateCell}>
                <SkeletonPlaceholder
                  speed={2000}
                  backgroundColor={'#151518'}
                  highlightColor={'#2F2F36'}>
                  <View style={styles.dateCircle} />
                </SkeletonPlaceholder>
              </View>
            );
          }
          let dateData = (!!data && data[weekDay.format('YYYY-MM-DD')]) || null;
          const isCompleted = !!contentCompleted[dateData?.uuid];
          const timeDiff = moment(now).diff(weekDay, 'hour');
          const available = !!dateData;
          let imageURL =
            _.get(dateData, 'thoughtLeaders.0.images.0.url_optimised', null) ||
            _.get(dateData, 'thoughtLeaders.0.images.0.url', null);
          let icon = 'insight-error';
          if (available) {
            if (isCompleted) {
              icon = 'insight-check';
            } else {
            }
            if (timeDiff < 0) {
              icon = 'insight-lock';
            }
          }

          const onPressInsight = (uuid, start_at) => () => {
            if (uuid) {
              navigate(NAVIGATION_CONSTANTS.DAILY_INSIGHT_DETAIL, {
                slug: uuid,
                start_at: start_at,
              });
            }
          };

          return (
            <View style={styles.dateCell}>
              <Text style={styles.text}>{weekDay.format('DD')}</Text>
              <TouchableOpacity
                disabled={!dateData || timeDiff < 0}
                onPress={onPressInsight(dateData?.uuid, dateData?.start_at)}>
                <LinearGradient
                  style={[styles.dateCircle]}
                  start={{x: 0.0, y: 0.25}}
                  end={{x: 0.5, y: 1.0}}
                  colors={
                    !isCompleted && timeDiff >= 0 && dateData
                      ? [Colors.ivyYellow, Colors.ivyRed]
                      : dateData
                      ? [Colors.body.x300, Colors.greyScale2]
                      : [Colors.greyScale2, Colors.greyScale2]
                  }>
                  <View
                    style={{
                      width: widthDate - 18,
                      height: widthDate - 18,
                      borderRadius: (widthDate - 18) / 2,
                      borderColor: Colors.transparent,
                      backgroundColor: Colors.tabBar,
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    {timeDiff < 0 ? (
                      <View style={dayStyles.flex1}>
                        <AppIcon name={'insight-lock'} color={Colors.white} />
                      </View>
                    ) : (
                      <Image source={{uri: imageURL}} style={dayStyles.flex1} />
                    )}
                  </View>
                </LinearGradient>
                {isCompleted && (
                  <AppIcon
                    name={'check'}
                    size={8}
                    color={Colors.tabBar}
                    containerStyle={styles.checkIcon}
                  />
                )}
              </TouchableOpacity>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default InsightMonthItem;

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
    transform: [{scaleY: -1}],
  },
  monthTitleView: {
    marginBottom: 18,
    borderBottomColor: '#313134',
    borderBottomWidth: 1,
    paddingBottom: 12,
    paddingTop: 12,
  },
  monthTitle: {
    ...Typography.avenir.regular,
    fontWeight: '700',
    fontSize: 16,
    textAlign: 'left',
    textTransform: 'uppercase',
    color: '#6A6A6A',
    marginHorizontal: 20,
    letterSpacing: 1,
  },
  calendar: {
    flexDirection: 'row',
    paddingHorizontal: 13,
    flexWrap: 'wrap',
  },
  calendarHeader: {
    width: widthDate,
    borderRadius: widthDate / 2,
    marginBottom: 12,
  },
  text: {
    ...Typography.lato.regular,
    fontSize: 12,
    textAlign: 'center',
    letterSpacing: 1.54,
    color: Colors.white,
    marginBottom: 4,
  },
  dateCell: {
    width: widthDate,
    height: widthDate,
    paddingHorizontal: 7,
    alignItems: 'center',
    marginBottom: 24,
  },
  dateCircle: {
    width: widthDate - 14,
    height: widthDate - 14,
    borderRadius: (widthDate - 14) / 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emptyDate: {
    width: widthDate,
    height: 0,
    borderRadius: widthDate / 2,
    backgroundColor: Colors.transparent,
  },
  checkIcon: {
    width: 18,
    height: 18,
    borderRadius: 18 / 2,
    backgroundColor: Colors.aquamarine,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    marginTop: -10,
    borderWidth: 2,
    borderColor: Colors.tabBar,
  },
});

const dayStyles = StyleSheet.create({
  flex1: {
    width: widthDate - 22,
    height: widthDate - 22,
    borderRadius: (widthDate - 22) / 2,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.greyScale1,
  },
});

const DateName = {
  0: 'M',
  1: 'T',
  2: 'W',
  3: 'T',
  4: 'F',
};
const DateFullName = {
  Mon: 0,
  Tue: 1,
  Wed: 2,
  Thu: 3,
  Fri: 4,
  Sat: 5,
  Sun: 6,
};