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, Text, useTheme } from 'tamagui'

// Compose Redesign Phase 1: device-level compose preferences. The Media
// Editor toggle and the Auto-Resize info line lived in `PostOptionsSheet`
// before, conflating per-post options (visibility, sensitive) with
// device-wide prefs. The redesign separates the two — per-post options
// will land in the Phase 4 overflow sheet, device prefs live here.
const MAX_IMAGE_SIZE_MB = 5
const MAX_IMAGE_WIDTH = 4096

export default function Screen() {
  const theme = useTheme()
  const mediaEdit = appStorage.getBoolean(uiKeys.mediaEdit) == true

  return (
    <ScreenScrollContainer variant="scroll" header="Compose">
      <SettingRow
        title="Enable Media Editor"
        description="Allows you to crop and resize photos using a square aspect ratio. Disable to preserve native aspect ratio."
        contentMaxWidth="60%"
        trailing={
          <Switch
            size="$3"
            defaultChecked={mediaEdit}
            onCheckedChange={(checked) => {
              haptic.selection()
              appStorage.set(uiKeys.mediaEdit, checked)
            }}
          >
            <Switch.Thumb transition="quicker" />
          </Switch>
        }
      />
      <Separator borderColor="$borderColor" />
      <SettingRow
        title="Auto-Resize Large Images"
        description={`Images larger than ${MAX_IMAGE_SIZE_MB}MB will be automatically resized to ${MAX_IMAGE_WIDTH}px max width.`}
        contentMaxWidth="60%"
        trailing={
          <Text fontSize="$5" fontWeight="bold" color={theme.color.val}>
            Enabled
          </Text>
        }
      />
    </ScreenScrollContainer>
  )
}
