import React, {memo, useCallback, useState} from 'react';
import {View} from 'react-native';
import {FormProvider, useForm} from 'react-hook-form';
import {KeyboardAvoidingView} from 'react-native-keyboard-controller';
import {BasePost} from '@components/_custom/Post';
import {Dialog} from '@components/_HuGo/Dialog';
import {useBackHandler} from '@hooks/useBackHandler';

import {PreventExitDialog} from './components/PreventExitDialog';
import {PublishAttachments} from './components/PublishAttachments';
import {PublishHeader} from './components/PublishHeader';
import {PublishInputController} from './components/PublishInput';
import {PublishOptions} from './components/PublishOptions';
import {PublishPostValues} from './interfaces';
import {styles} from './styles';
import {getBaseEventPost} from './utils';

interface Props {
  isPublishing: boolean;
  onCloseDialog: () => void;
  onPublishPost: (post: PublishPostValues) => void;
  postToEdit: Nullable<BasePost>;
}

function PublishPostDialogComponent({
  isPublishing,
  onCloseDialog,
  onPublishPost,
  postToEdit,
}: Props) {
  const [showPreventExit, setShowPreventExit] = useState(false);
  const [isUploadingAttachment, setIsUploadingAttachment] = useState(false);
  const isLoading = isPublishing || isUploadingAttachment;

  const methods = useForm<PublishPostValues>({
    defaultValues: getBaseEventPost(postToEdit),
    shouldUnregister: false,
  });
  const {handleSubmit, formState} = methods;

  const onGoBack = useCallback(() => {
    formState.isDirty ? setShowPreventExit(true) : onCloseDialog();
    return true;
  }, [formState.isDirty, onCloseDialog]);

  useBackHandler(onGoBack);

  const onCancelExit = useCallback(() => setShowPreventExit(false), []);

  const onConfirmExit = useCallback(() => {
    setShowPreventExit(false);
    // Delay to prevent overlapping dialogs closing
    setTimeout(onCloseDialog, 250);
  }, [onCloseDialog]);

  const onPublish = useCallback(
    (publishPostValues: PublishPostValues) => {
      onPublishPost(publishPostValues);
    },
    [onPublishPost],
  );

  return (
    <Dialog fullScreen locked isVisible withCloseButton={false}>
      <FormProvider {...methods}>
        <View style={styles.container}>
          <KeyboardAvoidingView
            behavior="height"
            // TODO: Fixed floating PublishOptions + KeyboardAvoidingView activated
            // keyboardVerticalOffset={75}
            style={styles.contentContainer}>
            <PublishHeader
              disabled={!formState.isDirty || isLoading}
              isEditing={!!postToEdit}
              isLoading={isLoading}
              onBackPress={onGoBack}
              onPublishPress={handleSubmit(onPublish)}
            />
            <PublishInputController isEditing={!!postToEdit} />
            <PublishAttachments />
          </KeyboardAvoidingView>
          <PublishOptions onSetUploadingAttachment={setIsUploadingAttachment} />
        </View>
        <PreventExitDialog
          onCancelExit={onCancelExit}
          onConfirmExit={onConfirmExit}
          showPreventExit={showPreventExit}
        />
      </FormProvider>
    </Dialog>
  );
}

export const PublishPostDialog = memo(PublishPostDialogComponent);

export * from './interfaces';