import { BotContext, InputSubmitContent } from '@/types'
import { ContinueChatResponse, Theme } from '@indite.io/schemas'
import { InputBlockType } from '@indite.io/schemas/features/blocks/inputs/constants'
import { Show } from 'solid-js'
import { InputChatBlock } from './InputChatBlock'

type Props = {
  input: NonNullable<ContinueChatResponse['input']> | undefined
  chunkIndex: number
  context: BotContext
  theme: Theme
  isInputPrefillEnabled: boolean
  isBrandingEnabled?: boolean | undefined
  hasError: boolean
  onTransitionEnd: () => void
  onSubmit: (content: InputSubmitContent) => void
  onSkip: () => void
  botContainerWidth?: string
}

export const FixedInputContainer = (props: Props) => {
  const isFixedInputType = () => {
    if (!props.input) return false
    return (
      props.input.type === InputBlockType.TEXT ||
      props.input.type === InputBlockType.NUMBER ||
      props.input.type === InputBlockType.EMAIL ||
      props.input.type === InputBlockType.URL ||
      props.input.type === InputBlockType.PHONE
    )
  }

  const handleSubmit = (content: InputSubmitContent) => {
    props.onSubmit(content)
  }
  return (
    <Show when={props.input && isFixedInputType()}>
      <div 
        class="bot-fixed-input-container w-full  py-3 px-3"
        style={{
          position: 'absolute',
          bottom: props.isBrandingEnabled ? '50px':'0px',
          left: '0',
          right: '0',
          'z-index': '10',
        }}
      >
        <InputChatBlock
          botContainerWidth={props.botContainerWidth}
          ref={undefined}
          block={props.input!}
          chunkIndex={props.chunkIndex}
          hasHostAvatar={props.theme.chat?.hostAvatar?.isEnabled ?? true}
          guestAvatar={props.theme.chat?.guestAvatar}
          context={props.context}
          isInputPrefillEnabled={props.isInputPrefillEnabled}
          isBrandingEnabled={props.isBrandingEnabled}
          hasError={props.hasError}
          onTransitionEnd={props.onTransitionEnd}
          onSubmit={handleSubmit}
          onSkip={props.onSkip}
        />
      </div>
    </Show>
  )
}