import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker'
import React from 'react'
import { Modal, Platform, StyleSheet, View } from 'react-native'
import { Text } from '../../../components/display/text'
import FormSheet from '../../../components/primitive/form_sheet'
import { useTheme } from '../../../hooks'

export type AgeCheckSelectBirthdateProps = {
  onChange: (date: Date) => void
  onDismiss?: () => void
  onRequestClose: () => void
  onSubmit: (date: Date) => void
  value?: Date | null
  visible?: boolean
}

export function AgeCheckSelectBirthdateModal(props: AgeCheckSelectBirthdateProps) {
  if (Platform.OS === 'ios') return <IOSBirthdateModal {...props} />
  if (Platform.OS === 'android') return <AndroidBirthdatePicker {...props} />

  return <Text>Birthdate selection is not supported on this platform.</Text>
}

const MINIMUM_BIRTHDATE = new Date(1900, 0, 1)

function IOSBirthdateModal({
  onChange,
  onDismiss,
  onRequestClose,
  onSubmit,
  value,
  visible,
}: AgeCheckSelectBirthdateProps) {
  const styles = useStyles()
  const today = React.useMemo(() => new Date(), [])
  const selected = value || today

  const handleChange = (_event: DateTimePickerEvent, date?: Date) => {
    if (date) onChange(date)
  }

  const handleSave = () => {
    onSubmit(selected)
    onRequestClose()
  }

  return (
    <Modal
      visible={visible}
      animationType="slide"
      presentationStyle="pageSheet"
      onRequestClose={onRequestClose}
      onDismiss={onDismiss}
    >
      <FormSheet.Root style={styles.formSheet} contentStyle={styles.formSheetContent}>
        <FormSheet.Header>
          <FormSheet.HeaderTitle>Your birthdate</FormSheet.HeaderTitle>
          <FormSheet.HeaderActions>
            <FormSheet.HeaderTextButton onPress={onRequestClose}>Cancel</FormSheet.HeaderTextButton>
            <FormSheet.HeaderButton title="Save" onPress={handleSave} />
          </FormSheet.HeaderActions>
        </FormSheet.Header>
        <View style={styles.content}>
          <View style={styles.card}>
            <Text nativeID="birthdateLabel" variant="tertiary" style={styles.label}>
              Birthdate
            </Text>
            <View style={styles.pickerContainer}>
              <DateTimePicker
                timeZoneName="UTC"
                accessibilityLabelledBy="birthdateLabel"
                testID="age-check-date-picker"
                mode="date"
                display="spinner"
                value={selected}
                minimumDate={MINIMUM_BIRTHDATE}
                maximumDate={today}
                onChange={handleChange}
              />
            </View>
          </View>
        </View>
      </FormSheet.Root>
    </Modal>
  )
}

function AndroidBirthdatePicker({
  onRequestClose,
  onSubmit,
  value,
  visible,
}: AgeCheckSelectBirthdateProps) {
  if (!visible) return null

  const today = new Date()
  const selected = value || today

  const handleAndroidDateChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
    if (event.type === 'set' && selectedDate) {
      onSubmit(selectedDate)
    }
    onRequestClose()
  }

  return (
    <DateTimePicker
      timeZoneName="UTC"
      testID="age-check-date-picker-android"
      mode="date"
      display="spinner"
      value={selected}
      minimumDate={MINIMUM_BIRTHDATE}
      maximumDate={today}
      onChange={handleAndroidDateChange}
    />
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  return StyleSheet.create({
    formSheet: {
      backgroundColor: colors.surfaceColor080,
    },
    formSheetContent: {
      flex: 1,
    },
    content: {
      flex: 1,
      backgroundColor: colors.surfaceColor080,
      padding: 16,
      justifyContent: 'flex-start',
    },
    card: {
      backgroundColor: colors.surfaceColor100,
      borderRadius: 8,
      padding: 16,
    },
    label: {
      marginBottom: 8,
      textTransform: 'uppercase',
    },
    pickerContainer: {
      backgroundColor: colors.surfaceColor100,
      borderRadius: 8,
    },
  })
}