var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useCallback } from 'react';
import { makeStyles, InputAdornment } from '@material-ui/core';
import { EventDateIcon } from '@fluentui/react-icons';
import { MuiPickersUtilsProvider, KeyboardDateTimePicker } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    inputRoot: {
        fontSize: 12
    },
    input: {
        borderRadius: 2,
        height: 32,
        padding: 0,
        paddingLeft: theme.spacing(1)
    },
    formTextInput: {
        fontSize: 14
    },
    labelRoot: {
        fontSize: 14
    },
    FormControl: {
        display: 'none',
        marginTop: 0
    }
}));
export const FluentDateTimePicker = (props) => {
    var _a;
    const classes = useStyles();
    const { id, udprecordid, label, startAdornment, endAdornment, handleDateChange: onChangeProp, selectedDate } = props, otherProps = __rest(props, ["id", "udprecordid", "label", "startAdornment", "endAdornment", "handleDateChange", "selectedDate"]);
    const onChange = useCallback((e, value) => {
        return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e, value);
    }, [onChangeProp]);
    return (React.createElement("div", null, React.createElement(MuiPickersUtilsProvider, { utils: DateFnsUtils }, React.createElement(KeyboardDateTimePicker
    // disableToolbar
    // variant='inline'
    , Object.assign({ 
        // disableToolbar
        // variant='inline'
        format: "MM/dd/yyyy HH:mm", margin: "normal", id: id, udprecordid: udprecordid, inputVariant: "outlined", value: selectedDate, onChange: onChange }, otherProps, { KeyboardButtonProps: {
            'aria-label': 'change date',
            udprecordid: udprecordid + '-button'
        }, keyboardIcon: React.createElement(EventDateIcon, { style: { fontSize: 16 } }), InputProps: Object.assign(Object.assign(Object.assign(Object.assign({ classes: Object.assign({ root: classes.input, input: classes.formTextInput }, (_a = props.InputProps) === null || _a === void 0 ? void 0 : _a.classes) }, props.InputProps), startAdornment), endAdornment), { startAdornment: (React.createElement(InputAdornment, { classes: { root: classes.inputRoot }, className: classes.inputRoot, position: "start" }, label)) }), InputLabelProps: {
            shrink: false,
            classes: {
                root: classes.labelRoot,
                focused: classes.labelFocused
            }
        } })))));
};
FluentDateTimePicker.propTypes = {
    /**
     * Adornment label (eg, From: )
     */
    label: PropTypes.string.isRequired
    /**
     * Id
     */
};
//# sourceMappingURL=FluentDateTimePicker.js.map