import { FC } from "react"
import { TextStyle } from "react-native"

import { ListItem } from "@/components/ListItem"
import { Screen } from "@/components/Screen"
import { Text } from "@/components/Text"
import type { MainTabScreenProps } from "@/navigators/navigationTypes"
import { useAppTheme } from "@/theme/context"
import { $styles } from "@/theme/styles"
import type { ThemedStyle } from "@/theme/types"
import { openLinkInBrowser } from "@/utils/openLinkInBrowser"

const COMMUNITY_LINKS = [
  {
    icon: "slack" as const,
    titleTx: "communityScreen:joinSlackLink" as const,
    url: "https://community.infinite.red/",
  },
  {
    icon: "github" as const,
    titleTx: "communityScreen:contributeToIgniteLink" as const,
    url: "https://github.com/infinitered/ignite",
  },
  {
    icon: "globe" as const,
    titleTx: "communityScreen:hireUsLink" as const,
    url: "https://infinite.red/",
  },
]

export const CommunityScreen: FC<MainTabScreenProps<"Community">> = () => {
  const { themed } = useAppTheme()

  return (
    <Screen preset="scroll" contentContainerStyle={$styles.container}>
      <Text preset="heading" tx="communityScreen:title" style={themed($title)} />
      <Text tx="communityScreen:tagLine" style={themed($description)} />

      <Text
        preset="subheading"
        tx="communityScreen:joinUsOnSlackTitle"
        style={themed($sectionTitle)}
      />
      <Text tx="communityScreen:joinUsOnSlack" style={themed($description)} />

      {COMMUNITY_LINKS.map((link, index) => (
        <ListItem
          key={link.url}
          tx={link.titleTx}
          leftIcon={link.icon}
          rightIcon="caretRight"
          onPress={() => openLinkInBrowser(link.url)}
          bottomSeparator={index < COMMUNITY_LINKS.length - 1}
        />
      ))}
    </Screen>
  )
}

const $title: ThemedStyle<TextStyle> = ({ spacing }) => ({
  marginBottom: spacing.sm,
})

const $description: ThemedStyle<TextStyle> = ({ spacing }) => ({
  marginBottom: spacing.lg,
})

const $sectionTitle: ThemedStyle<TextStyle> = ({ spacing }) => ({
  marginTop: spacing.xxl,
})