import {
  Button,
  Input,
  XStack,
  YStack,
  Dialog,
  VisuallyHidden,
  Separator,
} from '@junwon/aesthetics'
import { ArrowLeft, X } from '@tamagui/lucide-icons'
import { useState, useEffect, useRef } from 'react'
import { useSearch } from '@junwon/catalog-tech/hooks/useSearch'

interface SearchDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export const SearchInputDialog = ({ open, onOpenChange }: SearchDialogProps) => {
  const searchInputLimit = 1000
  const [searchQuery, setSearchQuery] = useState('')
  const inputRef = useRef<Input>(null)
  const { search } = useSearch()

  useEffect(() => {
    if (open) {
      window.scrollTo(0, 0)
      inputRef.current?.focus()
    }
  }, [open])

  const handleSearch = () => {
    search(searchQuery)
  }

  const handleSearchInput = (text: string) => {
    if (text.length <= searchInputLimit) {
      setSearchQuery(text)
    }
  }

  return (
    <Dialog
      modal
      open={open}
      onOpenChange={onOpenChange}
    >
      <Dialog.Portal>
        <Dialog.Content
          w="100%"
          h="100dvh"
          bc="$background"
        >
          <VisuallyHidden>
            <Dialog.Title>Search</Dialog.Title>
          </VisuallyHidden>
          <YStack gap="$4">
            <XStack
              gap="$1"
              ai="center"
            >
              <BackButton
                onOpenChange={onOpenChange}
                setSearchQuery={setSearchQuery}
              />
              <Input
                ref={inputRef}
                f={1}
                value={searchQuery}
                onChangeText={handleSearchInput}
                onSubmitEditing={handleSearch}
                autoFocus
                enterKeyHint="search"
                fos="$5"
                maxLength={searchInputLimit}
                textWrap="pretty"
                focusVisibleStyle={{ outlineWidth: 0 }}
                bw={0}
                bc="transparent"
                p="$2"
                color="$gray10"
                textDecorationLine="none"
                spellCheck={false}
                autoCapitalize="none"
                autoCorrect={false}
                autoComplete="off"
              />
              <ClearButton
                searchQuery={searchQuery}
                setSearchQuery={setSearchQuery}
              />
            </XStack>
            <Separator
              bw="$0.5"
              boc="$gray8"
            />
          </YStack>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog>
  )
}

const BackButton = ({
  onOpenChange,
  setSearchQuery,
}: {
  onOpenChange: (open: boolean) => void
  setSearchQuery: (value: string) => void
}) => {
  return (
    <Button
      unstyled
      onPress={() => {
        setSearchQuery('')
        onOpenChange(false)
      }}
    >
      <ArrowLeft
        size="$1.5"
        color="$gray9"
      />
    </Button>
  )
}

const ClearButton = ({
  searchQuery,
  setSearchQuery,
}: {
  searchQuery: string
  setSearchQuery: (value: string) => void
}) => {
  return (
    <Button
      unstyled
      onPress={() => setSearchQuery('')}
    >
      <X
        size="$1.5"
        color={searchQuery.length > 0 ? '$gray9' : 'transparent'}
      />
    </Button>
  )
}