import { useBasedTranslation } from '@based/i18n'
import { Button, Text, colors, useTheme } from '@based/ui'
import { useRouter } from 'react-router5'
import { useMeta } from 'src/metaExtractor/metaContext'
import homeDarkBackground from '../assets/home-dark.png'
import homeLightBackground from '../assets/home-light.png'
import { getFirstComponentBySection } from '../helpers'
import type { TranslationsType } from '../i18n'
import { Title } from './title'

export const Home = () => {
  const t = useBasedTranslation<TranslationsType>()
  const router = useRouter()
  const meta = useMeta()
  const { theme } = useTheme()
  const isDark = theme === 'dark'
  const prioritizedGroup = t('sidebar.prioritizedGroups')[0]

  const goComponents = () => {
    const component = getFirstComponentBySection(
      meta,
      'components',
      prioritizedGroup,
    )
    router.navigate('components', { section: 'components', component })
  }

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        overflow: 'hidden',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignSelf: 'center',
          flexDirection: 'column',
          width: '100%',
          padding: 72,
          maxWidth: 1440,
          gap: 72,
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <div
            style={{
              marginBottom: 16,
            }}
          >
            <Title variant="title-bold-big">{t('home.title')}</Title>
          </div>

          <div
            style={{
              marginBottom: 32,
            }}
          >
            <Text variant="subheading-regular" color="neutral60">
              {t('home.description')}
            </Text>
          </div>

          <div>
            <Button
              onClick={goComponents}
              variant="fill"
              size="regular"
              color="neutral"
              trailIcon="arrow-right"
            >
              {t('home.CTA')}
            </Button>
          </div>
        </div>

        <div
          style={{
            position: 'relative',
            alignSelf: 'center',
            display: 'flex',
            width: '100%',
          }}
        >
          <img
            src={homeDarkBackground}
            alt={t('home.alt')}
            style={{
              display: isDark ? 'unset' : 'none',
              position: 'relative',
              zIndex: 2,
              width: '100%',
            }}
          />
          <img
            src={homeLightBackground}
            alt={t('home.alt')}
            style={{
              display: isDark ? 'none' : 'unset',
              position: 'relative',
              zIndex: 2,
              width: '100%',
            }}
          />
          <div
            style={{
              position: 'absolute',
              top: 10,
              zIndex: 1,
              width: '100%',
              height: '90%',
              boxShadow: `0px -208px 125px 0px ${colors.neutral5}, 0px -92px 92px 0px ${colors.neutral5}, 0px -23px 51px 0px ${colors.neutral5}`,
            }}
          />
        </div>
      </div>
    </div>
  )
}
