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

import { ClickableFlatList } from '../../../../components/List/ClickableList';
import Loader from '../../../../components/Loader/Loader';
import { NavProps } from '../../../../components/Routes/Routes';
import { useUserInfo } from '../../../../hooks/useStorage';
import { useExportPersonAllGet } from '../../../../hooks/useTeplates';

const Templates = () => {
  const navigation = useNavigation<NavProps>();
  const [userInfo] = useUserInfo();

  const { data: templates, isLoading } = useExportPersonAllGet(userInfo.token);

  return (
    <View className="mx-4 mb-4 flex-1 bg-primary-bg">
      {!isLoading ? (
        <>
          <ClickableFlatList
            items={templates?.map(tem => {
              return {
                title: tem.listName,
                onPress: () =>
                  navigation.navigate('TemplateDetail', { id: tem.id, templateName: tem.listName }),
              };
            })}
            emptyElement={
              <Text className="rounded bg-secondary-bg p-4">Nebyly nalezeny žádné zprávy.</Text>
            }
          />
        </>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default Templates;
