import { FontAwesome5 } from '@expo/vector-icons';
import { useNavigation, useRoute } from '@react-navigation/native';
import React, { useLayoutEffect } 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 { NavProps, RouteProps } from '../../../../../../../../components/Routes/Routes';
import { useEventDetail } from '../../../../../../../../hooks/useEvents';
import { useUserInfo } from '../../../../../../../../hooks/useStorage';

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

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

  useLayoutEffect(() => {
    navigation.setOptions({
      title: eventName,
      headerRight: () => {
        if (!detail.isEditable || !isRelation) return null;
        return (
          <View className="flex-row items-center">
            <IconButton
              classNames="mr-2"
              variant="secondary"
              onPress={() => navigation.navigate('EventMessageEdit', { id })}
            >
              <FontAwesome5 name="edit" size={24} />
            </IconButton>
          </View>
        );
      },
    });
  }, [navigation, eventName]);
  return (
    <View className="mx-4 mb-4 flex-1 justify-start bg-primary-bg">
      {!isLoading ? (
        <DetailList
          title={{
            text: 'Zpráva z akce:',
          }}
          items={[
            {
              title: 'Cíl akce:',
              value: detail?.target || ' ',
            },
            {
              title: 'Program akce:',
              value: detail?.program || ' ',
            },
          ]}
        />
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default EventMessage;
