import React, {useCallback, useState} from 'react';
import {shallowEqual} from 'react-redux';
import {useSharedValue} from 'react-native-reanimated';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {useBackHandler} from '@hooks/useBackHandler';
import {UserPermissions} from '@interfaces/user';
import {useAppSelector} from '@redux/utils';
import {usePermission} from '@redux/selectors';
import {SPACING} from '@shared/theme';

import {useNewPost} from '../../hooks/useNewPost';
import PublishPostDialogs from '../PublishPostDialogs';
import PublishIconOptions from '../PublishIconOptions';
import {NewPostScreens, NewPostStackParamList} from '../../navigation';

interface Props {
  segmentationEnabled?: boolean;
  groupId?: number;
}

export function PublishIcons({segmentationEnabled = false, groupId}: Props) {
  const navigation =
    useNavigation<StackNavigationProp<NewPostStackParamList>>();
  const {
    messageBody,
    editor,
    currentSize,
    videos,
    images,
    files,
    gif,
    post,
    inputChanged,
  } = useNewPost();
  const [errorMessage, setErrorMessage] = useState<Nullable<string>>(null);
  const [showToolbar, setShowToolbar] = useState(false);
  const toggleShowToolbar = () => setShowToolbar(!showToolbar);
  const footerPadding = useSharedValue<number>(SPACING.x1);
  const [cancelAckModal, setCancelAckModal] = useState(false);

  const showRichTextInput = Boolean(!post?.body || post.bodyHtml);

  const {bottomSheet, bottomSheetLocked} = useAppSelector(
    ({modal}) => ({
      bottomSheet: modal.bottomSheet,
      bottomSheetLocked: modal.bottomSheetLocked,
    }),
    shallowEqual,
  );

  const handleSegmentationPress = () =>
    navigation.navigate(NewPostScreens.SegmentationPost);

  const canCreatePoll = usePermission(UserPermissions.CREATE_POLLS);

  const goBack = useCallback(() => {
    if (bottomSheet && bottomSheetLocked) {
      return true;
    }
    navigation.goBack();
    return true;
  }, [bottomSheet, bottomSheetLocked, navigation]);

  const goBackAccept = () => {
    setCancelAckModal(false);
    goBack();
  };

  const handleTouchOutside = () => {
    setErrorMessage(null);
    setCancelAckModal(false);
  };

  const onHandleGoBack = useCallback(() => {
    if (
      inputChanged &&
      (messageBody || images.length || videos.length || files.length || gif)
    ) {
      setCancelAckModal(true);
      return true;
    } else {
      return goBack();
    }
  }, [
    files.length,
    gif,
    goBack,
    images.length,
    inputChanged,
    messageBody,
    videos.length,
  ]);

  useBackHandler(onHandleGoBack);

  return (
    <>
      <PublishIconOptions
        attachmentsSize={currentSize}
        paddingBottom={footerPadding}
        canShowPoll={!!groupId || canCreatePoll}
        handleSegmentationPress={handleSegmentationPress}
        disabledSegmentation={!handleSegmentationPress || !segmentationEnabled}
        editor={editor}
        showRichTextInput={showRichTextInput}
        toggleShowToolbar={toggleShowToolbar}
        showToolbar={showToolbar}
      />
      <PublishPostDialogs
        errorMessage={errorMessage}
        handleTouchOutside={handleTouchOutside}
        cancelAckModal={cancelAckModal}
        goBackAccept={goBackAccept}
      />
    </>
  );
}
