import { FontAwesome } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import React, { useState } from 'react';
import { View, Text } from 'react-native';

import { ClickableFlatList } from '../../../../components/List/ClickableList';
import Loader from '../../../../components/Loader/Loader';
import SortingModal from '../../../../components/Modal/SortingModal';
import { NavProps } from '../../../../components/Routes/Routes';
import TagGroup from '../../../../components/TagGroup/TagGroup';
import { FILTER_ALL } from '../../../../constants/custom';
import {
  PERSON_SORTING,
  SORT_DIRECTION,
  SORT_DIRECTION_TAG,
  SORT_TAG,
} from '../../../../constants/sorting';
import { useFilterButtons } from '../../../../hooks/useFilterButtons';
import { useSearchPersonList, useSearchPersonTypes } from '../../../../hooks/useSearchPerson';
import useSortList from '../../../../hooks/useSortList';
import { useUserInfo } from '../../../../hooks/useStorage';
import PersonFilterModal from './components/PersonFilterModal';

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

  const { data: types, isLoading: isLoadingTypes } = useSearchPersonTypes(userInfo.token);

  const [name, setName] = useState('');
  const [searchInUnits, setSearchInUnits] = useState(true);
  const [searchInCatalog, setSearchInCatalog] = useState(false);
  const [type, setType] = useState(FILTER_ALL);
  const [filterModalVisible, setFilterModalVisible] = useState(false);
  const [sortModalVisible, setSortModalVisible] = useState(false);

  useFilterButtons(setSortModalVisible, setFilterModalVisible);

  const { list, isLoading } = useSearchPersonList(
    userInfo.token,
    name,
    types?.find(t => t.displayName === type)?.id ?? '',
    searchInUnits,
    searchInCatalog,
  );

  const [sort, setSort] = useState(PERSON_SORTING[0].label);
  const [sortDirection, setSortDirection] = useState(SORT_DIRECTION[0].label);
  const sortedList = useSortList(list || [], sortDirection, sort, PERSON_SORTING);

  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      <TagGroup
        items={[
          `${SORT_TAG} ${PERSON_SORTING.find(s => s.label === sort)?.displayName ?? ''}`,
          `${SORT_DIRECTION_TAG} ${sortDirection}`,
          ...(name.length ? [`Jméno: ${name}`] : []),
          ...(searchInUnits ? ['Hledání v jednotkách'] : []),
          ...(searchInCatalog ? ['Hledání v adresáři'] : []),
          ...(type !== FILTER_ALL ? [`Činnost: ${type}`] : []),
        ]}
      />
      {!isLoading || isLoadingTypes ? (
        <View className="flex-1">
          <ClickableFlatList
            items={sortedList?.map(person => {
              return {
                title: person.displayName,
                titleIcon: person.isFromCatalog ? (
                  <FontAwesome name="address-book-o" size={20} />
                ) : null,
                onPress: () =>
                  navigation.navigate('PersonDetail', {
                    id: person.id,
                    isFromCatalog: person.isFromCatalog,
                  }),
              };
            })}
            emptyElement={
              <Text className="rounded bg-secondary-bg p-4">
                Pro danná kritéria nebyly nalezeny žádné osoby.
              </Text>
            }
          />
        </View>
      ) : (
        <Loader />
      )}
      <SortingModal
        isVisible={sortModalVisible}
        setIsVisible={setSortModalVisible}
        values={PERSON_SORTING}
        selectedValue={sort}
        setSelectedValue={setSort}
        selectedDirection={sortDirection}
        setSelectedDirection={setSortDirection}
      />
      <PersonFilterModal
        isVisible={filterModalVisible}
        setIsVisible={setFilterModalVisible}
        name={name}
        setName={setName}
        searchInUnits={searchInUnits}
        setSearchInUnits={setSearchInUnits}
        searchInCatalog={searchInCatalog}
        setSearchInCatalog={setSearchInCatalog}
        type={type}
        setType={setType}
      />
    </View>
  );
};

export default SearchPerson;
