import { PageProps } from '@junwon/centum/types'
import { ArrowLeft, MoreHorizontal } from '@tamagui/lucide-icons'
import { Helmet } from 'react-helmet'
import { useRouter } from 'solito/router'
import { YStack, Separator, XStack, Button, Text, Spinner, ScrollView } from 'tamagui'

import { InfoCard } from './InfoCard'
import { LinkCard } from './LinkCard'

export const Page = (props: PageProps) => {
  const router = useRouter()

  return (
    <YStack f={1} w="100%">
      <Helmet>
        <title>{props.title}</title>
      </Helmet>
      {/* Top Bar */}
      <YStack>
        <XStack w="100%" minHeight="$3" ai="center" jc="center" position="relative" my="$2" px="$3">
          {props.showBackButton && (
            <Button
              icon={ArrowLeft}
              style={{ position: 'absolute', left: 0 }}
              chromeless
              pressStyle={{ backgroundColor: 'transparent', borderColor: 'transparent' }}
              onPress={() => router.back()}
            />
          )}
          <Text
            style={{
              flex: 1,
              textAlign: 'center',
              maxWidth: '70%',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {props.title}
          </Text>

          {/* Action Button: Hidden for now */}
          {/* <Button
            icon={MoreHorizontal}
            style={{ position: 'absolute', right: 0 }}
            chromeless
            pressStyle={{ backgroundColor: 'transparent', borderColor: 'transparent' }}
          /> */}
        </XStack>
        <Separator m="$0" />
      </YStack>
      <ScrollView>
        {props.showLoading && <Spinner size="large" color="#fff" mt="$8" mb="$5" />}
        <YStack ai="center" w="100%" mt="$5" px="$3" mb="$8">
          <YStack px="$3" maxWidth={500} w="100%">
            <InfoCard title={props.title} contents={[props.headline]} kind="body_of_post" />
            {/* Cards */}
            <YStack w="100%">
              {props.cards &&
                props.cards.map((card, index) => (
                  <YStack key={index} w="100%">
                    <Separator mt="$5" mb="$5" />
                    <InfoCard {...card} />
                  </YStack>
                ))}
            </YStack>
            <YStack w="100%">
              {props.link_cards &&
                props.link_cards.map((card, index) => (
                  <YStack key={index} w="100%">
                    <Separator mt="$5" mb="$5" />
                    <LinkCard {...card} />
                  </YStack>
                ))}
            </YStack>
          </YStack>
        </YStack>
      </ScrollView>
      {!props.showLoading && <Separator />}
    </YStack>
  )
}