#基础 API

function NavigationComponent() {
  const navigate = useNavigate()

  return (
    <>
      <button onClick={() => navigate('/')}>首页</button>
      <button onClick={() => navigate('/products', { relative: false })}>
        产品
      </button>
      <button onClick={() => navigate('/login', { replace: true })}>
        登录
      </button>
      <button onClick={() => navigate('/details', { noScroll: true })}>
        查看详情（不滚动）
      </button>
      <button onClick={() => navigate('/search?q=zess&page=1')}>
        搜索 Zess（第1页）
      </button>
      <button onClick={() => navigate('/checkout', { state: { userId: 1 } })}>
        前往结账
      </button>
    </>
  )
}

function ProductFilter() {
  const [searchParams, setSearchParams] = useSearchParams()
  const setCategory = (category) => setSearchParams({ category })
  const search = (keyword, searchType) => {
    setSearchParams(
      { keyword },
      {
        replace: true,
        state: { searchType },
      },
    )
  }
  const clearFilters = () => {
    setSearchParams({ category: undefined, keyword: undefined })
  }

  return (
    <div>
      <p>当前分类: {searchParams.category || '全部'}</p>
      <p>搜索关键词: {searchParams.keyword || '无'}</p>
      <button onClick={() => setCategory('shoes')}>设置分类</button>
      <button onClick={() => search('sale', 'quick')}>按类型搜索</button>
      <button onClick={clearFilters}>清除筛选</button>
    </div>
  )
}

function FormEditor() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = useSignal(false)
  useBeforeLeave((event) => {
    if (hasUnsavedChanges()) {
      const confirmed = window.confirm('您有未保存的更改。确定要离开吗？')
      if (!confirmed) {
        event.preventDefault()
      }
    }
  })

  return (
    <div>
      <input type="text" onChange={() => setHasUnsavedChanges(true)} />
      <button onClick={() => setHasUnsavedChanges(false)}>保存</button>
    </div>
  )
}

function LocationDisplay() {
  const location = useLocation()

  return (
    <div>
      <h2>当前位置信息</h2>
      <p>路径: {location.pathname}</p>
      <p>查询字符串: {location.search}</p>
      <p>哈希值: {location.hash}</p>
      <p>状态: {JSON.stringify(location.state)}</p>
      <p>查询参数: {JSON.stringify(location.query)}</p>
    </div>
  )
}