import { useRoute } from '@react-navigation/native';
import React, { useEffect, 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 { RouteProps } from '../../../../components/Routes/Routes';
import Table from '../../../../components/Table/Table';
import TextFieldSelect from '../../../../components/TextField/TextFieldSelect';
import { useUserInfo } from '../../../../hooks/useStorage';
import { useUnitStats, useUnitStatsYears } from '../../../../hooks/useUnitRegistration';

const UnitRegistration = () => {
  const { id } = useRoute<RouteProps<'UnitRegistration'>>().params;

  const [userInfo] = useUserInfo();
  const { years, registration, isLoading: isYearsLoading } = useUnitStatsYears(userInfo.token, id);
  const [selectedYear, setSelectedYear] = useState(years[0]);
  const {
    units,
    restrictions,
    ages,
    membersSum,
    isLoading: isStatsLoading,
  } = useUnitStats(userInfo.token, registration?.find(y => y.year === selectedYear)?.id);

  useEffect(() => {
    setSelectedYear(years[0]);
  }, [years]);

  const getEmptyState = (text: string) => (
    <Text className="mt-4 rounded bg-secondary-bg p-2">{text}</Text>
  );

  return (
    <View className="m-4 flex-1 bg-primary-bg">
      {!isYearsLoading ? (
        <ScrollView>
          <Title classNames="mb-4" text="Filtr" />
          <View className="space-y-2 rounded bg-secondary-bg p-4">
            <TextFieldSelect
              title="Jednotka"
              items={years}
              value={selectedYear}
              setValue={setSelectedYear}
            />
          </View>
          {!isStatsLoading ? (
            <>
              <DetailList
                title={{
                  text: 'Podřízené jednotky',
                }}
                items={units?.map(unit => ({
                  title: unit.type,
                  value: `${unit.count}`,
                }))}
                emptyElement={getEmptyState('Nepodařilo se získat data pro statistiky jednotky.')}
              />

              <DetailList
                title={{
                  text: 'Počty registrovaných členů',
                }}
                items={
                  !membersSum
                    ? []
                    : [
                        {
                          title: 'Členů této jednotky',
                          value: `${membersSum?.fHMembers}`,
                        },
                        {
                          title: 'Řádných a čestných členů',
                          value: `${membersSum?.members}`,
                        },
                      ]
                }
                emptyElement={getEmptyState('Nepodařilo se získat data pro statistiky členů.')}
              />

              <Table
                title={{
                  text: 'Počty členů podle výchovné struktury',
                }}
                header={[
                  {
                    title: 'Výchovná struktura',
                    classNames: 'w-1/2',
                  },
                  {
                    title: 'ČJ',
                    classNames: 'w-1/4 text-right',
                  },
                  {
                    title: 'ŘČČ',
                    classNames: 'w-1/4 text-right',
                  },
                ]}
                items={Object.keys(restrictions)?.map(type => [
                  type,
                  restrictions[type].members,
                  restrictions[type].fHMembers,
                ])}
                footer={
                  <View>
                    <Text>ČJ - Členů této jednotky (bez hostování)</Text>
                    <Text>ŘČČ - Řádných a čestných členů (bez hostů)</Text>
                  </View>
                }
                emptyElement={getEmptyState('Nepodařilo se získat data pro statistiky členů.')}
              />

              <Table
                title={{
                  text: 'Počty členů podle věkové struktury',
                }}
                header={[
                  {
                    title: 'Věk',
                    classNames: 'w-1/2',
                  },
                  {
                    title: 'ČJ',
                    classNames: 'w-1/4 text-right',
                  },
                  {
                    title: 'ŘČČ',
                    classNames: 'w-1/4 text-right',
                  },
                ]}
                items={Object.keys(ages)?.map(type => [
                  type,
                  ages[type].members,
                  ages[type].fHMembers,
                ])}
                footer={
                  <View>
                    <Text>ČJ - Členů této jednotky (bez hostování)</Text>
                    <Text>ŘČČ - Řádných a čestných členů (bez hostů)</Text>
                  </View>
                }
                emptyElement={getEmptyState('Nepodařilo se získat data pro statistiky členů.')}
              />
            </>
          ) : (
            <Loader />
          )}
        </ScrollView>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default UnitRegistration;
