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

import DetailList from '../../../../../../components/List/DetailList';
import MenuList from '../../../../../../components/List/MenuList';
import Loader from '../../../../../../components/Loader/Loader';
import { NavProps, RouteProps } from '../../../../../../components/Routes/Routes';
import { SKAUTIS_CONGRESS_EVENT_REGISTRATION_URL } from '../../../../../../constants/api';
import { getDateAsString } from '../../../../../../helpers/stringHelpers';
import { useCongressDetail } from '../../../../../../hooks/useCongress';
import { useUserInfo } from '../../../../../../hooks/useStorage';
import { openMapApp } from '../../../../../../services/nativeHelpers/openMapApp';
import { openURL } from '../../../../../../services/nativeHelpers/openURL';

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

  const { detail, isLoading } = useCongressDetail(userInfo.token, id);

  const registrationUrl = `${SKAUTIS_CONGRESS_EVENT_REGISTRATION_URL}?ID=${detail?.unitRegistrationId}&ID_Unit=${detail?.unitId}?`;

  useLayoutEffect(() => {
    navigation.setOptions({
      title: eventName,
    });
  }, [navigation, eventName]);
  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      <ScrollView>
        <MenuList
          classNames="mb-4"
          items={[
            {
              title: 'Kandidáti',
              icon: <FontAwesome5 name="users" size={24} />,
              onPress: () => navigation.navigate('CongressCandidates', { id, eventName }),
              disabled: !detail.hasCandidateAccess,
            },
            {
              title: 'Volby',
              icon: <FontAwesome5 name="vote-yea" size={24} />,
              onPress: () => navigation.navigate('CongressVote', { id, eventName }),
              disabled: !detail.hasCandidateAccess,
            },
            {
              title: 'Usnesení',
              icon: <FontAwesome5 name="paragraph" size={24} />,
              onPress: () => navigation.navigate('CongressConclusion', { id, eventName }),
              disabled: !detail.hasDecisionAccess,
            },
          ]}
        />
        {!isLoading ? (
          <View>
            <DetailList
              title={{
                text: 'Sněm',
                icons: [
                  {
                    element: <FontAwesome5 name="map-marked-alt" size={24} />,
                    onPress: () =>
                      openMapApp(
                        detail?.latitude &&
                          detail.longitude &&
                          detail?.latitude !== '0' &&
                          detail?.longitude !== '0'
                          ? `${detail?.latitude}, ${detail.longitude}`
                          : detail?.location || '',
                      ),
                  },
                ],
              }}
              items={[
                {
                  title: 'Typ sněmu:',
                  value: detail?.type,
                },
                {
                  title: 'Stav:',
                  value: detail?.state,
                },
                {
                  title: 'Pořádající jednotka:',
                  value: `${detail?.registrationNumber} - ${detail?.unit}`,
                  classNames: 'text-secondary',
                  onPress: () =>
                    navigation.navigate('UnitInfo', {
                      id: detail?.unitId || '',
                    }),
                },
                ...(detail?.unitRegistration
                  ? [
                      {
                        title: 'Registrace:',
                        value: detail?.unitRegistration,
                        classNames: 'text-secondary',
                        onPress: () => openURL(registrationUrl),
                      },
                    ]
                  : []),
                {
                  title: 'Datum svolání sněmu:',
                  value: getDateAsString(new Date(detail?.promulgationDeadline || '')),
                },
                {
                  title: 'Termín sněmu:',
                  value: `od ${getDateAsString(
                    new Date(detail?.startDate || ''),
                  )} do ${getDateAsString(new Date(detail?.endDate || ''))}`,
                },
                {
                  title: 'Jmenování kandidátní komise:',
                  value: getDateAsString(new Date(detail?.commissionDeadline || '')),
                },
                {
                  title: 'Řádné kandidátky podávat do:',
                  value: getDateAsString(new Date(detail?.candidateDeadline || '')),
                },
                {
                  title: 'Místo konání:',
                  value: detail?.location,
                },
                {
                  title: 'Poznámka:',
                  value: detail?.note || ' ',
                },
              ]}
            />

            {detail?.alternativeLocation && (
              <DetailList
                title={{
                  text: 'Náhradní termín a místo',
                  icons: [
                    {
                      element: <FontAwesome5 name="map-marked-alt" size={24} />,
                      onPress: () =>
                        openMapApp(
                          detail?.alternativeLatitude && detail.alternativeLongitude
                            ? `${detail?.alternativeLatitude}, ${detail.alternativeLongitude}`
                            : detail?.alternativeLocation || '',
                        ),
                    },
                  ],
                }}
                items={[
                  {
                    title: 'Termín sněmu:',
                    value: `od ${getDateAsString(
                      new Date(detail?.alternativeStartDate || ''),
                    )} do ${getDateAsString(new Date(detail?.alternativeEndDate || ''))}`,
                  },
                  {
                    title: 'Místo konání:',
                    value: detail?.location,
                  },
                ]}
              />
            )}

            {detail?.registrationNumber === '1' && (
              <DetailList
                title={{
                  text: 'VSJ',
                }}
                items={[
                  {
                    title: 'Termín zadání příjezdu:',
                    value: getDateAsString(new Date(detail?.arriveDeadline || '')),
                  },
                  {
                    title: 'Termín zadání odjezdu:',
                    value: getDateAsString(new Date(detail?.departureDeadline || '')),
                  },
                  {
                    title: 'Termín zadání dopravního prostředku:',
                    value: getDateAsString(new Date(detail?.transportDeadline || '')),
                  },
                  {
                    title: 'Termín zadání ubytování:',
                    value: getDateAsString(new Date(detail?.accommodationDeadline || '')),
                  },
                  {
                    title: 'Termín zadání jídla:',
                    value: getDateAsString(new Date(detail?.foodDeadline || '')),
                  },
                  {
                    title: 'Poplatek pro účastníka:',
                    value: detail?.participantFee,
                  },
                ]}
              />
            )}
          </View>
        ) : (
          <Loader />
        )}
      </ScrollView>
    </View>
  );
};

export default CongressDetail;
