Elep

import {__, setLocaleData} from '@wordpress/i18n';
import {useState, useEffect, useRef} from '@wordpress/element';
import Tooltip from '../common/Tooltip';
import ClickToFilter from './ClickToFilter';
import Icon from '../../utils/Icon';
import {
  endOfDay,
  format,
  startOfDay
} from 'date-fns';
import {
  formatTime,
  formatNumber,
  getPercentage,
  getRelativeTime, getDateWithOffset
} from '../../utils/formatting';
import GoalStatus from './GoalStatus';
import {useDashboardGoalsStore} from '../../store/useDashboardGoalsStore';
import {useGoalsStore} from '../../store/useGoalsStore';
import GridItem from '../common/GridItem';
import GoalsHeader from './GoalsHeader';
import {setOption} from '../../utils/api';
import {useQueries} from '@tanstack/react-query';
import getLiveGoals from '../../api/getLiveGoals';
import getGoalsData from '../../api/getGoalsData';

function selectGoalIcon( value ) {
  value = parseInt( value );
  if ( 10 < value ) {
    return 'goals';
  } else if ( 0 < value ) {
    return 'goals';
  } else {
    return 'goals-empty';
  }
}

const GoalsBlock = () => {
  const [ interval, setInterval ] = useState( 5000 );
  const goalId = useDashboardGoalsStore( ( state ) => state.goalId );
  const setGoalId = useDashboardGoalsStore( ( state ) => state.setGoalId );

const goals = useGoalsStore( ( state ) => state.goals );
  const currentDateWithOffset = getDateWithOffset();
  const startDate = format( startOfDay( currentDateWithOffset ), 'yyyy-MM-dd' );
  const endDate = format( endOfDay( currentDateWithOffset ), 'yyyy-MM-dd' );

useEffect( () => {
    if ( ! goalId ) {

//get first entry of the goals array
      let firstGoal = goals.hasOwnProperty( 0 ) ? goals[0] : false;
      if ( firstGoal ) {
        setGoalId( goals[0].id );
      }
    }
  }, [ goals ]);

let goalStart = goals[goalId] && goals[goalId].date_start;
  let goalEnd = goals[goalId] && goals[goalId].date_end;

if ( 0 == goalStart || goalStart === undefined ) {
    goalStart = startDate;
  }
  if ( 0 == goalEnd || goalEnd === undefined ) {
    goalEnd = endDate;
  }

const args = {
    goal_id: goalId,
    startDate: startDate,
    endDate: endDate
  };
  const placeholderData = {
    today: {
      title: __( 'Today', 'burst-statistics' ),
      icon: 'goals'
    },
    total: {
      title: __( 'Total', 'burst-statistics' ),
      value: '-',
      icon: 'goals'
    },
    topPerformer: {
      title: '-',
      value: '-'
    },
    conversionMetric: {
      title: '-',
      value: '-',
      icon: 'visitors'
    },
    conversionPercentage: {
      title: '-',
      value: '-'
    },
    bestDevice: {
      title: '-',
      value: '-',
      icon: 'desktop'
    },
    dateCreated: 0,
    dateStart: 0,
    dateEnd: 0,
    status: 'inactive'
  };

const onGoalsInfoClick = () => {
    return () => {
      burst_settings.goals_information_shown = '1';
      setOption( 'goals_information_shown', true );

// change the #settings/goals to #settings/goals/add
      window.location.hash = '#settings/goals';
    };
  };