import Feather from '@expo/vector-icons/Feather'
import { useMMKVString } from 'react-native-mmkv'
import { Switch } from 'src/components/form/Switch'
import { ScreenScrollContainer } from 'src/components/layout'
import { SectionHeader, SettingRow } from 'src/components/ui'
import { haptic } from 'src/lib/haptics'
import { emit } from 'src/lib/tapestry/emit'
import { appStorage, setTheme, uiKeys } from 'src/state/storage'
import { Separator, useTheme, YStack } from 'tamagui'

type ThemeOption = {
  value: 'system' | 'light' | 'dark'
  label: string
  description: string
}

const THEME_OPTIONS: ThemeOption[] = [
  {
    value: 'system',
    label: 'System',
    description: 'Follow the device appearance setting.',
  },
  { value: 'light', label: 'Light', description: 'Neutral grey, for daytime work.' },
  {
    value: 'dark',
    label: 'Dark',
    description: 'Graphite, for low-light editing sessions.',
  },
]

export default function Screen() {
  const theme = useTheme()
  const forceSensitive = appStorage.getBoolean(uiKeys.forceSensitive) == true
  const hideCaptions = appStorage.getBoolean(uiKeys.hideCaptions) == true
  const hideStories = appStorage.getBoolean(uiKeys.hideStories) == true
  const [storedTheme] = useMMKVString(uiKeys.theme, appStorage)
  const active = (storedTheme ?? 'system') as ThemeOption['value']

  return (
    <ScreenScrollContainer variant="scroll" header="Appearance">
      <SectionHeader>Theme</SectionHeader>
      {THEME_OPTIONS.map((opt, idx) => {
        const selected = active === opt.value
        return (
          <YStack key={opt.value}>
            <SettingRow
              title={opt.label}
              description={opt.description}
              onPress={() => {
                if (selected) return
                haptic.selection()
                if (setTheme(opt.value)) emit('T')
              }}
              accessibility={{
                role: 'radio',
                label: opt.label,
                hint: opt.description,
                state: { selected },
              }}
              trailing={
                selected ? (
                  <Feather name="check" size={20} color={theme.interactiveActive.val} />
                ) : null
              }
              tone="secondary"
            />
            {idx < THEME_OPTIONS.length - 1 ? (
              <Separator borderColor="$borderColor" />
            ) : null}
          </YStack>
        )
      })}
      <Separator borderColor="$borderColor" />

      <SectionHeader spacing="loose">Media</SectionHeader>

      <SettingRow
        title="Force Show Sensitive Media"
        description="Removes sensitive/NSFW content warnings and displays media across accounts, feeds and hashtags."
        contentMaxWidth="60%"
        trailing={
          <Switch
            size="$3"
            defaultChecked={forceSensitive}
            onCheckedChange={(checked) => {
              haptic.selection()
              appStorage.set(uiKeys.forceSensitive, checked)
            }}
          >
            <Switch.Thumb transition="quicker" />
          </Switch>
        }
      />
      <Separator borderColor="$borderColor" />

      <SettingRow
        title="Hide Captions"
        description="Hides post captions on feeds"
        contentMaxWidth="60%"
        trailing={
          <Switch
            size="$3"
            defaultChecked={hideCaptions}
            onCheckedChange={(checked) => {
              haptic.selection()
              appStorage.set(uiKeys.hideCaptions, checked)
            }}
          >
            <Switch.Thumb transition="quicker" />
          </Switch>
        }
      />
      <Separator borderColor="$borderColor" />

      <SettingRow
        title="Hide Stories"
        description="Hides the story carousel"
        contentMaxWidth="60%"
        trailing={
          <Switch
            size="$3"
            defaultChecked={hideStories}
            onCheckedChange={(checked) => {
              haptic.selection()
              appStorage.set(uiKeys.hideStories, checked)
            }}
          >
            <Switch.Thumb transition="quicker" />
          </Switch>
        }
      />
      <Separator borderColor="$borderColor" />
    </ScreenScrollContainer>
  )
}
