import React, {useCallback, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {ImageBackground} from 'expo-image';
import {
  Gradient,
  Title,
  PublishPostButton,
  PublishPostDialog,
  PublishPostValues,
} from '@components';
import {useModalHandler} from '@hooks/useModalHandler';
import {Navigation} from '@interfaces/navigation';
import {EventPost} from '@modules/events/interfaces';
import EventDetailSk from '@modules/events/components/EventDetailSk';
import {useEventListeners} from '@modules/events/hooks/useEventListeners';
import {useGetEventData} from '@modules/events/hooks/useGetEventData';
import {useEventPostCreateEdit} from '@modules/events/store/useEventPostsStore';
import {showSnackbar} from '@redux/dispatchers';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import AudienceSection from './components/AudienceSection';
import DetailSection from './components/DetailSection';
import FeedSection from './components/FeedSection';
import HeaderSection from './components/HeaderSection';
import InvitationsListDialog from './components/InvitationsListDialog';
import EventOptionsDialog from './components/EventOptionsDialog';
import PostOptionsDialog from './components/PostOptionsDialog';
import OrganizedBySection from './components/OrganizedBySection';
import {styles, getGradientColors} from './styles';

function EventDetail({
  route: {
    params: {eventId, source},
  },
}: Navigation<Screens.EVENT_DETAIL>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const gradientColors = useMemo(
    () => getGradientColors(theme.background.elements.grey),
    [theme.background.elements.grey],
  );
  const [selectedPost, setSelectedPost] = useState<Nullable<EventPost>>(null);
  const {
    isVisible: showPublishDialog,
    onCloseModal: onClosePublishDialog,
    onOpenModal: onOpenPublishDialog,
  } = useModalHandler();
  const {
    isVisible: showInvitationsDialog,
    onCloseModal: onCloseInvitationsDialog,
    onOpenModal: onOpenInvitationsDialog,
  } = useModalHandler();
  const {
    acceptedInvitations,
    audienceStats,
    event,
    isLoading,
    isPastEvent,
    withEventActions,
    withExtraActions,
    isOrgByMe,
  } = useGetEventData(eventId, source);

  useEventListeners();

  const onClosePostOptionsDialog = useCallback(() => setSelectedPost(null), []);

  const {createPost, editPost, isCreating, isEditing} =
    useEventPostCreateEdit();

  const onPublish = useCallback(
    async (publishPostValues: PublishPostValues) => {
      const commonProps = {...publishPostValues, eventId};
      try {
        if (selectedPost) {
          await editPost({
            ...commonProps,
            postId: selectedPost.id,
            commentsEnabled: selectedPost.commentsEnabled,
          });
          onClosePostOptionsDialog();
          showSnackbar({title: t('events.post_edited'), variant: 'success'});
        } else {
          await createPost(commonProps);
        }
        onClosePublishDialog();
      } catch {
        showSnackbar({title: t('events.post_error_editing'), variant: 'error'});
      }
    },
    [
      eventId,
      selectedPost,
      createPost,
      editPost,
      onClosePublishDialog,
      onClosePostOptionsDialog,
      t,
    ],
  );

  return isLoading || !event ? (
    <EventDetailSk />
  ) : (
    <>
      <FeedSection
        eventId={eventId}
        onPressPostOptions={setSelectedPost}
        withPostOptions={withEventActions}
        ListHeaderComponent={
          <>
            {event.coverPictureUrl && (
              <ImageBackground
                source={{uri: event.coverPictureUrl}}
                style={styles.image}>
                <Gradient
                  start={{x: 0, y: 0.5}}
                  end={{x: 0, y: 1}}
                  colors={gradientColors}
                  style={styles.linearGradient}
                />
              </ImageBackground>
            )}
            <View style={styles.contentContainer}>
              <HeaderSection event={event} isPastEvent={isPastEvent} />
              <DetailSection
                acceptedInvitations={acceptedInvitations}
                event={event}
                onPressInvitations={onOpenInvitationsDialog}
              />
              <OrganizedBySection eventOrganizer={event.user} />
              <AudienceSection
                canInvite={withExtraActions}
                eventAudience={audienceStats}
                event={event}
                onPressInvitations={onOpenInvitationsDialog}
              />
            </View>
            <Title
              title={t('events.event_feed')}
              size="l"
              style={styles.feedTitle}
            />
            {withEventActions && (
              <PublishPostButton onPress={onOpenPublishDialog} />
            )}
          </>
        }
      />
      <EventOptionsDialog
        event={event}
        isPastEvent={isPastEvent}
        isOrgByMe={isOrgByMe}
        canManageEvent={withEventActions}
      />
      <InvitationsListDialog
        canDelete={withExtraActions}
        eventId={event.id}
        eventUserId={event.userId}
        onCloseModal={onCloseInvitationsDialog}
        showModal={showInvitationsDialog}
      />
      {showPublishDialog && (
        <PublishPostDialog
          isPublishing={isCreating || isEditing}
          onCloseDialog={onClosePublishDialog}
          onPublishPost={onPublish}
          postToEdit={selectedPost}
        />
      )}
      {!!selectedPost && (
        <PostOptionsDialog
          onEditPost={onOpenPublishDialog}
          onCloseDialog={onClosePostOptionsDialog}
          post={selectedPost}
        />
      )}
    </>
  );
}

export default EventDetail;