import React from 'react';
import { c as _slicedToArray } from './_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
import { I as Icon, A as AngleDownIcon } from './index-fc484d02.js';
import { d as dayjs } from './dayjs.min-c91ef7b0.js';

var css_248z = ".TimePickerInput_timePickerInput__qghY7 {\n  padding: 4px;\n  border-radius: 4px;\n  border: 1px solid #eee;\n  width: 64px;\n  display: flex;\n  align-items: center; }\n  .TimePickerInput_timePickerInputArrow__3w_7B {\n    width: 12px !important;\n    height: 12px !important; }\n  .TimePickerInput_timePickerInputArrow__3w_7B:first-child {\n    transform: rotate(180deg); }\n  .TimePickerInput_timePickerInput__qghY7 input {\n    border: none;\n    outline: none;\n    padding: 0;\n    width: 100%;\n    font-size: 24px;\n    /* Chrome, Safari, Edge, Opera */ }\n  .TimePickerInput_timePickerInput__qghY7 input::-webkit-outer-spin-button,\n  .TimePickerInput_timePickerInput__qghY7 input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0; }\n";
var styles = {"timePickerInput":"TimePickerInput_timePickerInput__qghY7","timePickerInputArrow":"TimePickerInput_timePickerInputArrow__3w_7B"};
styleInject(css_248z);

function TimePickerInput(_ref) {
  var innerRef = _ref.innerRef,
    onChange = _ref.onChange,
    value = _ref.value,
    increment = _ref.increment,
    prefixClassName = _ref.prefixClassName,
    max = _ref.max;
  var handleChange = React.useCallback(function (newValue) {
    if (+newValue > max) onChange("00");else onChange("".concat(newValue));
  });

  // in display we want to always show 2 digits 
  // [1 should show up as 01, but 13 should show up as 13]
  var inputValue = +value > 9 ? "".concat(+value) : "0".concat(+value);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.timePickerInput, " ").concat(prefixClassName)
  }, /*#__PURE__*/React.createElement("input", {
    type: "number",
    value: inputValue,
    onChange: function onChange(e) {
      return handleChange(e.target.value);
    },
    ref: innerRef,
    className: "".concat(prefixClassName, "-element")
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.timePickerInputArrows, " ").concat(prefixClassName, "-arrows")
  }, /*#__PURE__*/React.createElement(Icon, {
    onClick: function onClick() {
      return handleChange(+value + increment);
    },
    src: AngleDownIcon,
    className: "".concat(styles.timePickerInputArrow, " ").concat(prefixClassName, "-arrow")
  }), /*#__PURE__*/React.createElement(Icon, {
    onClick: function onClick() {
      return handleChange(+value - increment);
    },
    src: AngleDownIcon,
    className: "".concat(styles.timePickerInputArrow, " ").concat(prefixClassName, "-arrow")
  })));
}
TimePickerInput.propTypes = {
  innerRef: PropTypes.node,
  onChange: PropTypes.func,
  value: PropTypes.object,
  increment: PropTypes.number,
  max: PropTypes.number,
  prefixClassName: PropTypes.string
};
TimePickerInput.defaultProps = {
  innerRef: null,
  increment: 1,
  max: Number.MAX_SAFE_INTEGER,
  onChange: function onChange() {},
  prefixClassName: ""
};
TimePickerInput.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TimePickerInput",
  "props": {
    "innerRef": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "increment": {
      "defaultValue": {
        "value": "1",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "max": {
      "defaultValue": {
        "value": "Number.MAX_SAFE_INTEGER",
        "computed": true
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    }
  }
};

var css_248z$1 = ".date-picker-tooltip {\n  max-width: unset !important; }\n\n.TimePicker_timePicker__xpImR {\n  background-color: #fff;\n  border-radius: 8px;\n  margin-top: 0px;\n  display: flex;\n  align-items: flex-start;\n  color: #333;\n  padding: 8px;\n  display: flex;\n  align-items: center;\n  font-size: 24px; }\n  .TimePicker_timePicker__xpImR > span {\n    padding: 0 4px; }\n  .TimePicker_timePickerSwitcher__15qP7 {\n    font-size: 14px;\n    font-weight: 500;\n    margin-left: 8px; }\n    .TimePicker_timePickerSwitcherValue__1vdIY {\n      color: #999;\n      transition: 0.2s ease-out;\n      cursor: pointer; }\n      .TimePicker_timePickerSwitcherValue__1vdIY:hover {\n        color: #000; }\n      .TimePicker_timePickerSwitcherValue__1vdIY.TimePicker_active__ncmKE {\n        color: #000; }\n\n@keyframes TimePicker_show-in__3SLXo {\n  0% {\n    opacity: 0; }\n  100% {\n    opacity: 1; } }\n";
var styles$1 = {"timePicker":"TimePicker_timePicker__xpImR","timePickerSwitcher":"TimePicker_timePickerSwitcher__15qP7","timePickerSwitcherValue":"TimePicker_timePickerSwitcherValue__1vdIY","active":"TimePicker_active__ncmKE","show-in":"TimePicker_show-in__3SLXo"};
styleInject(css_248z$1);

function TimePicker(_ref) {
  var value = _ref.value,
    onChange = _ref.onChange,
    prefixClassName = _ref.prefixClassName;
  var date = dayjs(value);
  var HHRef = React.useRef();
  var MMRef = React.useRef();
  var _React$useState = React.useState(date.format("h")),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    HH = _React$useState2[0],
    setHH = _React$useState2[1];
  var _React$useState3 = React.useState(date.format("mm")),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    MM = _React$useState4[0],
    setMM = _React$useState4[1];
  var _React$useState5 = React.useState(value.format("A")),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    AMPM = _React$useState6[0],
    setAMPM = _React$useState6[1];
  var amActiveClassName = AMPM === "AM" ? styles$1.active : "";
  var pmActiveClassName = AMPM === "PM" ? styles$1.active : "";
  var generateValue = React.useCallback(function (newHH, newMM, newAMPM) {
    var date = dayjs(value);
    var hoursToAdd = 0;
    if (newAMPM === "PM" && +newHH === 12) hoursToAdd = 0;else if (newAMPM === "PM") hoursToAdd = 12;else if (newAMPM === "AM" && +newHH === 12) hoursToAdd = 12;
    date = date.set("h", parseInt(newHH, 10) + hoursToAdd);
    date = date.set("m", parseInt(newMM, 10));
    if (dayjs(value).get("d") !== date.get("d")) date = date.set("d", dayjs(value).get("d"));
    return date;
  }, [date]);
  var handleHHChange = React.useCallback(function (e) {
    var newHH = e.target ? +e.target.value : e;
    if (!newHH) newHH = 0;
    if (Number.isNaN(+newHH)) return;
    if (newHH > 12) return MMRef.current.focus();
    if (newHH > 1) {
      MMRef.current.select();
      MMRef.current.focus();
    }
    if (newHH === 0) newHH = 12;
    if (newHH < 1) return;
    setHH(newHH);
    onChange(generateValue(newHH, MM, AMPM));
  }, [date]);
  var handleMMChange = React.useCallback(function (e) {
    var newMM = e.target ? e.target.value : e;
    if (!newMM) newMM = 0;
    if (Number.isNaN(+newMM)) return;
    if (newMM > 59) return;
    if (newMM < 0) return;
    setMM(newMM);
    onChange(generateValue(HH, newMM, AMPM));
  }, [date]);
  var handleAMPMChange = React.useCallback(function (newAMPM) {
    return function () {
      setAMPM(newAMPM);
      onChange(generateValue(HH, MM, newAMPM));
    };
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.timePicker, " ").concat(prefixClassName)
  }, /*#__PURE__*/React.createElement(TimePickerInput, {
    autoFocus: true,
    innerRef: HHRef,
    value: HH,
    onChange: handleHHChange,
    placeholder: "HH",
    increment: 1,
    max: 12,
    prefixClassName: "".concat(prefixClassName, "-input")
  }), /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixClassName, "-separator")
  }, ":"), /*#__PURE__*/React.createElement(TimePickerInput, {
    innerRef: MMRef,
    value: MM,
    onChange: handleMMChange,
    placeholder: "MM",
    increment: 1,
    max: 59,
    prefixClassName: "".concat(prefixClassName, "-input")
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.timePickerSwitcher, " ").concat(prefixClassName, "-switcher")
  }, /*#__PURE__*/React.createElement("div", {
    onClick: handleAMPMChange("AM"),
    className: "".concat(styles$1.timePickerSwitcherValue, " ").concat(amActiveClassName, " ").concat(prefixClassName, "-switcher-value")
  }, "AM"), /*#__PURE__*/React.createElement("div", {
    onClick: handleAMPMChange("PM"),
    className: "".concat(styles$1.timePickerSwitcherValue, " ").concat(pmActiveClassName, " ").concat(prefixClassName, "-switcher-value")
  }, "PM")));
}
TimePicker.propTypes = {
  onChange: PropTypes.func,
  value: PropTypes.object,
  prefixClassName: PropTypes.string
};
TimePicker.defaultProps = {
  onChange: function onChange() {},
  value: dayjs(),
  prefixClassName: ""
};
TimePicker.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TimePicker",
  "props": {
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "defaultValue": {
        "value": "dayjs()",
        "computed": true
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

export { TimePicker as T };
