import { useNavigation, useRoute } from '@react-navigation/native';
import React, { useLayoutEffect, useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';

import DetailList from '../../../../../../../../components/List/DetailList';
import Title from '../../../../../../../../components/List/components/Title';
import Loader from '../../../../../../../../components/Loader/Loader';
import { NavProps, RouteProps } from '../../../../../../../../components/Routes/Routes';
import TextFieldSelect from '../../../../../../../../components/TextField/TextFieldSelect';
import { FILTER_DEFAULT } from '../../../../../../../../constants/custom';
import {
  useEventEducationCourseAll,
  useEventEducationOtherDetailGet,
  useEventEducationPhotos,
} from '../../../../../../../../hooks/useEducation';
import { useUserInfo } from '../../../../../../../../hooks/useStorage';
import Image from '../../../../../../../../services/ScalableImage/index';
import { openURL } from '../../../../../../../../services/nativeHelpers/openURL';

const EducationOtherDetail = () => {
  const { id, educationName } = useRoute<RouteProps<'EducationOtherDetail'>>().params;
  const [userInfo] = useUserInfo();
  const navigation = useNavigation<NavProps>();
  const [selectedCourse, setSelectedCourse] = useState<string>(FILTER_DEFAULT);

  const { data: courses, isLoading: isCoursesLoading } = useEventEducationCourseAll(
    userInfo?.token,
    id,
  );

  const { data: detailOther, isLoading: isDetailOtherLoading } = useEventEducationOtherDetailGet(
    userInfo?.token,
    id,
    courses?.find(course => course.type === selectedCourse)?.id || '',
  );

  const { images, isLoading: isImagesLoading } = useEventEducationPhotos(
    userInfo?.token,
    id,
    courses?.find(course => course.type === selectedCourse)?.id || '',
  );

  const isLoading = isCoursesLoading || isDetailOtherLoading || isImagesLoading;

  useLayoutEffect(() => {
    navigation.setOptions({
      title: educationName,
    });
  }, [navigation, educationName]);
  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      <ScrollView>
        <TextFieldSelect
          title="Kurz VzA"
          items={[FILTER_DEFAULT, ...(courses?.map(course => course.type) || [])]}
          value={selectedCourse}
          setValue={setSelectedCourse}
        />
        {!isLoading ? (
          <>
            <View className="mb-4">
              <DetailList
                title={{
                  text: 'Další údaje',
                }}
                items={[
                  ...(detailOther?.education
                    ? [
                        {
                          title: 'VzA:',
                          value: detailOther?.education,
                        },
                      ]
                    : []),
                  ...(detailOther?.description
                    ? [
                        {
                          title: 'Krátký popis:',
                          value: detailOther?.description,
                        },
                      ]
                    : []),
                  ...(detailOther?.annotation
                    ? [
                        {
                          title: 'Anotace:',
                          value: detailOther?.annotation,
                        },
                      ]
                    : []),
                  ...(detailOther?.targetGroup
                    ? [
                        {
                          title: 'Cílová skupina:',
                          value: detailOther?.targetGroup,
                        },
                      ]
                    : []),
                  ...(detailOther?.focus
                    ? [
                        {
                          title: 'Zaměření akce:',
                          value: detailOther?.focus,
                        },
                      ]
                    : []),
                  ...(detailOther?.entryConditions
                    ? [
                        {
                          title: 'Vstupní podmínky:',
                          value: detailOther?.entryConditions,
                        },
                      ]
                    : []),
                  ...(detailOther?.graduateConditions
                    ? [
                        {
                          title: 'Podmínky absolvence:',
                          value: detailOther?.graduateConditions,
                        },
                      ]
                    : []),
                  ...(detailOther?.authenticationForm
                    ? [
                        {
                          title: 'Formy ověřování kompetencí:',
                          value: detailOther?.authenticationForm,
                        },
                      ]
                    : []),
                  ...(detailOther?.fee
                    ? [
                        {
                          title: 'Účastnický poplatek:',
                          value: detailOther?.fee,
                        },
                      ]
                    : []),
                  ...(detailOther?.nextOccurrenceYear
                    ? [
                        {
                          title: 'Další plánovaný ročník akce:',
                          value: detailOther?.nextOccurrenceYear,
                        },
                      ]
                    : []),
                  ...(detailOther?.frequency
                    ? [
                        {
                          title: 'Frekvence konání kurzu:',
                          value: detailOther?.frequency,
                        },
                      ]
                    : []),
                  ...(detailOther?.graduates
                    ? [
                        {
                          title: 'Počet absolventů:',
                          value: `${detailOther?.graduates}  `,
                        },
                      ]
                    : []),
                  ...(detailOther?.isChildFriendly
                    ? [
                        {
                          title: 'Akce vhodná pro rodiče s dětmi:',
                          value: 'Ano',
                        },
                      ]
                    : []),
                  ...(detailOther?.isAgeRestricted
                    ? [
                        {
                          title: 'Akce vhodná pro starší 25 let:',
                          value: 'Ano',
                        },
                      ]
                    : []),
                  ...(detailOther?.history
                    ? [
                        {
                          title: 'Historie kurzu:',
                          value: detailOther?.history,
                        },
                      ]
                    : []),
                  ...(detailOther?.photoGallery
                    ? [
                        {
                          title: 'Odkaz na fotogalerii:',
                          value: detailOther?.photoGallery,
                          classNames: 'text-secondary',
                          onPress: () => openURL(detailOther?.photoGallery),
                        },
                      ]
                    : []),
                ]}
              />

              <Title text="Ilustrační fotografie" classNames="my-4" />

              {images?.length ? (
                <View className="grid-cols divide-y divide-divider rounded bg-secondary-bg p-4">
                  {images.map((image, index) => (
                    <View key={index}>
                      {image ? (
                        <TouchableOpacity
                          className="flex items-center justify-center py-2"
                          onPress={() =>
                            navigation.navigate('EducationImage', {
                              imageName: image.displayName,
                              imageContent: image.document,
                            })
                          }
                        >
                          <>
                            {image.documentSmall && (
                              <Image
                                className={`rounded`}
                                source={{ uri: `data:image/png;base64,${image.documentSmall}` }}
                              />
                            )}
                            <Text className="text-center text-primary">{image.displayName}</Text>
                          </>
                        </TouchableOpacity>
                      ) : (
                        <View className="pt-4"></View>
                      )}
                    </View>
                  ))}
                </View>
              ) : (
                <Text className="rounded bg-secondary-bg p-4">Žádná data k zobrazení.</Text>
              )}
            </View>
          </>
        ) : (
          <Loader />
        )}
      </ScrollView>
    </View>
  );
};

export default EducationOtherDetail;
