import { createContext, useContext, useEffect, useRef, useState } from 'react';
import type { UseInjectModeReturn } from '../hooks/useIframeMode';


export interface SlideJson {
  outline: Array<{
    id: string;
    summary: string;
    title: string;
  }>;
  project_dir: string;
  slide_ids: string[];
  slide_list: SliderListItem[]
}

export interface SliderListItem {
  content: string
  file_name: string
  file_type: string
  id: string
  path : string
  title: string
}

export const PPTEditContext = createContext<{
  state: UseInjectModeReturn | null,
  setState: React.Dispatch<React.SetStateAction<UseInjectModeReturn | null>>
  originalSlide: React.MutableRefObject<SliderListItem[]>
} | null>(null);

export const usePPTEditContext = () => {
  return useContext(PPTEditContext)
}

export const PPTEditProvider: React.FC<{
  children: React.ReactNode
  slides?: SliderListItem[]
}> = (props) => {
  const originalSlide = useRef<SliderListItem[]>(JSON.parse(JSON.stringify(props.slides || [])));
  const [state, setState] = useState<UseInjectModeReturn | null>(null);
  
  useEffect(() => {
    originalSlide.current = JSON.parse(JSON.stringify(props.slides || []))
  }, [props.slides])
  
  return (
    <PPTEditContext.Provider value={{
      state,
      setState,
      originalSlide
    }}>
      {props.children}
    </PPTEditContext.Provider>
  );
}