'use client'

import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useRef, useState } from 'react'

import Textarea from 'react-textarea-autosize'

import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
import { cn } from '@/lib/utils'
import { Button, buttonVariants } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger
} from '@/components/ui/tooltip'
import { IconArrowElbow, IconHome } from '@/components/ui/icons'
// import { UseChatHelpers } from '@aigxion/isdk/react'
import { useTranslation } from 'react-i18next'
import { PrefetchKind } from 'next/dist/client/components/router-reducer/router-reducer-types'


export interface PromptIndexProps {
  onSubmit?: (value: string) => void
  isLoading?: boolean
  id: string
}

export function PromptFormIndex({
  onSubmit,
  // input,
  // setInput,
  isLoading,
  id
}: PromptIndexProps) {
  const router = useRouter()
  const { t } = useTranslation();

  const { formRef, onKeyDown } = useEnterSubmit()
  const [input, setInput] = useState<string>('')
  // const inputRef = useRef<HTMLTextAreaElement>(null)

  // useEffect(() => {
  //   if (inputRef.current) {
  //     inputRef.current.focus()
  //   }
  // }, [])

  const searchParams = useSearchParams()
  const pathname = usePathname()
  const q = searchParams.get('q')

  console.log("----PromptFormIndex----", pathname, q, ["/", "/zh-CN/"].includes(pathname))


  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault()
        // if (!inputRef.current) {
        //   return
        // }

        if (!input?.trim() || isLoading) {
          return
        }
        setInput('')
        // await onSubmit(input)
        const url = `/chat/${id}?q=${input}`
        if (["/", "/zh-CN/"].includes(pathname)) {
          // router.push(`/`, { shallow: false })

          console.log("--onSubmit--", e, input, url)
          router.push(url, { scroll: false })
        } else {
          router.prefetch(url, {
            kind: PrefetchKind.FULL
          })

          history.pushState({}, '', url)
          history.go(1)

          if (!!onSubmit) {
            onSubmit(input)
          }

        }


        // inputRef.current.value = ""

        // router.prefetch(url, {
        //   kind: PrefetchKind.FULL
        // })

        // history.pushState({}, '', url)
        // history.go(1)


      }}
      ref={formRef}
    >

      <div className="relative flex w-full grow flex-col overflow-hidden px-8 sm:rounded-full sm:border-none sm:px-4 bg-[#b2b2b233]" >
        <Tooltip>
          <TooltipTrigger asChild>
            {/* <Button
              onClick={() => {
                router.push(`/`, { shallow: false })
              }}
              className={cn(
                buttonVariants({ size: 'sm', variant: 'secondary' }),
                'absolute left-0 top-4 h-8 w-8 rounded-full border p-0 sm:left-4'
              )}
            >
              <IconHome />
              <span className="sr-only">New Chat</span>
            </Button> */}
          </TooltipTrigger>
          <TooltipContent>New Chat</TooltipContent>
        </Tooltip>
        <Textarea
          // ref={inputRef}
          tabIndex={0}
          onKeyDown={onKeyDown}
          rows={1}
          value={input}
          onChange={e => {
            // console.log("----onChange----", e)
            setInput(e.target.value);

          }}
          placeholder={t("chat.describe_your_intent")}
          spellCheck={false}
          className="min-h-[50px] w-full border-none resize-none bg-transparent px-0 py-[1rem] focus-within:outline-none sm:text-sm placeholder:text-[#666666]"
        />
        <div className="absolute right-0 top-1 sm:right-2 ">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                className="bg-baclbtn h-11 sm:rounded-full px-6 disabled:bg-[#666666] disabled:opacity-100 text-[1.125rem]"
                type="submit"
                // size="icon"
                disabled={!input.trim()}
              >
                {/* <IconArrowElbow className="fill-white" /> */}
                <span >{t("chat.send")} </span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>{t("chat.send_message")}</TooltipContent>
          </Tooltip>
        </div>
      </div>
    </form>
  )
}