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 from 'react';
import { makeStyles } from '@material-ui/core';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    dateInput: {
        borderRadius: 2,
        height: 32,
        padding: theme.spacing(1),
        margin: theme.spacing(1), // Add margin around the input  
        fontSize: 14,
        border: '1px solid #ced4da',
        backgroundColor: 'transparent', // Set the background color to transparent  
        '&:focus': {
            borderColor: theme.palette.primary.main,
            outline: 'none',
        },
    },
}));
export const UdpDateSelector = (props) => {
    const classes = useStyles();
    const { id, udprecordid, label, handleDateChange: onChangeProp, selectedDate } = props, otherProps = __rest(props, ["id", "udprecordid", "label", "handleDateChange", "selectedDate"]);
    const onChange = (event) => {
        return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event.target.value);
    };
    return (React.createElement("label", { htmlFor: id, className: classes.labelRoot }, label, React.createElement("input", Object.assign({ type: "date", id: id, className: classes.dateInput, value: selectedDate, onChange: onChange }, otherProps))));
};
UdpDateSelector.propTypes = {
    label: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired,
    handleDateChange: PropTypes.func,
    selectedDate: PropTypes.string,
};
export default UdpDateSelector;
//# sourceMappingURL=UdpDateSelector.js.map