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

import Button from '../../../../../../components/Button/Button';
import DetailList from '../../../../../../components/List/DetailList';
import Loader from '../../../../../../components/Loader/Loader';
import { NavProps, RouteProps } from '../../../../../../components/Routes/Routes';
import { SKAUTIS_EDU_EVENT_ENROLL_URL } from '../../../../../../constants/api';
import { getDateAsString } from '../../../../../../helpers/stringHelpers';
import {
  useEducationApplication,
  useEventEducationDetail,
} from '../../../../../../hooks/useEducation';
import { useUserInfo } from '../../../../../../hooks/useStorage';
import { openURL } from '../../../../../../services/nativeHelpers/openURL';
import { sendEmail } from '../../../../../../services/nativeHelpers/sendEmail';

const EducationApplication = () => {
  const { id, educationName } = useRoute<RouteProps<'EducationApplication'>>().params;
  const [userInfo] = useUserInfo();
  const navigation = useNavigation<NavProps>();

  const { data: application, isLoading: isApplicationLoading } = useEducationApplication(
    userInfo.token,
    userInfo.personId,
    id,
  );

  const { data: detail, isLoading: isDetailLoading } = useEventEducationDetail(userInfo.token, id);

  const isLoading = isApplicationLoading || isDetailLoading;

  const openWeb = async () => {
    const skuatIsUrl = `${SKAUTIS_EDU_EVENT_ENROLL_URL}?ID_EventEducationCourse=${application.id}&ID_EventEducation=${id}`;
    let url =
      !detail?.loginLocation.length || detail.loginSkautis ? skuatIsUrl : detail?.loginLocation;
    if (!url.startsWith('http://') && !url.startsWith('https://')) {
      url = 'http://' + url;
    }
    await openURL(url);
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      title: `Přihláška na akci ${educationName}`,
    });
  }, [navigation, educationName]);

  return (
    <ScrollView className="mx-4 mb-4 flex-1 bg-primary-bg">
      {!isLoading ? (
        <>
          <DetailList
            title={{
              text: 'Informace o vzdělávací akci',
            }}
            items={[
              { title: 'Název akce:', value: application?.displayName },
              { title: 'Kurz:', value: application?.type },
              { title: 'Pořadatel akce:', value: application?.organization },
              {
                title: `Přihlašování${application?.loginFrom.length ? ' začne' : ''}`,
                value: application?.loginFrom
                  ? getDateAsString(new Date(application?.loginFrom), true)
                  : 'Bez omezení',
              },
              ...(application?.loginTo.length
                ? [
                    {
                      title: 'Přihlašování končí',
                      value: getDateAsString(new Date(application?.loginTo), true),
                    },
                  ]
                : []),
            ]}
          />

          <DetailList
            title={{
              text: 'Informace o osobě',
            }}
            items={[
              { title: 'Jméno:', value: application?.person },
              { title: 'Rodné číslo:', value: application?.personIdentificationCode },
              { title: 'Člen střediska:', value: application?.personUnit },
              { title: 'Bydliště:', value: application?.personAddress },
              {
                title: 'Email:',
                value: application?.personEmail,
                classNames: 'text-secondary',
                onPress: () => sendEmail(application?.personEmail),
              },
              {
                title: 'Telefon:',
                value: application?.personPhone.replace(/(\d{3})(\d{3})(\d{3})/, `+$1 $2 $3`),
              },
            ]}
          />

          {(application?.isVerdictAreaRequired ||
            application?.isVerdictDistrictRequired ||
            application?.isVerdictGroupRequired ||
            application?.isVerdictHealthRequired) && (
            <View className="mt-4 flex-row space-x-2 pr-6">
              <Text className="text-primary">
                <FontAwesome5 name="info-circle" size={24} />
              </Text>
              <Text className="text-md">
                Nejpozději do termínu konání poslední části této vzdělávací akce (případně dle
                instrukcí pořadatele) je nutné doložit níže uvedená vyjádření a souhlasy.
              </Text>
            </View>
          )}

          {application?.isVerdictGroupRequired && (
            <DetailList
              title={{
                text: 'Vyjádření vedoucího oddílu',
              }}
              items={[
                {
                  title: 'Jméno',
                  value: application?.personVerdictGroup || ' ',
                },
                {
                  title: 'Datum',
                  value: application?.dateVerdictGroup
                    ? getDateAsString(new Date(application?.dateVerdictGroup))
                    : 'Zatím nepotvrzeno',
                },
                {
                  title: 'Vyjádření',
                  value: application?.verdictGroup || ' ',
                },
              ]}
            />
          )}

          {application?.isVerdictDistrictRequired && (
            <DetailList
              title={{
                text: 'Vyjádření vedoucího střediska',
              }}
              items={[
                {
                  title: 'Jméno',
                  value: application?.personVerdictDistrict || ' ',
                },
                {
                  title: 'Datum',
                  value: application?.dateVerdictDistrict
                    ? getDateAsString(new Date(application?.dateVerdictDistrict))
                    : 'Zatím nepotvrzeno',
                },
                {
                  title: 'Vyjádření',
                  value: application?.verdictDistrict || ' ',
                },
              ]}
            />
          )}

          {application?.isVerdictAreaRequired && (
            <DetailList
              title={{
                text: 'Vyjádření vedoucího střediska',
              }}
              items={[
                {
                  title: 'Jméno',
                  value: application?.personVerdictArea || ' ',
                },
                {
                  title: 'Datum',
                  value: application?.dateVerdictArea
                    ? getDateAsString(new Date(application?.dateVerdictArea))
                    : 'Zatím nepotvrzeno',
                },
                {
                  title: 'Vyjádření',
                  value: application?.verdictArea || ' ',
                },
              ]}
            />
          )}

          {application?.isVerdictHealthRequired && (
            <DetailList
              title={{
                text: 'Potvrzení lékaře o zdravotní způsobilosti pro práci s dětmi',
              }}
              items={[
                {
                  title: 'Jméno lékaře',
                  value: application?.personVerdictHealth || ' ',
                },
                {
                  title: 'Datum',
                  value: application?.dateVerdictHealth
                    ? getDateAsString(new Date(application?.dateVerdictHealth))
                    : 'Zatím nepotvrzeno',
                },
                {
                  title: 'Sken potvrzení:',
                  value: application?.verdictHealthDocumentId
                    ? 'Nahrán, ale dá se stáhnout pouze přes SkautIs web'
                    : 'Zatím nenahráno',
                },
              ]}
            />
          )}

          <View className="mt-4 flex-row space-x-2 pr-6">
            <Text className="text-primary">
              <FontAwesome5 name="info-circle" size={24} />
            </Text>
            <Text className="text-md">Další informace najdete přes webové rozhraní.</Text>
          </View>

          <Button variant="primary" classNames="mt-4" onPress={() => openWeb()}>
            Otevřít v SkautIS
          </Button>
        </>
      ) : (
        <Loader />
      )}
    </ScrollView>
  );
};

export default EducationApplication;
