import React from 'react';
import {Text as BaseText, View} from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import {Colors, fontSz, formatDate, hp, Images, ms} from '../../utils';
import {CustomPressable} from '../Button';
import {SmartImage} from '../Images/SmartImage';
import {Text} from '../Text';
import {useSDKConfig} from '../../contexts/SDKConfigContext';

const AppDateTimePicker = (props: {
  containerStyle?: any;
  inputStyle?: any;
  value: any;
  label: any;
  errorMsg: any;
  placeholder: any;
  prependComponent?: any;
  appendComponent?: any;
  show: boolean;
  mode: 'date' | 'time' | 'datetime' | 'countdown';
  onPress: () => void;
  onCancel: () => void;
  onChange: (date: any) => void;
  minimumDate?: Date;
  maximumDate?: Date;
  showAsterisk?: boolean;
}) => {
  const {
    value,
    placeholder,
    containerStyle,
    inputStyle,
    label,
    prependComponent,
    appendComponent,
    errorMsg = '',
    show,
    mode = 'date',
    onPress,
    onCancel,
    onChange,
    minimumDate,
    maximumDate,
    showAsterisk,
  } = props;
  const {primaryColor} = useSDKConfig();

  return (
    <View style={{width: '100%'}}>
      <CustomPressable
        activeOpacity={0.8}
        style={{
          position: 'relative',
          paddingBottom: ms(8),
          ...containerStyle,
        }}
        onPress={onPress}>
        {/* label */}
        <BaseText
          style={{
            fontSize: fontSz(14),
            fontFamily: 'Gordita-Regular',
            fontWeight: '400',
            color: Colors.inputBackgroundLight,
          }}>
          {label}
          {showAsterisk && (
            <Text
              fontSize={fontSz(14)}
              fontFamily="Gordita-Regular"
              fontWeight="400"
              text={'*'}
              color={Colors.debitRed}
            />
          )}
        </BaseText>

        {/* Text  */}
        <View
          style={{
            flexDirection: 'row',
            height: hp(55),
            paddingHorizontal: ms(14),
            marginTop: ms(4),
            borderRadius: ms(8),
            borderColor: errorMsg.length > 0 ? Colors.error : '#F4F4F4',
            borderWidth: ms(1),
            backgroundColor: '#F4F4F4',
          }}>
          {prependComponent}

          <CustomPressable
            style={{
              flex: 1,
              justifyContent: 'center',
            }}
            onPress={onPress}>
            <DateTimePickerModal
              isVisible={show}
              mode="date"
              onConfirm={onChange}
              onCancel={onCancel}
              minimumDate={minimumDate && new Date(minimumDate)}
              maximumDate={maximumDate && new Date(maximumDate)}
            />
            {/* change the date picker component to React Native Date Picker */}
            <Text
              style={{
                ...inputStyle,
                fontFamily: 'Gordita-Medium',
                color: value === null ? '#C4C4C4' : Colors.baseBlueText,
              }}
              text={
                value === null
                  ? 'Select date'
                  : formatDate(value, 'DD-MMM-YYYY')
              }
            />
          </CustomPressable>

          <View
            style={{
              justifyContent: 'center',
            }}>
            <CustomPressable activeOpacity={0.75} onPress={onPress}>
              <SmartImage
                source={Images.calender}
                style={{
                  width: ms(24),
                  height: ms(24),
                  tintColor: Colors.black,
                }}
              />
            </CustomPressable>
          </View>
        </View>
        {/* error message */}
        <Text
          style={{
            // paddingTop: ms(2.5),
            position: 'absolute',
            bottom: ms(-10),
            left: 0,
          }}
          fontSize={fontSz(14)}
          fontFamily="Gordita-Regular"
          fontWeight="400"
          text={`${errorMsg}`}
          color={Colors.error}
        />
      </CustomPressable>
      {/* {show && (
        <DateTimePicker
          value={value || new Date()}
          mode={mode}
          display="default"
          minimumDate={minimumDate}
          maximumDate={maximumDate}
          onChange={onChangeHandler}
        />
      )} */}
    </View>
  );
};

export default AppDateTimePicker;