import { createSignal, For, Show, Switch, Match } from 'solid-js'
import { Avatar } from '../avatars/Avatar'
import { isMobile } from '@/utils/isMobileSignal'
import {
  InputSubmitContent,
  RecordingInputSubmitContent,
  TextInputSubmitContent,
} from '@/types'
import { Modal } from '../Modal'
import { isNotEmpty } from '@indite.io/lib'
import { FilePreview } from '@/features/blocks/inputs/fileUpload/components/FilePreview'
import clsx from 'clsx'

type Props = {
  answer?: InputSubmitContent
  showAvatar: boolean
  avatarSrc?: string
  hasHostAvatar: boolean
}

export const GuestBubble = (props: Props) => {
  console.log('GuestBubble', props.answer);
  
  return (
    <div
      class="guest-container flex animate-fade-in items-end justify-end gap-2"
      style={{
        'margin-left': props.hasHostAvatar
          ? isMobile()
            ? '28px'
            : '50px'
          : undefined,
      }}
    >
      <Switch>
        <Match when={props.answer?.type === 'text'}>
          <TextGuestBubble answer={props.answer as TextInputSubmitContent} />
        </Match>
        <Match when={props.answer?.type === 'recording'}>
          <AudioGuestBubble
            answer={props.answer as RecordingInputSubmitContent}
          />
        </Match>
      </Switch>

      <Show when={props.showAvatar}>
        <Avatar initialAvatarSrc={props.avatarSrc} />
      </Show>
    </div>
  )
}

const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
  const [clickedImageSrc, setClickedImageSrc] = createSignal<string>()

  return (
    <div class="flex flex-col items-end gap-1">
      <Show when={(props.answer.attachments ?? []).length > 0}>
        <div
          class={clsx(
            'flex gap-1 overflow-auto max-w-[350px]',
            isMobile() ? 'flex-wrap justify-end' : 'items-center'
          )}
        >
          <For
            each={props.answer.attachments?.filter((attachment) =>
              attachment.type.startsWith('image')
            )}
          >
            {(attachment, idx) => (
              <img
                src={attachment.url}
                alt={`Attached image ${idx() + 1}`}
                class={clsx(
                  'bot-guest-bubble-image-attachment cursor-pointer',
                  props.answer.attachments!.filter((attachment) =>
                    attachment.type.startsWith('image')
                  ).length > 1 && 'max-w-[90%]'
                )}
                onClick={() => setClickedImageSrc(attachment.url)}
              />
            )}
          </For>
        </div>
        <div
          class={clsx(
            'flex gap-1 overflow-auto max-w-[350px]',
            isMobile() ? 'flex-wrap justify-end' : 'items-center'
          )}
        >
          <For
            each={props.answer.attachments?.filter(
              (attachment) => !attachment.type.startsWith('image')
            )}
          >
            {(attachment) => (
              <FilePreview
                file={{
                  name: attachment.url.split('/').at(-1)!,
                }}
              />
            )}
          </For>
        </div>
      </Show>
      <div
        class="bot-guest-bubble flex max-w-full flex-col whitespace-pre-wrap p-[1px]"
        data-testid="guest-bubble"
      >
        <Show when={isNotEmpty(props.answer.label ?? props.answer.value)}>
          <span class="px-[15px] py-[7px]">
            {props.answer.label ?? props.answer.value}
          </span>
        </Show>
      </div>
      <Modal
        isOpen={clickedImageSrc() !== undefined}
        onClose={() => setClickedImageSrc(undefined)}
      >
        <img
          src={clickedImageSrc()}
          alt="Attachment"
          style={{ 'border-radius': '6px' }}
        />
      </Modal>
    </div>
  )
}

const AudioGuestBubble = (props: { answer: RecordingInputSubmitContent }) => {
  return (
    <div class="flex flex-col items-end gap-1">
      <div
        class="bot-guest-bubble flex w-full flex-col whitespace-pre-wrap p-2"
        data-testid="guest-bubble"
      >
        <audio controls src={props.answer.url} />
      </div>
    </div>
  )
}