import React from 'react'
import { Box, Text, useTheme } from 'src/ink.js'

const WELCOME_V2_WIDTH = 58

/**
 * SANDCODE Welcome Screen
 *
 * Displays the SANDCODE golem mascot and version info.
 * Uses the brand gold color via the "amber" theme token
 * (which maps to the SANDCODE accent color).
 */
export function WelcomeV2(): React.ReactNode {
  const [theme] = useTheme()
  const isLight = ['light', 'light-daltonized', 'light-ansi'].includes(theme)

  return (
    <Box width={WELCOME_V2_WIDTH} flexDirection="column">
      <Text>
        <Text color="amber">{'Welcome to SANDCODE'} </Text>
        <Text dimColor>v{MACRO.VERSION} </Text>
      </Text>
      <Text>{'……………………………………………………………………………………………………………'}</Text>
      <Text>{' '}</Text>
      {isLight ? <LightMascot /> : <DarkMascot />}
      <Text>{'……………………………………………………………………………………………………………'}</Text>
    </Box>
  )
}

function DarkMascot(): React.ReactNode {
  return (
    <>
      <Text>{'                                                          '}</Text>
      <Text>{'            ░░░░░░                                        '}</Text>
      <Text>{'    ░░░   ░░░░░░░░░░              '}<Text color="sandBody">{'  ▜▀▀▀▀▀▛  '}</Text>{'         '}</Text>
      <Text>{'   ░░░░░░░░░░░░░░░░░░░            '}<Text color="sandBody">{'   ▜░░░▛   '}</Text>{'         '}</Text>
      <Text>{'                          '}<Text bold>{'*'}</Text>{'       '}<Text color="sandBody">{'    ▐▓▌    '}</Text>{'         '}</Text>
      <Text>{'                                   '}<Text color="sandBody">{'   ▟▓▓▓▙   '}</Text>{'         '}</Text>
      <Text>{'                                   '}<Text color="sandBody">{'  ▙▄▄▄▄▄▟  '}</Text>{'         '}</Text>
      <Text>{'                                                          '}</Text>
      <Text dimColor>{' *                                 ░░░░                   '}</Text>
      <Text dimColor>{'                                 ░░░░░░░░                 '}</Text>
      <Text dimColor>{'                               ░░░░░░░░░░░░░░░░           '}</Text>
      <Text>{'                                                      '}<Text dimColor>{'*'}</Text>{' '}</Text>
    </>
  )
}

function LightMascot(): React.ReactNode {
  return (
    <>
      <Text>{'                                                          '}</Text>
      <Text>{'            ░░░░░░                                        '}</Text>
      <Text>{'    ░░░   ░░░░░░░░░░              '}<Text color="sandBody">{'  ▜▀▀▀▀▀▛  '}</Text>{'         '}</Text>
      <Text>{'   ░░░░░░░░░░░░░░░░░░░            '}<Text color="sandBody">{'   ▜░░░▛   '}</Text>{'         '}</Text>
      <Text>{'                                   '}<Text color="sandBody">{'    ▐▓▌    '}</Text>{'         '}</Text>
      <Text>{'                                   '}<Text color="sandBody">{'   ▟▓▓▓▙   '}</Text>{'         '}</Text>
      <Text>{'                                   '}<Text color="sandBody">{'  ▙▄▄▄▄▄▟  '}</Text>{'         '}</Text>
      <Text>{'                                                          '}</Text>
      <Text dimColor>{'                                   ░░░░                   '}</Text>
      <Text dimColor>{'                                 ░░░░░░░░                 '}</Text>
      <Text dimColor>{'                               ░░░░░░░░░░░░░░░░           '}</Text>
      <Text>{'                                                          '}</Text>
    </>
  )
}
