import { useNavigation, useRoute } from '@react-navigation/native';
import React, { useLayoutEffect } from 'react';
import { View, Text } from 'react-native';

import Loader from '../../../../../../../../../../components/Loader/Loader';
import { NavProps, RouteProps } from '../../../../../../../../../../components/Routes/Routes';
import Table from '../../../../../../../../../../components/Table/Table';
import {
  CampParticipantsCountCategories,
  CampStatisticGroups,
} from '../../../../../../../../../../constants/custom';
import { useCampStatistics } from '../../../../../../../../../../hooks/useCamps';
import { useUserInfo } from '../../../../../../../../../../hooks/useStorage';
import { EventCampStatisticDetailResponse } from '../../../../../../../../../../services/api/APIS/Events/types';

const CampParticipantsStats = () => {
  const { id, campName } = useRoute<RouteProps<'CampParticipantsStats'>>().params;
  const navigation = useNavigation<NavProps>();
  const [userInfo] = useUserInfo();

  const { statistics, estimate, detail, isLoading } = useCampStatistics(userInfo.token, id);

  useLayoutEffect(() => {
    navigation.setOptions({
      title: campName,
    });
  }, [navigation, campName]);

  return (
    <View className="mx-4 mb-4 flex-1 justify-start bg-primary-bg">
      {!isLoading ? (
        <Table
          header={[
            {
              title: 'Kategorie',
              classNames: 'w-1/2',
            },
            {
              title: 'Předpoklad',
              classNames: 'w-1/4 text-right',
            },
            {
              title: 'Skutečnost',
              classNames: 'w-1/4 text-right',
            },
          ]}
          items={[
            [
              CampParticipantsCountCategories[0],
              detail?.estimateAdult || '',
              detail?.realAdult || '',
            ],
            [
              CampParticipantsCountCategories[1],
              detail?.estimateCount || '',
              detail?.realCount || '',
            ],
            [
              CampParticipantsCountCategories[2],
              detail?.estimateChildDays || '',
              detail?.realChildDays || '',
            ],
            [
              CampParticipantsCountCategories[3],
              detail?.estimatePersonDays || '',
              detail?.realPersonDays || '',
            ],
            ...Object.keys(statistics || {})?.map((type, index) => [
              CampStatisticGroups[type as keyof EventCampStatisticDetailResponse],
              estimate?.[type as keyof EventCampStatisticDetailResponse] || '0',
              statistics?.[type as keyof EventCampStatisticDetailResponse] || '0',
            ]),
          ]}
          emptyElement={
            <Text className="mt-4 rounded bg-secondary-bg p-4">
              Danný tábor nemá žádné statistiky.
            </Text>
          }
        />
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default CampParticipantsStats;
