import React, {useCallback, useMemo, useRef, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {useFocusEffect} from '@react-navigation/native';
import {RenderSceneProps, TabsChips} from '@components';
import {UseGetInfiniteQueryResponse} from '@config/api/interfaces-v5';
import {TimeOffTab, TimeOffRequest} from '@modules/timeOff/interfaces';
import {logAmplitudeEvent} from '@shared/utils';
import {AMPLITUDE_EVENTS} from '@shared/constants';
import {useTheme} from '@shared/theme';

import TabsPlaceholder from '../TabsPlaceholder';
import RequestsList from '../RequestsList';
import CalendarTab from './components/CalendarTab';
import BalanceTab from './components/BalanceTab';

const LazyPlaceholder = () => <TabsPlaceholder />;

interface Props {
  managementRequestsData: UseGetInfiniteQueryResponse<TimeOffRequest>;
  showBalances: boolean;
}

function ManagementTimeOff({managementRequestsData, showBalances}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const isRequestsTabVisited = useRef(false);
  const [tab, setTab] = useState(TimeOffTab.REQUESTS);

  useFocusEffect(
    useCallback(() => {
      if (tab === TimeOffTab.REQUESTS && !isRequestsTabVisited.current) {
        isRequestsTabVisited.current = true;
        logAmplitudeEvent(
          AMPLITUDE_EVENTS.TIME_OFF_MANAGE_REQUESTS_TAB_VISITED,
          {requestCount: managementRequestsData.totalCount},
        );
      }
    }, [managementRequestsData.totalCount, tab]),
  );

  const routes = useMemo(() => {
    return [
      {key: TimeOffTab.REQUESTS, label: t('time_off.requests'), show: true},
      {
        key: TimeOffTab.BALANCES,
        label: t('time_off.balances'),
        show: showBalances,
      },
      {key: TimeOffTab.CALENDAR, label: t('time_off.calendar'), show: true},
    ].filter(({show}) => show);
  }, [showBalances, t]);

  const renderScene = useCallback(
    ({route}: RenderSceneProps) => {
      switch (route.key) {
        case TimeOffTab.REQUESTS:
          return <RequestsList requestsData={managementRequestsData} />;
        case TimeOffTab.BALANCES:
          return <BalanceTab />;
        case TimeOffTab.CALENDAR:
          return <CalendarTab />;
        default:
          return null;
      }
    },
    [managementRequestsData],
  );

  const onPressTab = useCallback(
    (managementTab: string) => setTab(managementTab as TimeOffTab),
    [setTab],
  );

  return (
    <TabsChips
      onTabChange={onPressTab}
      renderScene={renderScene}
      routes={routes}
      renderLazyPlaceholder={LazyPlaceholder}
      swipeEnabled={false}
      tabsBackgroundColor={theme.background.layout.default}
    />
  );
}

export default ManagementTimeOff;