"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const datetimepicker_1 = require("@react-native-community/datetimepicker");
const react_native_1 = require("react-native");
const moment_1 = require("moment");
const IOS_DEFAULT_TINT_COLOR = '#007AFF';
const IOS_DATEPICKER_HEIGHT = 259;
const SHOW_OPACITY = 0.7;
const HIDE_OPACITY = 0;
const SHOW_TRANSLATE_Y = 0;
const HIDE_TRANSLATE_Y = IOS_DATEPICKER_HEIGHT;
var DefaultFormat;
(function (DefaultFormat) {
    DefaultFormat["date"] = "YYYY-MM-DD";
    DefaultFormat["datetime"] = "YYYY-MM-DD HH:mm";
    DefaultFormat["time"] = "HH:mm";
    DefaultFormat["countdown"] = "HH:mm";
})(DefaultFormat || (DefaultFormat = {}));
const SUPPORTED_ORIENTATIONS = [
    'portrait',
    'portrait-upside-down',
    'landscape',
    'landscape-left',
    'landscape-right',
];
class DatePicker extends React.Component {
    constructor(props) {
        super(props);
        const firstOpacity = props.visible ? SHOW_OPACITY : HIDE_OPACITY;
        const firstTranslateY = props.visible ? SHOW_TRANSLATE_Y : HIDE_TRANSLATE_Y;
        this.state = {
            visible: props.visible === true ? true : false,
            date: props.date ? new Date(props.date) : new Date(),
            animatedOpacity: new react_native_1.Animated.Value(firstOpacity),
            animatedTranslateY: new react_native_1.Animated.Value(firstTranslateY),
        };
    }
    render() {
        const props = this.props;
        const { minimumDate, maximumDate } = props;
        const androidProps = props;
        const { mode: androidMode, display, is24Hour } = androidProps;
        const iosProps = props;
        const { mode: iosMode, timeZoneOffsetInMinutes, textColor, locale, confirmText, cancelText, confirmTextStyle, cancelTextStyle, minuteInterval, } = iosProps;
        const DateTimePicker = (<datetimepicker_1.default value={this.state.date} minuteInterval={minuteInterval} onChange={(event, date) => this._onDateChange(event, date)} mode={androidMode || iosMode} maximumDate={maximumDate} minimumDate={minimumDate} timeZoneOffsetInMinutes={timeZoneOffsetInMinutes} textColor={textColor} locale={locale} display={display} is24Hour={is24Hour}/>);
        return !this.state.visible ? null : react_native_1.Platform.OS === 'android' ? (DateTimePicker) : (<react_native_1.Modal transparent={true} animationType="none" visible={this.state.visible} supportedOrientations={SUPPORTED_ORIENTATIONS} onRequestClose={() => this._hideModal()}>
				<react_native_1.View style={styles.container}>
					<react_native_1.Animated.View style={[
            styles.blackBackLayer,
            {
                opacity: this.state.animatedOpacity,
            },
        ]}>
						<react_native_1.TouchableWithoutFeedback onPress={() => this._cancelHandler()}>
							<react_native_1.View style={styles.touchableBackLayer}></react_native_1.View>
						</react_native_1.TouchableWithoutFeedback>
						<react_native_1.Animated.View style={[styles.iosBottomContainer, { transform: [{ translateY: this.state.animatedTranslateY }] }]}>
							<react_native_1.View style={styles.iosButtonContainer}>
								<react_native_1.TouchableOpacity style={styles.cancelButton} onPress={() => this._cancelHandler()}>
									<react_native_1.Text style={[styles.defaultCancelTxt, cancelTextStyle]}>{cancelText}</react_native_1.Text>
								</react_native_1.TouchableOpacity>
								<react_native_1.TouchableOpacity style={styles.confirmButton} onPress={() => this._submitDate()}>
									<react_native_1.Text style={[styles.defaultConfirmTxt, confirmTextStyle]}>{confirmText}</react_native_1.Text>
								</react_native_1.TouchableOpacity>
							</react_native_1.View>
							{DateTimePicker}
						</react_native_1.Animated.View>
					</react_native_1.Animated.View>
				</react_native_1.View>
			</react_native_1.Modal>);
    }
    UNSAFE_componentWillReceiveProps(nextProps) {
        const { visible } = nextProps;
        if (this.state.visible !== visible) {
            visible ? this._showDatePicker() : this._hideDatePicker();
        }
    }
    _onDateChange(event, date) {
        if (date === undefined) {
            return this._cancelHandler();
        }
        const nextState = { date, visible: react_native_1.Platform.OS === 'ios' };
        this.setState(nextState);
        if (react_native_1.Platform.OS === 'android') {
            this._submitDate();
        }
    }
    _submitDate() {
        const date = this.state.date;
        const dateStr = dateToStr(date, this.props.format || DefaultFormat[this.props.mode]);
        this.props.onDateChange(dateStr, date);
    }
    _cancelHandler() {
        this.props.onDateChange();
    }
    _showDatePicker() {
        if (react_native_1.Platform.OS === 'android') {
            this.setState({ visible: true });
        }
        else if (react_native_1.Platform.OS === 'ios') {
            this._showModal();
        }
    }
    _hideDatePicker() {
        if (react_native_1.Platform.OS === 'android') {
            this.setState({ visible: false });
        }
        else if (react_native_1.Platform.OS === 'ios') {
            this._hideModal();
        }
    }
    /** @description show modal for ios */
    _showModal() {
        this._animatedModal(true);
    }
    /** @description hide modal for ios */
    _hideModal() {
        this._animatedModal(false);
    }
    _animatedModal(isShow) {
        const ANIMATION_DURATION = 300;
        if (isShow) {
            this.setState({ visible: true });
        }
        react_native_1.Animated.parallel([
            react_native_1.Animated.timing(this.state.animatedTranslateY, {
                toValue: isShow ? SHOW_TRANSLATE_Y : HIDE_TRANSLATE_Y,
                duration: ANIMATION_DURATION,
            }),
            react_native_1.Animated.timing(this.state.animatedOpacity, {
                toValue: isShow ? SHOW_OPACITY : HIDE_OPACITY,
                duration: ANIMATION_DURATION,
            }),
        ]).start(() => {
            if (!isShow) {
                this.setState({ visible: false });
            }
        });
    }
}
DatePicker.defaultProps = {
    mode: 'date',
    date: new Date(),
    confirmText: 'Confirm',
    cancelText: 'Cancel',
};
function dateToStr(date, format) {
    return moment_1.default(date).format(format);
}
exports.dateToStr = dateToStr;
const styles = react_native_1.StyleSheet.create({
    container: { flex: 1 },
    blackBackLayer: { flex: 1, backgroundColor: '#000000' },
    touchableBackLayer: { flex: 1 },
    iosBottomContainer: { backgroundColor: '#fff', height: IOS_DATEPICKER_HEIGHT },
    iosButtonContainer: {
        backgroundColor: '#fff',
        flex: 1,
        flexDirection: 'row',
        alignContent: 'center',
    },
    cancelButton: {
        left: 0,
        marginLeft: 24,
        marginTop: 8,
        height: '100%',
    },
    confirmButton: {
        right: 0,
        marginRight: 24,
        marginTop: 8,
        position: 'absolute',
        height: '100%',
    },
    defaultCancelTxt: { color: '#0a0a0a', fontWeight: '600' },
    defaultConfirmTxt: { color: IOS_DEFAULT_TINT_COLOR, fontWeight: '600' },
});
exports.default = DatePicker;
//# sourceMappingURL=datepicker.js.map