import { useEffect } from 'react';

import { useTutorialModal } from '@material-hu/components/composed-components/TutorialModal';
import { type TutorialStep } from '@material-hu/components/composed-components/TutorialModal/types';

import TutorialImage1 from 'src/assets/images/pinChat.webp';
import { useAuth } from 'src/contexts/JWTContext';
import useFeatureFlag from 'src/hooks/useFeatureFlag';
import {
  hasUserViewedTutorial,
  markTutorialAsViewed,
} from 'src/pages/dashboard/Conversations/utils';
import { FeatureFlags } from 'src/types/featureFlags';
import { useLokaliseTranslation } from 'src/utils/i18n';

const useNewFeaturesModal = () => {
  const { t } = useLokaliseTranslation('chat');
  const { user } = useAuth();
  const enabledMessageInfo = useFeatureFlag(FeatureFlags.CHATS_V2_PIN_MESSAGE);

  const steps: TutorialStep[] = [
    {
      id: 1,
      title: '',
      description: t('features.pin_message_description'),
      image: TutorialImage1,
    },
  ];

  const { modal, showModal } = useTutorialModal({
    steps,
    texts: {
      title: t('features.pin_message_title'),
      completeButtonText: t('general:understood'),
      nextButtonText: t('NEXT'),
      previousButtonText: t('PREVIOUS'),
    },
    callbacks: {
      onClose() {
        markTutorialAsViewed(user?.id);
      },
      onComplete() {
        markTutorialAsViewed(user?.id);
      },
    },
    bodyVariant: 'S',
    isCarousel: false,
    minTitleHeight: 62,
  });

  useEffect(() => {
    const alreadyViewed = hasUserViewedTutorial(user?.id);
    if (enabledMessageInfo && !alreadyViewed) {
      showModal();
    }
  }, [user?.id, enabledMessageInfo]);

  return { modal, showModal };
};

export default useNewFeaturesModal;