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

import IconButton from '../../../../../../components/Button/IconButton';
import DetailList from '../../../../../../components/List/DetailList';
import Loader from '../../../../../../components/Loader/Loader';
import ConfirmationModal from '../../../../../../components/Modal/ConfirmationModal';
import { NavProps, RouteProps } from '../../../../../../components/Routes/Routes';
import { useUserInfo } from '../../../../../../hooks/useStorage';
import {
  useUnitAdvertisingCategory,
  useUnitAdvertisingCategoryAll,
  useUnitAdvertisingCategoryDelete,
  useUnitAdvertisingMeetingDateAll,
} from '../../../../../../hooks/useUnitAdvertising';

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

  const [userInfo] = useUserInfo();
  const navigation = useNavigation<NavProps>();
  const [isModalVisible, setIsModalVisible] = useState(false);

  const { refetch: refetchCategories } = useUnitAdvertisingCategoryAll(
    userInfo.token,
    userInfo.unitId,
    true,
  );

  const { data: meetingDates, isLoading: isMeetingDatesLoading } = useUnitAdvertisingMeetingDateAll(
    userInfo.token,
    userInfo.unitId,
    true,
  );

  const { data: category, isLoading: isCategoryLoading } = useUnitAdvertisingCategory(
    userInfo.token,
    id,
  );

  const { mutate: deleteCategory } = useUnitAdvertisingCategoryDelete(
    userInfo.token,
    refetchCategories,
    navigation.goBack,
  );

  const isLoading = isCategoryLoading || isMeetingDatesLoading;

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => {
        return (
          <View className="flex-row items-center">
            <IconButton
              classNames="mr-2"
              variant="secondary"
              onPress={() => navigation.navigate('UnitAdvertisingCategoryEdit', { id })}
            >
              <FontAwesome5 name="edit" size={24} />
            </IconButton>
            <IconButton variant="secondary" onPress={() => setIsModalVisible(true)}>
              <FontAwesome name="trash" size={28} />
            </IconButton>
          </View>
        );
      },
    });
  }, []);

  return (
    <View className="m-4 flex-1 justify-start space-y-4 bg-primary-bg">
      {!isLoading ? (
        <>
          <DetailList
            items={[
              { title: 'Věk od:', value: category?.ageFrom },
              {
                title: 'Věk do:',
                value: category?.ageTo,
              },
              { title: 'Pohlaví:', value: category?.sex },
              {
                title: 'Termín schůzky:',
                value: meetingDates?.find(x => x.id === category?.meetingDateId)?.displayName,
              },
              category?.note
                ? {
                    title: 'Poznámka:',
                    value: category?.note,
                  }
                : undefined,
            ]}
          />
          <ConfirmationModal
            isVisible={isModalVisible}
            setIsVisible={setIsModalVisible}
            title="Smazat kategorii"
            text="Opravdu chcete tuto kategorii smazat? Schůzka bude smazána permanentně."
            onConfirm={() => deleteCategory(id)}
          />
        </>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default UnitAdvertisingCategory;
