import {View} from 'react-native'

import {Button} from '@/components/ui/button'
import {Thumbnail} from '@/components/ui/thumbnail'
import {atoms as a} from '@/sprinkles'

// the photo picker block: preview + change/remove, or an add button
export const PhotoField = ({
  uri,
  label = 'Crumb photo',
  disabled,
  onPick,
  onClear,
}: {
  uri: string | null
  label?: string
  disabled?: boolean
  onPick: () => void
  onClear: () => void
}) =>
  uri ? (
    <View style={a.gap_sm}>
      <Thumbnail
        uri={uri}
        width="100%"
        aspectRatio={16 / 9}
        radius={12}
        accessibilityLabel={label}
      />
      <View style={[a.flex_row, a.gap_sm]}>
        <Button
          label="Change photo"
          variant="ghost"
          color="primary"
          size="small"
          shape="flush"
          onPress={onPick}
          disabled={disabled}
        />
        <Button
          label="Remove photo"
          variant="ghost"
          color="secondary"
          size="small"
          onPress={onClear}
          disabled={disabled}
        />
      </View>
    </View>
  ) : (
    <Button
      label="Add photo"
      variant="ghost"
      color="primary"
      size="small"
      shape="flush"
      onPress={onPick}
      disabled={disabled}
    />
  )
