import { Button } from '@/components/ui/button'
import { PromptForm } from '@/components/prompt-form'
import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
import { IconRefresh, IconSpinner, IconStop } from '@/components/ui/icons'
import { functionSchemas } from '@/lib/functions/schemas'

import { cn } from '@/lib/utils'
import { FadeIn } from './landing/fade-in'
import { useTranslation } from 'react-i18next'
import { UseChatHelpers } from '@aigxion/isdk/react'



export interface ChatPanelProps
  extends Pick<
    UseChatHelpers,
    | 'append'
    | 'isLoading'
    | 'reload'
    | 'messages'
    | 'stop'
    | 'input'
    | 'setInput'
  > {
  id?: string
}

export function ChatPanel({
  id,
  isLoading,
  stop,
  append,
  reload,
  input,
  setInput,
  messages
}: ChatPanelProps) {

  const { t } = useTranslation();

  console.log("messages : ", messages)
  return (
    <div
      className={cn(
        // " inset-x-0 bg-gradient-to-b from-muted/10 from-10% to-muted/0.3 fixed bottom-0",
        "absolute inset-x-0 bottom-[0rem] bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50%",
        // messages.length > 1 ? 'fixed bottom-0 bg-[#f6f6f6] z-[999]' : "absolute bg-[#fff]"
      )}

    // style={{
    //   top: messages.length > 1 ? 'auto' : "180px",
    //   // backgroundColor: messages.length > 1 ? '#fff' : "",
    // }}
    >
      {/* <ButtonScrollToBottom /> */}

      <div className="mx-auto sm:max-w-2xl sm:px-4 ">
        {/* <div className="flex h-10 items-center justify-center">
          {isLoading ? (
            <Button
              variant="outline"
              onClick={() => stop()}
              className="bg-background"
            >
              <IconSpinner className="mr-2 animate-spin" />
              Stop generating
            </Button>
          ) : (
            messages?.length > 1 && (
              <Button
                variant="outline"
                onClick={() => reload({
                  functions: functionSchemas
                })}
                className="bg-background"
              >
                <IconRefresh className="mr-2" />
                Regenerate response
              </Button>
            )
          )}
        </div> */}
        {/* <div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4"> */}
        <div className="space-y-4  px-4 py-2 ">
          <PromptForm
            onSubmit={async value => {
              await new Promise(r => setTimeout(r, 300));
              await append(
                {
                  id,
                  content: value,
                  role: 'user'
                },
                { functions: functionSchemas }
              )
            }}
            input={input}
            setInput={setInput}
            isLoading={isLoading}
          />
        </div>
      </div>
    </div>

  )
}