Untitled

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { Text, View } from 'react-native-ui-lib';
import { GetLatestReport } from '../../api/mobile';
import { useReportBack } from '../../context';
import { TouchableOpacity } from 'react-native-gesture-handler';

const DateFormat = () => {
  const {
    store: { company },
  } = useReportBack();
  const { data: report } = GetLatestReport(company?.id);
  const [apiTime, setApiTime] = useState(report?.data?.dateCreated);
  const data = report?.data?.dateCreated;
  const [showTooltip, setShowTooltip] = useState(false);

  const handlePress = () => {
    setShowTooltip(true);
  };

  useEffect(() => {
    if (showTooltip) {
      const timeout = setTimeout(() => {
        setShowTooltip(false);
      }, 1000);

      return () => {
        clearTimeout(timeout);
      };
    }
  }, [showTooltip]);

  const formattedTime = moment(apiTime).format('dddd, MMMM DD, YYYY');
  
  const currentWeekTime = moment(apiTime).format('dddd, MMMM DD');
  const previousWeekTime = moment(apiTime).subtract(6, 'days').format('dddd, MMMM DD, YYYY');

  return (
    <>
      <View >
        <TouchableOpacity onPress={handlePress}>
          <View style={{ backgroundColor: 'transparent', padding: 10, borderRadius: 5 }}>
            <Text style={{ color: 'black' }}>{formattedTime}</Text>
          </View>
        </TouchableOpacity>
      </View>
      <View flex-1 center>
        {showTooltip && (
          <View flex-1 row bg-black br30 padding-10 style={{  marginTop: -50, bottom: 30, right: 150 }}>
            <Text row white>{`${currentWeekTime}-${previousWeekTime}`}</Text>
          </View>
        )}
      </View>
    </>
  );
};

export default DateFormat;