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

import DetailList from '../../../../../../../../../../components/List/DetailList';
import Title from '../../../../../../../../../../components/List/components/Title';
import Loader from '../../../../../../../../../../components/Loader/Loader';
import { NavProps, RouteProps } from '../../../../../../../../../../components/Routes/Routes';
import Table from '../../../../../../../../../../components/Table/Table';
import TextFieldSelect from '../../../../../../../../../../components/TextField/TextFieldSelect';
import {
  useEventDetail,
  useEventEventStatisticAllEventGeneral,
  useEventGeneralUpdateStatisticAutoComputedPost,
} from '../../../../../../../../../../hooks/useEvents';
import { useUserInfo } from '../../../../../../../../../../hooks/useStorage';

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

  const { data: stats, isLoading } = useEventEventStatisticAllEventGeneral(userInfo.token, id);
  const { detail, refetch } = useEventDetail(userInfo.token, id);
  const modalArray = ['Ano', 'Ne'];
  const [autoCompute, setAutoCompute] = useState(detail?.isStatisticAutoComputed ? 'Ano' : 'Ne');
  const { mutate: updateAutoCompute } = useEventGeneralUpdateStatisticAutoComputedPost(
    userInfo.token,
    id,
    refetch,
  );

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

  useEffect(() => {
    if (hasAccess && detail.isEditable) {
      updateAutoCompute(autoCompute === 'Ano');
    }
  }, [autoCompute]);

  return (
    <View className="mx-4 mb-4 flex-1 justify-start bg-primary-bg">
      {!isLoading ? (
        <ScrollView>
          {hasAccess && detail.isEditable && (
            <View className="mt-4">
              <TextFieldSelect
                title="Automaticky vyplnit tabulku počtů podle seznamu účastníků"
                items={modalArray}
                value={autoCompute}
                setValue={setAutoCompute}
              />
            </View>
          )}

          <DetailList
            title={{
              text: 'Celkový počet účastníků',
            }}
            items={[
              { title: 'Celkový počet všech osob', value: detail?.totalParticipants },
              { title: 'Z toho zahraničních účastníků', value: detail?.foreignParticipants },
              { title: 'Z toho vedoucích', value: detail?.leaderParticipants },
              { title: 'Z toho rádců a pomáhajících roverů', value: detail?.assistantParticipants },
              {
                title: 'Automaticky spočítat deťodny a osobodny',
                value: detail?.isAutoComputedDays ? 'Ano' : 'Ne',
              },
              { title: 'Děťodny', value: detail?.childDays },
              { title: 'Osobodny', value: detail?.personDays },
            ]}
          />
          <Title classNames="mt-4" text="Počty účastníků podle kategorií" />
          <Table
            header={[
              {
                title: 'Věková kategorie',
                classNames: 'w-1/2',
              },
              {
                title: 'Počet účastníků',
                classNames: 'w-1/2 text-right',
              },
            ]}
            items={(stats || []).map(item => [item.category, item.count])}
            emptyElement={
              <Text className="mt-4 rounded bg-secondary-bg p-4">
                Danná akce nemá žádné statistiky.
              </Text>
            }
          />
        </ScrollView>
      ) : (
        <Loader />
      )}
      {/* <SelectModal
        items={modalArray}
        title="Automaticky vyplnit tabulku počtů podle seznamu účastníků"
        itemGetter={item => item}
        isVisible={isVisible}
        setIsVisible={setIsVisible}
        selected={
          modalArray.find(item => item === 'Ano' && detail?.isStatisticAutoComputed === true) ||
          modalArray.find(item => item === 'Ne')
        }
        setSelected={role => {
          updateRole(role.id);
        }}
      /> */}
    </View>
  );
};

export default EventParticipantsStats;
