import { observer } from 'mobx-react'
import React, { createContext, useContext } from 'react'

import useStores from 'dbaas/stores/useStores'
import { useDynamicLocalStorage } from 'dbaas/utils/useSessionStorage'

export interface TutorialItem {
  clusterId?: string
  clusterName?: string
  step: number
  progress?: number
  finished?: boolean
  loadedClusterId?: string
  importId?: string
}

type TutorialCache = Record<string, TutorialItem>

export interface TutorialData {
  tutorial: TutorialCache
  setTutorial: (val: TutorialCache | ((prevState: TutorialCache) => TutorialCache)) => void
}

export const TutorialContext = createContext<TutorialData | null>(null)

export const getTutorialKey = (userId: string, orgId: string, _projectId?: string) => {
  return `dbaas.tutorial:${userId}:${orgId}`
}

export const TutorialProvider: React.FC<React.PropsWithChildren<unknown>> = observer((props) => {
  const {
    store: { tenantData, userProfile }
  } = useStores()
  const key = getTutorialKey(userProfile.id, tenantData.id)
  const [tutorial, setTutorial] = useDynamicLocalStorage<TutorialCache>({
    key,
    defaultValue: {},
    deserialize(value) {
      try {
        return JSON.parse(value)
      } catch (_e) {
        return {}
      }
    }
  })

  return <TutorialContext.Provider value={{ tutorial, setTutorial }}>{props.children}</TutorialContext.Provider>
})

export const useTutorialContext = () => {
  const context = useContext(TutorialContext)
  if (!context) {
    throw new Error('Tutorial Context is empty')
  }
  return context
}

export const useTutorialProgress = (name: string) => {
  const { tutorial, setTutorial } = useTutorialContext()
  const updateTutorial = (data: Partial<TutorialItem>) => {
    setTutorial({
      ...tutorial,
      [name]: {
        ...(tutorial[name] || {}),
        ...data
      }
    })
  }
  return {
    tutorial: tutorial[name] || {},
    updateTutorial
  }
}