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

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 { useCongressVote } from '../../../../../../../../hooks/useCongress';
import { useUserInfo } from '../../../../../../../../hooks/useStorage';

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

  const { maxes, fncCandidates, isLoading } = useCongressVote(userInfo.token, id);

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

  return (
    <View className="mx-4 mb-4 flex-1 justify-start bg-primary-bg">
      {!isLoading ? (
        <ScrollView>
          <Table
            title={{
              text: 'Počet volených osob',
            }}
            header={[
              {
                title: 'Funkce',
                classNames: 'w-[65%]',
              },
              {
                title: 'Volený počet',
                classNames: 'w-[35%] text-right',
              },
            ]}
            items={
              maxes?.map(max => [
                max.type,
                max.count || 'Kvóta zatím nebyla určena, zvolte dostatek delegátů',
              ]) || []
            }
            emptyElement={
              <Text className="mt-4 rounded bg-secondary-bg p-4">
                Není možné zobrazit počet volených osob.
              </Text>
            }
          />

          <Title classNames="mt-4" text="Výsledky voleb" center />

          {Object.entries(fncCandidates).map(([key, values], index) => (
            <Table
              key={index}
              title={{
                text: key,
              }}
              header={[
                {
                  title: 'Kandidát',
                  classNames: 'w-[45%]',
                },
                {
                  title: 'Pořadí',
                  classNames: 'w-[15%]',
                },
                {
                  title: 'Počet hlasů',
                  classNames: 'w-[25%]',
                },
                {
                  title: 'Zvolen',
                  classNames: 'w-[15%] text-right',
                },
              ]}
              items={values?.map(value => [
                value.person,
                value.order,
                value.votesCount,
                value.isElected ? 'Ano' : 'Ne',
              ])}
            />
          ))}
        </ScrollView>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default CongressVote;
