import {useLayoutEffect} from 'react';
import {View} from 'react-native';
import {useModuleName} from '@hooks/useModuleName';
import {useQuery} from '@hooks/queries-v5/useQuery';
import {Navigation} from '@interfaces/navigation';
import {TIME_OFF_QUERY_KEYS} from '@modules/timeOff/constants';
import {getFemsaBalance} from '@modules/timeOff/services';
import {Screens} from '@shared/constants';
import {capitalize} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import PolicyType from './components/PolicyType';
import PolicyTypeSkeleton from './components/PolicyTypeSkeleton';

function TimeOffFemsa({navigation}: Navigation<Screens.TIME_OFF_FEMSA>) {
  const {theme} = useTheme();

  const moduleName = useModuleName({moduleName: 'TIME_OFF'});
  const {data, isLoading, isError} = useQuery(
    TIME_OFF_QUERY_KEYS.femsaBalance,
    getFemsaBalance,
  );

  useLayoutEffect(() => {
    if (moduleName) {
      navigation.setOptions({title: capitalize(moduleName, false)!});
    }
  }, [moduleName, navigation]);

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      {isLoading ? (
        <PolicyTypeSkeleton />
      ) : (
        <PolicyType isError={isError} balance={data?.totalBalance} />
      )}
    </View>
  );
}

export default TimeOffFemsa;