Untitled

import React, { memo, useEffect, useState } from 'react';
import { Dimensions, StyleSheet, PermissionsAndroid, Platform } from 'react-native';
import { Text, View } from 'react-native-ui-lib';
import { useTranslation } from 'react-i18next';

import { useColors } from '../../hooks/useColors';
import { Icon } from '../ui';
import { formattedByLanguage } from '../../utils/formatCurrency';
import { TouchableOpacity } from 'react-native-gesture-handler';
import ModalController from '../Modal/ModalController';
import { useEtrader } from '../../context';
import * as AddCalendarEvent from 'react-native-add-calendar-event';
import RNCalendarEvents from 'react-native-calendar-events';

const EconomicCalendarItem = memo(
  ({ text, icon, info, cardWidth, valAct, valCons, valPrev, indPri, valTStr, hasBorderRadius, valDStr }: any) => {
    const { colors }: any = useColors();
    const { t, i18n } = useTranslation();
    const { width, height } = Dimensions.get('window');
    const dimensionsWidth = cardWidth ? width * 0.7 : width;
    const [importance, setImportance] = useState<string>('');
    const {
      store: { theme },
    } = useEtrader();

    useEffect(() => {
      if (indPri) {
        if (indPri === 1) {
          setImportance('lowImportance');
        } else if (indPri === 2) {
          setImportance('midImportance');
        } else {
          setImportance('highImportance');
        }
      }
    }, [indPri]);

    const [hour, minute, second] = valTStr?.split(':');
    const [day, month, year] = valDStr?.split('.');
    const newDate = new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}.000Z`);
    const isoString = newDate.toISOString();

    const addEventToCalendarIos = async () => {
      const addEvent = async () => {
        try {
          await RNCalendarEvents.saveEvent(text, {
            startDate: isoString,
            endDate: isoString,
            notes: text,
          });

          ModalController.showModal({
            type: 'success',
            externalHeight: height - 300,
            props: {
              title: t('addEventCalendar', {
                type: t('Buy'),
              }),
            },
          });
        } catch (error) {
          ModalController.showModal({
            type: 'errorEvent',
            externalHeight: height - 250,
            props: {},
          });
        }
      };

      try {
        const result = await RNCalendarEvents.requestPermissions({ readOnly: false });
        if (result === 'authorized') {
          await addEvent();
        } else {
          throw new Error('Calendar permission not authorized');
        }
      } catch (error) {
        ModalController.showModal({
          type: 'errorEvent',
          externalHeight: height - 250,
          props: {},
        });
      }
    };

    const addEventToCalendarAndroid = async () => {
      try {
        const permission = PermissionsAndroid.PERMISSIONS.WRITE_CALENDAR;
        const granted = await PermissionsAndroid.request(permission, {
          title: 'Calendar Permission',
          message: 'This app needs calendar access to add events',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        });
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          try {
            await RNCalendarEvents.saveEvent(text, {
              startDate: isoString,
              endDate: isoString,
              notes: text,
            });

            ModalController.showModal({
              type: 'success',
              externalHeight: height - 300,
              props: {
                title: t('addEventCalendar', {
                  type: t('Buy'),
                }),
              },
            });
          } catch (error) {
            ModalController.showModal({
              type: 'errorEvent',
              externalHeight: height - 250,
              props: {},
            });
          }
        } else {
          ModalController.showModal({
            type: 'errorEvent',
            externalHeight: height - 250,
            props: {},
          });
        }
      } catch (error) {
        ModalController.showModal({
          type: 'errorEvent',
          externalHeight: height - 250,
          props: {},
        });
      }
    };

    const handleFirstTouchableOpacityPress = () => {
      if (Platform.OS === 'ios') {
        addEventToCalendarIos();
      } else {
        addEventToCalendarAndroid();
      }
    };

    return (
      <View
        centerV
        spread
        padding-16
        backgroundColor={theme === 'light' ? colors.cardFirstGr : colors.blockBg4DarkCl}
        style={[styles(colors, dimensionsWidth).container, hasBorderRadius ? styles(colors).roundedContainer : null]}>
        <View style={styles(colors).infoContainer}>
          <View row>
            <Text>
              <Icon name="flag" width={14} height={14} />
            </Text>
            <Text marginL-10 secondaryText body3>
              {info} • {valTStr?.slice(0, 5)} • {t(importance)}
            </Text>
            <View style={styles(colors).icon}>
              <TouchableOpacity onPress={handleFirstTouchableOpacityPress}>
                <Icon name="calendar" width={14} height={14} />
              </TouchableOpacity>
            </View>
          </View>
          <Text primaryText marginT-10 marginB-10 body2 style={styles(colors).textHeight}>
            {text}
          </Text>
        </View>
        <View row>
          <View flex-1 center>
            <Text secondaryText body2>
              {t('announced')}
            </Text>
            <Text color={valAct ? colors.primaryText : colors.secondaryText} body2>
              {valAct ? formattedByLanguage(i18n, valAct, 1, true) : '-'}
            </Text>
          </View>
          <View flex-1 center>
            <Text secondaryText body2>
              {t('expectations')}
            </Text>
            <Text color={valCons ? colors.primaryText : colors.secondaryText} body2>
              {valCons ? formattedByLanguage(i18n, valCons, 1, true) : '-'}
            </Text>
          </View>
          <View flex-1 center>
            <Text secondaryText body2>
              {t('previous')}
            </Text>
            <Text color={valPrev ? colors.primaryText : colors.secondaryText} body2>
              {valPrev ? formattedByLanguage(i18n, valPrev, 1, true) : '-'}
            </Text>
          </View>
        </View>
      </View>
    );
  },
);

export { EconomicCalendarItem };

const styles = (colors?: any, dimensionsWidth?: number) =>
  StyleSheet.create({
    container: {
      width: dimensionsWidth,
    },
    infoContainer: {
      borderBottomWidth: 0.5,
      borderColor: colors.white20,
      marginVertical: 8,
    },
    icon: {
      flex: 1,
      alignItems: 'flex-end',
    },
    textHeight: {
      height: 30,
    },
    roundedContainer: {
      borderRadius: 8,
    },
  });