import { createContext, useContext, useEffect, useState } from 'react';

import useSurveyDetail from '../../hooks/useSurveyDetail';
import useSurveyId from '../../hooks/useSurveyId';

const SurveyFormContext = createContext<any | null>(null);

export const useSurveyFormContext = () => useContext(SurveyFormContext);

const STORAGE_KEY = 'survey-form';
const storage = sessionStorage;

type SurveyFormProviderProps = {
  children: React.ReactNode;
};

export const SurveyFormProvider = ({ children }: SurveyFormProviderProps) => {
  const [stepIndex, setStepIndex] = useState<number>(() => {
    const backup = storage.getItem(STORAGE_KEY);
    const parsedBackup = backup ? JSON.parse(backup) : { stepIndex: 0 };
    return parsedBackup.stepIndex;
  });

  const id = useSurveyId();
  const [surveyId, setSurveyId] = useState(id);
  const { data: survey, ...other } = useSurveyDetail(surveyId ?? undefined);

  useEffect(() => {
    storage.setItem(STORAGE_KEY, JSON.stringify({ stepIndex }));

    return () => {
      storage.removeItem(STORAGE_KEY);
    };
  }, [stepIndex]);

  const goToNextStep = () => {
    setStepIndex(prev => prev + 1);
  };

  const goToPrevStep = () => {
    setStepIndex(prev => prev - 1);
  };

  const contextValue = {
    stepIndex,
    setStepIndex,
    survey,
    goToNextStep,
    goToPrevStep,
    setSurveyId,
    ...other,
  };

  return (
    <SurveyFormContext.Provider value={contextValue}>
      {children}
    </SurveyFormContext.Provider>
  );
};