import React from 'react'
import { Appearance, Platform, Text } from 'react-native'
import { colorToHex } from './colorToHex'
import { throwIfInvalidProps } from './propChecker'

const DatePicker = Platform.select({
  android: () => require('./DatePickerAndroid').default,
  ios: () => require('./DatePickerIOS').default,
  default: () => <Text>DatePicker is not supported on this platform.</Text>,
})()

const DatePickerWrapper = (props) => {
  if (__DEV__) throwIfInvalidProps(props)
  return (
    <DatePicker
      ref={props.innerRef}
      {...props}
      textColor={colorToHex(getTextColor(props))}
      theme={getTheme(props)}
      fadeToColor={colorToHex(props.fadeToColor)}
      title={getTitle(props)}
      confirmText={props.confirmText ? props.confirmText : 'Confirm'}
      cancelText={props.cancelText ? props.cancelText : 'Cancel'}
      androidVariant={getAndroidVariant(props)}
      minuteInterval={props.minuteInterval ? props.minuteInterval : 1}
      mode={props.mode ? props.mode : 'datetime'}
      timeZoneOffsetInMinutes={
        props.timeZoneOffsetInMinutes == null
          ? ''
          : props.timeZoneOffsetInMinutes.toString()
      }
    />
  )
}

const getTheme = (props) => {
  if (props.theme) return props.theme
  if (!Appearance) return 'auto'
  return Appearance.getColorScheme()
}

const getTextColor = (props) => {
  if (props.textColor) return props.textColor
  const darkTheme = getTheme(props) === 'dark'
  if (darkTheme) return 'white'
  return undefined
}

const getAndroidVariant = (props) => {
  const { modal, androidVariant } = props
  if (androidVariant) return androidVariant
  return modal ? 'nativeAndroid' : 'iosClone'
}

const getTitle = (props) => {
  const { title, mode } = props
  if (title === null) return ''
  if (title) return title
  if (mode === 'time') return 'Select time'
  return 'Select date'
}

export default React.memo(DatePickerWrapper)