'use client'
import Link from 'next/link'
import Image, {StaticImageData} from 'next/image'
import Wrap from '@/components/wrap'
import h01 from '@/assets/header/help/01.svg'
import h02 from '@/assets/header/help/02.svg'
import h03 from '@/assets/header/help/03.svg'
import banner from '@/assets/header/help/banner.webp'
import {FragmentTitle, HeaderContext} from './common'
import {useContext} from 'react'
import {useRouter} from 'next/navigation'

export default function HelpMenu() {
  return (
    <Wrap className="w-full grid sm:grid-cols-3 lg:grid-cols-4 gap-4 justify-items-start">
      <Column
        icon={h01}
        title="提取 IP"
        items={[
          {lead: '短效/长效 IP 提取', href: '/collect?type=short'},
          // {lead: '长效 IP 提取', href: '/collect?type=long'},
        ]}
      />
      <Column
        icon={h02}
        title="操作指南"
        items={[
          {lead: '修改信息', href: '/docs/profile-settings'},
          {lead: '提取链接', href: '/docs/extract-link'},
          {lead: '查看记录', href: '/docs/payment-records'},
        ]}
      />
      <Column
        icon={h03}
        title="平台教程"
        items={[
          {lead: 'iOS 设置', href: '/docs/ios-proxy'},
          {lead: 'Android 设置', href: '/docs/android-proxy'},
          {lead: 'Windows 设置', href: '/docs/windows10-proxy'},
        ]}
      />
      <Image src={banner} alt="banner" className="hidden lg:block"/>
    </Wrap>
  )
}

function Column(props: {
  icon: StaticImageData
  title: string
  items: {
    lead: string
    href: string
  }[]
}) {
  const ctx = useContext(HeaderContext) // 获取菜单上下文
  const router = useRouter()

  if (!ctx) {
    throw new Error(`HeaderContext not found`)
  }
  return (
    <div className="flex-1 flex flex-col gap-4">
      <FragmentTitle img={props.icon} text={props.title}/>
      <ul className="flex flex-col gap-2">
        {props.items.map((item, index) => (
          <li key={index}>
            <Link
              href={item.href}
              className="px-4 py-2"
              onClick={() => {
                ctx.setMenu(false)
                router.push(item.href)
              }}
            >
              {item.lead}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}