import { FontAwesome5 } from '@expo/vector-icons';
import { useNavigation, useRoute } from '@react-navigation/native';
import React, { useLayoutEffect, useMemo, 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 InfoModal from '../../../../../../../../components/Modal/InfoModal';
import { NavProps, RouteProps } from '../../../../../../../../components/Routes/Routes';
import { getDateAsString } from '../../../../../../../../helpers/stringHelpers';
import {
  useCampDetail,
  useEventCampUpdateStatePost,
  useEventFunctionAllCamp,
} from '../../../../../../../../hooks/useCamps';
import { useUserInfo } from '../../../../../../../../hooks/useStorage';

const CampState = () => {
  const { id, campName, isRelation } = useRoute<RouteProps<'CampState'>>().params;
  const navigation = useNavigation<NavProps>();
  const [userInfo] = useUserInfo();
  const [isDeletedModalVisible, setIsDeletedModalVisible] = useState(false);
  const [isInfoModalVisible, setIsInfoModalVisible] = useState(false);

  const { detail, isLoading, refetchCampDetail } = useCampDetail(
    userInfo.token,
    userInfo.roleId,
    id,
  );

  const { mutate: updateEvent } = useEventCampUpdateStatePost(
    userInfo.token,
    id,
    refetchCampDetail,
  );

  const { data: functions, isLoading: isFunctionLoading } = useEventFunctionAllCamp(
    userInfo.token,
    userInfo.roleId,
    id,
  );
  const canBeUpdated = useMemo(() => {
    return functions?.every(f => f.name.length);
  }, [functions]);

  useLayoutEffect(() => {
    navigation.setOptions({
      title: campName,
      headerRight: () => {
        if (!isRelation) return null;
        return (
          <View className="flex-row items-center">
            <IconButton
              classNames="mr-2"
              variant="secondary"
              onPress={() =>
                canBeUpdated ? setIsDeletedModalVisible(true) : setIsInfoModalVisible(true)
              }
            >
              <FontAwesome5 name="edit" size={24} />
            </IconButton>
          </View>
        );
      },
    });
  }, [navigation, campName, canBeUpdated, isRelation]);
  return (
    <View className="mx-4 mb-4 flex-1 justify-start bg-primary-bg">
      {!isLoading && !isFunctionLoading ? (
        <DetailList
          title={{
            text: 'Stav a odevzdání',
          }}
          items={[
            {
              title: 'Stav:',
              value: detail?.state,
            },
            ...(detail?.personApproved
              ? [
                  {
                    title: 'Schválil vedoucí:',
                    value: detail?.personApproved,
                  },
                ]
              : []),
            ...(detail?.dateApproved
              ? [
                  {
                    title: 'Datum schválení vedoucím:',
                    value: getDateAsString(new Date(detail?.dateApproved)),
                  },
                ]
              : []),
            ...(detail?.dateApprovedParent
              ? [
                  {
                    title: 'Schválil z pozice střediska:',
                    value: detail?.personApprovedParent,
                  },
                ]
              : []),
            ...(detail?.dateApprovedParent
              ? [
                  {
                    title: 'Datum schválení střediskem:',
                    value: getDateAsString(new Date(detail?.dateApprovedParent)),
                  },
                ]
              : []),
            ...(detail?.dateApprovedExecutive
              ? [
                  {
                    title: 'Datum schválení střediskovou radou:',
                    value: getDateAsString(new Date(detail?.dateApprovedExecutive)),
                  },
                ]
              : []),
            ...(detail?.personReal
              ? [
                  {
                    title: 'Skutečnost odevzdal:',
                    value: detail?.personReal,
                  },
                ]
              : []),
            ...(detail?.dateReal
              ? [
                  {
                    title: 'Datum odevzdání skutečnosti:',
                    value: getDateAsString(new Date(detail?.dateReal)),
                  },
                ]
              : []),
          ]}
        />
      ) : (
        <Loader />
      )}
      <ConfirmationModal
        isVisible={isDeletedModalVisible}
        setIsVisible={setIsDeletedModalVisible}
        title={`${detail?.stateId === 'closed' ? 'Uzavřít' : 'Otevřít'} akci`}
        text={`Opravdu chcete akci ${detail?.displayName} ${
          detail?.stateId === 'closed' ? 'uzavřít' : 'otevřít'
        }?`}
        onConfirm={() => updateEvent(detail.isClosed)}
      />
      <InfoModal
        isVisible={isInfoModalVisible}
        setIsVisible={setIsInfoModalVisible}
        title={`${detail?.stateId === 'closed' ? 'Uzavřít' : 'Otevřít'} akci`}
        text="Nejporve musíte zadat všechny členy týmu."
      />
    </View>
  );
};

export default CampState;
