import { useCallback, useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { useBlocker } from './useBlocker'

export function useCallbackPrompt(when) {
  const navigate = useNavigate()
  const location = useLocation()
  const [showPrompt, setShowPrompt] = useState(false)
  const [lastLocation, setLastLocation] = useState(null)
  const [confirmedNavigation, setConfirmedNavigation] = useState(false)

  const cancelNavigation = useCallback(() => {
    setShowPrompt(false)
  }, [])

  const handleBlockedNavigation = useCallback(
    (nextLocation) => {
      if (
        !confirmedNavigation &&
        nextLocation.location.pathname !== location.pathname
      ) {
        setShowPrompt(true)
        setLastLocation(nextLocation)
        return false
      }
      return true
    },
    // added location to the handleBlockedNavigation hook. The location object changes and the location.pathname value remains outdated.
    [confirmedNavigation, location]
  )

  const confirmNavigation = useCallback(() => {
    setShowPrompt(false)
    setConfirmedNavigation(true)
  }, [])

  useEffect(() => {
    if (confirmedNavigation && lastLocation) {
      navigate(lastLocation.location.pathname)

      // Clean-up state on confirmed navigation
      setConfirmedNavigation(false)
    }
  }, [confirmedNavigation, lastLocation])

  useBlocker(handleBlockedNavigation, when)

  return [showPrompt, confirmNavigation, cancelNavigation]
}

const [isEditing, setIsEditing] = usestate(false)

// 业务逻辑,

const [showPrompt, confirmNavigation, cancelNavigation] = useCallbackPrompt(isEditing)

// 自行封装一个离开当前路有前的 modal , 假设为 BeforeLeaveModal

<BeforeLeaveModal
  showDialog={showPrompt} // boolean 此 modal 是否显示
  cancelNavigation={cancelNavigation} // function 点击取消离开路由回调
  confirmNavigation={confirmNavigation} // function 点击确认离开路由的回调
/>

import { useSyncExternalStore } from "react"
import { proxy, snapshot, subscribe } from "valtio"

// 创建一个代理对象
const pubState = proxy({ active: false, text: "hello" })

// 订阅
const subscribePubState = (callback) => subscribe(pubState, callback)

// 使用代理
const snapshotPubState = () => snapshot(pubState)

// 自定义钩子
const usePubState = () =>
  useSyncExternalStore(subscribePubState, snapshotPubState)

export { pubState, usePubState }

function App() {
  const { text, active } = usePubState() // 使用代理数据

  // toast 的显隐
  const toastvaltio = active ? (
    <Toast
      content={pubState.text}
      onDismiss={() => {
        pubState.active = !pubState.active
      }}
    />
  ) : null

  return (
    <Frame>
      <Page title="example">
        <Card sectioned>
          {toastvaltio}
          <Heading>{text}</Heading>
          // 模拟请求响应触发代理值改变
          <Button
            onClick={() => {
              pubState.active = true
              pubState.text = "" + Math.random()
            }}
          >
            mutate
          </Button>
        </Card>
      </Page>
    </Frame>
  )
}