import { useNavigation, useRoute } from '@react-navigation/native';
import React, { useLayoutEffect } from 'react';
import { View, Text } 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 { useEventCongressDecisionAll } from '../../../../../../../../hooks/useCongress';
import { useUserInfo } from '../../../../../../../../hooks/useStorage';

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

  const { data: conclusions, isLoading } = useEventCongressDecisionAll(userInfo.token, id);

  const suggested = conclusions?.filter(item => item && item.suggester.length);
  const notSuggested = conclusions?.filter(item => !item || !item.suggester.length);

  useLayoutEffect(() => {
    navigation.setOptions({
      title: eventName,
    });
  }, [navigation, eventName]);
  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      {!isLoading ? (
        <>
          <Title text="Usnesení předložená sněmu" center />
          {suggested?.length ? (
            <>
              {suggested?.map((item, index) => (
                <DetailList
                  key={index}
                  items={[
                    {
                      title: 'Předkladatel:',
                      value: item.suggester,
                    },
                    {
                      title: 'Typ usnesení:',
                      value: item.decisionType,
                    },
                    {
                      title: 'Text usnesení:',
                      value: item.text,
                    },
                    {
                      title: 'Zdůvodnění:',
                      value: item.decision,
                    },
                  ]}
                />
              ))}
            </>
          ) : (
            <Text className="mt-4 rounded bg-secondary-bg p-4">
              Nebyla předložena žádná usnesení.
            </Text>
          )}

          <Title classNames="mt-4" text="Sněmem přijatá usnesení" center />
          {notSuggested?.length ? (
            <>
              {notSuggested?.map((item, index) => (
                <DetailList
                  key={index}
                  items={[
                    {
                      title: 'Zaměření:',
                      value: item.type,
                    },
                    {
                      title: 'Typ usnesení:',
                      value: item.decisionType,
                    },
                    {
                      title: 'Text usnesení:',
                      value: item.text,
                    },
                    {
                      title: 'Zdůvodnění:',
                      value: item.decision,
                    },
                  ]}
                />
              ))}
            </>
          ) : (
            <Text className="mt-4 rounded bg-secondary-bg p-4">Nebyla přijata žádná usnesení.</Text>
          )}
        </>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default CongressConclusion;
