import React from 'react'
import {
  Text as RNText,
  View,
  ScrollView,
  type ViewStyle,
  type TextStyle,
  type StyleProp,
} from 'react-native'

import {
  atoms as a,
  utils,
  useTheme,
  Provider,
  createThemes,
  DEFAULT_PALETTE,
  DEFAULT_SUBDUED_PALETTE,
} from '@bsky.app/alf'

export function Spec() {
  const themes = createThemes({
    defaultPalette: DEFAULT_PALETTE,
    subduedPalette: DEFAULT_SUBDUED_PALETTE,
  })

  return (
    <ScrollView style={[a.gutter_x_default, a.py_5xl]}>
      <View style={[a.gap_5xl, {maxWidth: 600}]}>
        <Text style={[a.text_5xl, a.font_bold]}>ALF Spec</Text>

        {['light', 'dark', 'dim'].map(theme => {
          return (
            <Provider activeTheme={theme} themes={themes} key={theme}>
              <Colors />
            </Provider>
          )
        })}

        <Section>
          <SectionTitle>Typography</SectionTitle>
          <View style={[a.gap_sm]}>
            <Text style={[a.text_xs]}>a.text_xs</Text>
            <Text style={[a.text_sm]}>a.text_sm</Text>
            <Text style={[a.text_md]}>a.text_md</Text>
            <Text style={[a.text_lg]}>a.text_lg</Text>
            <Text style={[a.text_xl]}>a.text_xl</Text>
          </View>
          <View style={[a.gap_sm]}>
            <Text style={[a.text_xs, a.leading_tight]}>
              [a.text_xs a.leading_tight] {lorem}
            </Text>
            <Text style={[a.text_sm, a.leading_tight]}>
              [a.text_sm a.leading_tight] {lorem}
            </Text>
            <Text style={[a.text_md, a.leading_tight]}>
              [a.text_md a.leading_tight] {lorem}
            </Text>
            <Text style={[a.text_lg, a.leading_tight]}>
              [a.text_lg a.leading_tight] {lorem}
            </Text>
            <Text style={[a.text_xl, a.leading_tight]}>
              [a.text_xl a.leading_tight] {lorem}
            </Text>
          </View>
          <View style={[a.gap_sm]}>
            <Text style={[a.text_xs, a.leading_snug]}>
              [a.text_xs a.leading_snug] {lorem}
            </Text>
            <Text style={[a.text_sm, a.leading_snug]}>
              [a.text_sm a.leading_snug] {lorem}
            </Text>
            <Text style={[a.text_md, a.leading_snug]}>
              [a.text_md a.leading_snug] {lorem}
            </Text>
            <Text style={[a.text_lg, a.leading_snug]}>
              [a.text_lg a.leading_snug] {lorem}
            </Text>
            <Text style={[a.text_xl, a.leading_snug]}>
              [a.text_xl a.leading_snug] {lorem}
            </Text>
          </View>
          <View style={[a.gap_sm]}>
            <Text style={[a.text_xs, a.leading_relaxed]}>
              [a.text_xs a.leading_relaxed] {lorem}
            </Text>
            <Text style={[a.text_sm, a.leading_relaxed]}>
              [a.text_sm a.leading_relaxed] {lorem}
            </Text>
            <Text style={[a.text_md, a.leading_relaxed]}>
              [a.text_md a.leading_relaxed] {lorem}
            </Text>
            <Text style={[a.text_lg, a.leading_relaxed]}>
              [a.text_lg a.leading_relaxed] {lorem}
            </Text>
            <Text style={[a.text_xl, a.leading_relaxed]}>
              [a.text_xl a.leading_relaxed] {lorem}
            </Text>
          </View>
        </Section>
      </View>
    </ScrollView>
  )
}

function Colors() {
  const t = useTheme()
  console.log(t)
  return (
    <Section
      style={[
        a.gutter_default,
        a.border,
        t.atoms.bg,
        t.atoms.border_contrast_low,
      ]}>
      <SectionTitle>Theme: {t.name}</SectionTitle>

      <View style={[a.gap_md]}>
        <Text style={[a.text_md, t.atoms.text_contrast_low]}>
          t.atoms.text_contrast_low
        </Text>
        <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
          t.atoms.text_contrast_medium
        </Text>
        <Text style={[a.text_md, t.atoms.text_contrast_high]}>
          t.atoms.text_contrast_high
        </Text>
        <Text style={[a.text_md, t.atoms.text]}>t.atoms.text</Text>
        <View style={[t.atoms.bg_contrast_500]}>
          <Text style={[a.text_md, t.atoms.text_inverted]}>
            t.atoms.text_inverted
          </Text>
        </View>
      </View>

      <View style={[a.gap_md]}>
        <Text style={[a.text_md, t.atoms.border_contrast_low]}>
          t.atoms.border_contrast_low
        </Text>
        <View style={[t.atoms.border_contrast_low, a.border_t]} />
        <Text style={[a.text_md, t.atoms.border_contrast_medium]}>
          t.atoms.border_contrast_medium
        </Text>
        <View style={[t.atoms.border_contrast_medium, a.border_t]} />
        <Text style={[a.text_md, t.atoms.border_contrast_high]}>
          t.atoms.border_contrast_high
        </Text>
        <View style={[t.atoms.border_contrast_high, a.border_t]} />
      </View>

      <Text style={[a.text_md, a.font_bold]}>t.atoms.shadow_*</Text>
      <View style={[a.gap_md]}>
        {Object.entries(t.atoms)
          .filter(([key]) => key.startsWith('shadow'))
          .map(([key]) => {
            return (
              <View
                key={key}
                style={[
                  a.w_full,
                  t.atoms[key as keyof typeof t.atoms] as ViewStyle,
                  {
                    height: 50,
                  },
                ]}
              />
            )
          })}
      </View>

      <Text style={[a.text_md, a.font_bold]}>t.atoms.bg_contrast_*</Text>
      <View style={[a.flex_row]}>
        {Object.entries(t.atoms)
          .filter(([key]) => key.startsWith('bg'))
          .map(([key]) => {
            return (
              <View
                key={key}
                style={[
                  a.flex_1,
                  t.atoms[key as keyof typeof t.atoms] as ViewStyle,
                  {
                    height: 50,
                  },
                ]}>
                <Text style={[a.text_2xs, a.text_center]}>
                  {key.replace(/\D/g, '') || 'bg'}
                </Text>
              </View>
            )
          })}
      </View>

      <Text style={[a.text_md, a.font_bold]}>Palettes</Text>
      {['contrast', 'primary', 'positive', 'negative'].map(palette => {
        return (
          <View key={palette} style={[a.flex_row]}>
            {Object.entries(t.palette)
              .filter(([key]) => key.startsWith(palette))
              .map(([key]) => {
                return (
                  <View
                    key={key}
                    style={[
                      a.flex_1,
                      {
                        height: 50,
                        backgroundColor:
                          t.palette[key as keyof typeof t.palette],
                      },
                    ]}>
                    <Text style={[a.text_2xs, a.text_center]}>
                      {key.replace(/\D/g, '')}
                    </Text>
                  </View>
                )
              })}
          </View>
        )
      })}
    </Section>
  )
}

function Text({
  children,
  style,
}: {
  children: React.ReactNode
  style?: StyleProp<TextStyle>
}) {
  const t = useTheme()
  return (
    <RNText style={[t.atoms.text, style, utils.leading(utils.flatten(style))]}>
      {children}
    </RNText>
  )
}

function SectionTitle({children}: {children: React.ReactNode}) {
  return <Text style={[a.text_3xl, a.font_bold]}>{children}</Text>
}

function Section({
  children,
  style,
}: {
  children: React.ReactNode
  style?: StyleProp<ViewStyle>
}) {
  0
  return <View style={[a.gap_lg, style]}>{children}</View>
}

const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`