import { ZStack, View } from '@junwon/aesthetics'
import { JunwonIcon } from '@junwon/assets'
import { useState } from 'react'
import { SearchBarButton } from '@junwon/catalog-tech/components/SearchBarButton'
import { SearchInputDialog } from '@junwon/catalog-tech/components/SearchInputDialog'
import { useProduct } from '@junwon/config'

function getSearchBarText() {
  const { productName } = useProduct()
  switch (productName) {
    case 'catalog-web':
      return 'Search La Catalog'
    case 'magazine-web':
      return 'Search La Magazine'
    default:
      return 'Search'
  }
}

export function HomePage() {
  const iconSize = 48
  const [openSearchDialog, setOpenSearchDialog] = useState(false)

  const searchBarText = getSearchBarText()

  return (
    <ZStack>
      <View
        // @ts-expect-error
        h="100dvh"
        ai="center"
        jc="center"
        b="$12"
      >
        <JunwonIcon
          width={iconSize}
          height={iconSize}
        />
      </View>

      <View
        w="100%"
        // @ts-expect-error
        h="100dvh"
        maw={720}
        mx="auto"
        ai="center"
        jc="center"
        pl="$3"
        pr="$3"
      >
        <SearchBarButton
          onPress={() => setOpenSearchDialog(true)}
          searchBarText={searchBarText}
        />
      </View>

      <SearchInputDialog
        open={openSearchDialog}
        onOpenChange={setOpenSearchDialog}
      />
    </ZStack>
  )
}