import DateTimePicker from '@react-native-community/datetimepicker';
import type { FC } from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import TButton from '../TButton/TButton';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';
import { defaultScale } from '../../utils/Common';
import { moderateScale } from 'react-native-size-matters';
import TBottomModal from '../TModal/TBottomModal';
// import DeviceInfo from 'react-native-device-info';

interface Prop {
  date: Date;
  onChange: (selectedDate: any) => void;
  showPicker?: boolean;
  onCancelPress: () => void;
  onOkPress: () => void;
  negativeLabel?: string;
  positiveLabel?: string;
  theme: Theme;
  maxDate: Date;
  minDate: Date;
  txtColor?: string;
}

const TCalendar: FC<Prop> = ({
  date,
  onChange,
  showPicker,
  onCancelPress,
  onOkPress,
  negativeLabel = '',
  positiveLabel = '',
  maxDate,
  minDate,
  txtColor = '#000000',
}): any => {
  const { colors } = useTheme();
  const styleWithProps = styles({ colors });
  return (
    <>
      {Platform.OS === 'android' && showPicker && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={'date'}
          display={'spinner'}
          onChange={onChange}
          minimumDate={minDate}
          maximumDate={maxDate}
          positiveButton={{ label: positiveLabel, textColor: txtColor }}
          negativeButton={{ label: negativeLabel, textColor: txtColor }}
        />
      )}
      {Platform.OS === 'ios' && (
        <TBottomModal
          hasBackdrop
          backdropColor={colors.greyOpac50}
          visible={showPicker}
          onDismiss={onCancelPress}
          style={styleWithProps.bottomModalView}
          children={
            <>
              <View style={styleWithProps.modalContentView}>
                <TButton
                  title={negativeLabel}
                  variant="tertiary"
                  textColor={colors.textColor}
                  onPress={onCancelPress}
                  backgroundColor={colors.background}
                  style={styleWithProps.btnRightStyle}
                />
                <TButton
                  title={positiveLabel}
                  variant="tertiary"
                  textColor={colors.textColor}
                  onPress={onOkPress}
                  backgroundColor={colors.background}
                  style={styleWithProps.btnLeftStyle}
                />
              </View>
              <View style={styleWithProps.dateContainer}>
                <DateTimePicker
                  testID="dateTimePicker"
                  value={date}
                  themeVariant={'light'}
                  mode={'date'}
                  display={'spinner'}
                  onChange={onChange}
                  minimumDate={minDate}
                  maximumDate={maxDate}
                />
              </View>
              {/* {DeviceInfo.hasNotch() && Platform.OS === 'ios' && (
                <View style={styleWithProps.bottomPaddingView} />
              )} */}
            </>
          }
        />
      )}
    </>
  );
};

const styles = (props: { colors: any }) =>
  StyleSheet.create({
    modalContentView: {
      alignItems: 'flex-end',
      flexDirection: 'row',
      justifyContent: 'space-between',
      height: moderateScale(45, defaultScale),
      backgroundColor: props.colors.white,
    },
    dateContainer: {
      backgroundColor: props.colors.white,
    },
    btnRightStyle: {
      marginLeft: moderateScale(15, defaultScale),
    },
    btnLeftStyle: {
      marginRight: moderateScale(15, defaultScale),
    },
    bottomModalView: {
      justifyContent: 'flex-end',
      margin: 0,
    },
    bottomPaddingView: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: 36,
      backgroundColor: props.colors.white,
    },
  });

export default withTheme(TCalendar);