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 {
  useUnitAdvertisingMeetingDate,
  useUnitAdvertisingMeetingDateAll,
  useUnitAdvertisingMeetingDateDelete,
  useUnitPlaces,
} from '../../../../../../hooks/useUnitAdvertising';

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

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

  const { refetch: refetchMeetingDates } = useUnitAdvertisingMeetingDateAll(
    userInfo.token,
    userInfo.unitId,
    true,
  );

  const { data: meetingDate, isLoading: isMeetingDateLoading } = useUnitAdvertisingMeetingDate(
    userInfo.token,
    id,
  );
  const { places, isLoading: isPlacesLoading } = useUnitPlaces(userInfo.token, userInfo.unitId);

  const { mutate: deleteMeetingDate } = useUnitAdvertisingMeetingDateDelete(
    userInfo.token,
    refetchMeetingDates,
    navigation.goBack,
  );

  const isLoading = isMeetingDateLoading || isPlacesLoading;

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => {
        return (
          <View className="flex-row items-center">
            <IconButton
              classNames="mr-2"
              variant="secondary"
              onPress={() => navigation.navigate('UnitAdvertisingMeetingDateEdit', { 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: 'Den v týdnu:', value: meetingDate?.weekDay },
              {
                title: 'Čas začátku:',
                value: meetingDate?.timeFrom.toTimeString().substring(0, 5),
              },
              { title: 'Čas konce:', value: meetingDate?.timeTo.toTimeString().substring(0, 5) },
              { title: 'Pravidelnost:', value: meetingDate?.periodicity },
              meetingDate?.occupationId
                ? {
                    title: 'Rodné číslo:',
                    value: places.find(place => place.id === meetingDate?.occupationId)
                      ?.displayName,
                  }
                : undefined,
            ]}
          />
          <ConfirmationModal
            isVisible={isModalVisible}
            setIsVisible={setIsModalVisible}
            title="Smazat schůzku"
            text="Opravdu chcete tuto schůzku smazat? Schůzka bude smazána permanentně."
            onConfirm={() => deleteMeetingDate(id)}
          />
        </>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default UnitAdvertisingMeetingDate;
