import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import DatePicker from "react-datepicker";
import { Input, Box, Select, VStack } from "@chakra-ui/react";
import { css, Global } from "@emotion/react";
dayjs.extend(utc);
const DatePropertyEditor = (props) => {
    return (_jsxs(VStack, Object.assign({ spacing: 2, w: "full" }, { children: [_jsx(Global, { styles: css `
          @import "https://unpkg.com/react-datepicker@4.7.0/dist/react-datepicker.css";
        ` }), _jsxs(Select, Object.assign({ size: "sm", onChange: (e) => {
                    props.onChange(e.target.value === "now"
                        ? { type: "now" }
                        : e.target.value === "blank"
                            ? { type: "blank" }
                            : { type: "exact", date: new Date().toISOString() });
                }, value: props.value.type }, { children: [_jsx("option", Object.assign({ value: "blank" }, { children: "Blank" })), _jsx("option", Object.assign({ value: "now" }, { children: "Now" })), _jsx("option", Object.assign({ value: "exact" }, { children: "Exact Date" }))] })), props.value.type === "exact" && (_jsx(Box, Object.assign({ justifyContent: "flex-end", marginLeft: "8%" }, { children: _jsx(Input, { as: DatePicker, size: "sm", type: "date", selected: new Date(props.value.date), showTimeSelect: true, dateFormat: "dd/MM/yyyy hh:mm aa", 
                    // @ts-ignore
                    onChange: (date) => {
                        props.onChange({
                            type: "exact",
                            date: dayjs(date).utc(false).toISOString(),
                        });
                    } }) })))] })));
};
export default DatePropertyEditor;
//# sourceMappingURL=date.js.map