import {useCallback, useMemo, useState} from 'react';
import {
  View,
  ListRenderItem,
  LayoutChangeEvent,
  useWindowDimensions,
} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {
  Tabs,
  TabItem,
  BottomModalRoot,
  RenderSceneProps,
  BottomModalHeader,
  BottomSheetFlatList,
} from '@components';
import {
  useGetPolicyTypeCycles,
  useGetProjectedBalance,
} from '@modules/timeOff/hooks';
import {
  Unit,
  PolicyTypeCycle,
  ProrationFrequency,
} from '@modules/timeOff/interfaces';
import {SPACING} from '@shared/theme';

import BalanceItem from './components/BalanceItem';
import ProjectedBalance from './components/ProjectedBalance';
import BalanceListHeader from './components/BalanceListHeader';
import {styles} from './styles';

interface Props {
  userId?: number;
  isVisible: boolean;
  onClose: () => void;
  policyTypeId: number;
  policyTypeUnit: Unit;
  prorationFrequency?: ProrationFrequency;
}

const KEYS = {
  CURRENT_BALANCE: 'current_balance',
  PROJECTED_BALANCE: 'projected_balance',
};

function BalanceComposition({
  userId,
  onClose,
  isVisible,
  policyTypeId,
  policyTypeUnit,
  prorationFrequency,
}: Props) {
  const {t} = useTranslation();
  const {top, bottom} = useSafeAreaInsets();
  const {height: windowHeight} = useWindowDimensions();

  const [headerHeight, setHeaderHeight] = useState(0);

  const {policyTypeCycles} = useGetPolicyTypeCycles({policyTypeId, userId});
  const {projectedBalance} = useGetProjectedBalance({policyTypeId, userId});

  const onHeaderLayout = useCallback(
    (e: LayoutChangeEvent) => setHeaderHeight(e.nativeEvent.layout.height),
    [],
  );
  const contentHeight = useMemo(
    () => Math.max(0, windowHeight - top - headerHeight),
    [windowHeight, top, headerHeight],
  );
  const routes: TabItem[] = useMemo(() => {
    const baseRoutes: TabItem[] = [
      {
        key: KEYS.CURRENT_BALANCE,
        label: t('time_off.current_balance'),
      },
    ];

    if (prorationFrequency === ProrationFrequency.EVERY_TWELVE_MONTHS) {
      baseRoutes.push({
        key: KEYS.PROJECTED_BALANCE,
        label: t('time_off.projected_balance'),
      });
    }

    return baseRoutes;
  }, [t, prorationFrequency]);

  const renderItem: ListRenderItem<PolicyTypeCycle> = useCallback(
    ({item, index}) => (
      <BalanceItem
        cycle={item}
        unit={policyTypeUnit}
        isLast={index === policyTypeCycles.length - 1}
      />
    ),
    [policyTypeCycles.length, policyTypeUnit],
  );

  const renderScene = useCallback(
    ({route}: RenderSceneProps) => {
      if (route.key === KEYS.CURRENT_BALANCE) {
        return (
          <BottomSheetFlatList
            data={policyTypeCycles}
            renderItem={renderItem}
            ListHeaderComponent={<BalanceListHeader />}
            paddingBottom={bottom + SPACING['x2.5']}
          />
        );
      } else if (route.key === KEYS.PROJECTED_BALANCE) {
        return <ProjectedBalance balance={projectedBalance} />;
      }
      return null;
    },
    [bottom, policyTypeCycles, renderItem, projectedBalance],
  );

  return (
    <BottomModalRoot
      fullScreen
      onClose={onClose}
      isVisible={isVisible}
      enableContentPanningGesture={false}>
      <View onLayout={onHeaderLayout}>
        <BottomModalHeader
          onClose={onClose}
          style={styles.header}
          title={t('time_off.balance_composition')}
        />
      </View>
      <View style={{height: contentHeight}}>
        <Tabs
          withDivider
          routes={routes}
          swipeEnabled={false}
          renderScene={renderScene}
        />
      </View>
    </BottomModalRoot>
  );
}

export default BalanceComposition;