import type { ErrorBoundaryProps } from 'expo-router'
import { ErrorState } from 'src/components/common/ErrorState'
import { Switch } from 'src/components/form/Switch'
import { ScreenScrollContainer } from 'src/components/layout'
import { SettingRow } from 'src/components/ui'
import { haptic } from 'src/lib/haptics'
import { appStorage, uiKeys } from 'src/state/storage'
import { Separator } from 'tamagui'

export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
  return <ErrorState message={error.message} onRetry={retry} />
}

export default function Screen() {
  const showAltText = appStorage.getBoolean(uiKeys.showAltText) == true
  const requireSelfAltText = appStorage.getBoolean(uiKeys.requireSelfAltText) == true

  return (
    <ScreenScrollContainer variant="scroll" header="Accessibility">
      <SettingRow
        title="Show Alt Text Button"
        description="Adds a tappable button on the bottom right corner of media to easily view alt text"
        contentMaxWidth="60%"
        trailing={
          <Switch
            size="$3"
            defaultChecked={showAltText}
            onCheckedChange={(checked) => {
              haptic.selection()
              appStorage.set(uiKeys.showAltText, checked)
            }}
          >
            <Switch.Thumb transition="quicker" />
          </Switch>
        }
      />
      <Separator borderColor="$borderColor" />
      <SettingRow
        title="Require Alt-Text in Compose"
        description="Require yourself to add alt-text to posts you compose before they can be shared"
        contentMaxWidth="60%"
        trailing={
          <Switch
            size="$3"
            defaultChecked={requireSelfAltText}
            onCheckedChange={(checked) => {
              haptic.selection()
              appStorage.set(uiKeys.requireSelfAltText, checked)
            }}
          >
            <Switch.Thumb transition="quicker" />
          </Switch>
        }
      />
    </ScreenScrollContainer>
  )
}
