import { FontAwesome5 } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import React, { useLayoutEffect } from 'react';

import IconButton from '../components/Button/IconButton';
import { NavProps } from '../components/Routes/Routes';

export const useFilterButtons = (
  setSortModalVisible: (value: boolean) => void,
  setFilterModalVisible: (value: boolean) => void,
  anotherIcons?: React.ReactNode[],
) => {
  const navigation = useNavigation<NavProps>();
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => {
        return (
          <>
            {anotherIcons}
            <IconButton
              classNames="mr-2"
              variant="secondary"
              onPress={() => setSortModalVisible(true)}
            >
              <FontAwesome5 name="sort-amount-up" size={28} />
            </IconButton>
            <IconButton variant="secondary" onPress={() => setFilterModalVisible(true)}>
              <FontAwesome5 name="filter" size={28} />
            </IconButton>
          </>
        );
      },
    });
  }, []);
};
