import '../_commonjsHelpers-97e6d7b1.js';
import React from 'react';
import 'react-dom';
import { f as _inherits, g as _createSuper, i as _classCallCheck, _ as _defineProperty, n as _assertThisInitialized, h as _createClass } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import { T as Tooltip } from '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, A as AngleDownIcon } from '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import '../index-155df85b.js';
import '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import { d as dayjs } from '../dayjs.min-c91ef7b0.js';
import '../index-b65fa23c.js';
import { Label } from '../ui/label.js';
import { T as TextInput } from '../TextInput-23c18ec3.js';
import { T as TimePicker } from '../index-84f3f379.js';

var css_248z = ".Time_date__2Z8yY {\n  position: relative;\n  margin-bottom: 24px; }\n\n.Time_dateLabel__hukz9 {\n  display: block;\n  color: #666;\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 6px;\n  margin-left: 2px;\n  transition: 0.2s ease-out; }\n  .Time_dateLabel__hukz9.Time_focused__1UPxT {\n    color: #124fa0; }\n\n.Time_dateInputWrapper__34Fsi {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #fff;\n  padding: 4px 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  outline: none;\n  transition: 0.2s ease-out; }\n  .Time_dateInputWrapper__34Fsi.Time_focused__1UPxT {\n    border-color: #124fa0; }\n  .Time_dateInputWrapper__34Fsi.Time_disabled__HCGGF {\n    pointer-events: none;\n    background-color: #eee; }\n\n.Time_dateInput__2_BmJ {\n  border: none;\n  outline: none;\n  width: 100%;\n  font-size: 12px;\n  white-space: nowrap; }\n  .Time_dateInput__2_BmJ span {\n    opacity: 0.3; }\n\n.Time_dateError__11NVd .Time_dateLabel__hukz9 {\n  color: #f44336; }\n\n.Time_dateError__11NVd .Time_dateInputWrapper__34Fsi {\n  border-color: #f44336;\n  background-color: rgba(244, 67, 54, 0.05); }\n\n.Time_dateInputSubtext__2NlwP {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 4px;\n  font-size: 12px;\n  position: absolute;\n  bottom: 0;\n  transform: translate3d(0, 100%, 0);\n  padding-top: 4px; }\n\n.Time_dateInputSubtextError__1qlVk {\n  color: #ff0c0c;\n  opacity: 0.8; }\n\n.Time_datePickrInput__1Zqla {\n  position: absolute;\n  left: 0;\n  bottom: 0; }\n\n.Time_dateInputZeroState__1b9la {\n  font-family: 'Roboto';\n  display: block;\n  padding: 16px;\n  font-size: 14px;\n  opacity: 0.4; }\n";
var styles = {"date":"Time_date__2Z8yY","dateLabel":"Time_dateLabel__hukz9","focused":"Time_focused__1UPxT","dateInputWrapper":"Time_dateInputWrapper__34Fsi","disabled":"Time_disabled__HCGGF","dateInput":"Time_dateInput__2_BmJ","dateError":"Time_dateError__11NVd","dateInputSubtext":"Time_dateInputSubtext__2NlwP","dateInputSubtextError":"Time_dateInputSubtextError__1qlVk","datePickrInput":"Time_datePickrInput__1Zqla","dateInputZeroState":"Time_dateInputZeroState__1b9la"};
styleInject(css_248z);

var Time = /*#__PURE__*/function (_React$Component) {
  _inherits(Time, _React$Component);
  var _super = _createSuper(Time);
  function Time() {
    var _this;
    _classCallCheck(this, Time);
    _this = _super.call(this);
    _defineProperty(_assertThisInitialized(_this), "_DOMNode", /*#__PURE__*/React.createRef());
    _defineProperty(_assertThisInitialized(_this), "_getParsedDate", function () {
      var value = _this.props.value;
      var format = "hh:mm A";
      var date = _this._getParsedValueFromDate(value || new Date());
      if (!date.isValid()) return "Invalid Time";
      return "".concat(date.format(format));
    });
    _defineProperty(_assertThisInitialized(_this), "_getParsedValueFromDate", function (value) {
      return dayjs(value);
    });
    _defineProperty(_assertThisInitialized(_this), "_handleChange", function (date) {
      _this.setState({
        value: date
      });
    });
    _defineProperty(_assertThisInitialized(_this), "toggleDate", function () {
      if (!_this.props.disabled) _this.setState(function (state) {
        return {
          active: !state.active,
          focused: !state.active
        };
      });
    });
    _defineProperty(_assertThisInitialized(_this), "closeDate", function () {
      _this.setState({
        active: false,
        focused: false
      });
      _this.props.onChange(_this.state.value.toDate());
    });
    _this.state = {
      active: false,
      focused: false,
      value: dayjs()
    };
    return _this;
  }
  _createClass(Time, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        className = _this$props.className,
        error = _this$props.error,
        disabled = _this$props.disabled,
        prefixClassName = _this$props.prefixClassName;
      var errorClassName = error ? styles.dateError : "";
      var disabledClassName = disabled ? styles.disabled : "";
      return /*#__PURE__*/React.createElement("div", {
        "data-testid": "time",
        className: "".concat(styles.date, " ").concat(errorClassName, " ").concat(disabledClassName, " ").concat(prefixClassName, " ").concat(className)
      }, this.renderLabel(), this.renderInput(), /*#__PURE__*/React.createElement(Tooltip, {
        onClose: this.closeDate,
        attachTo: this._DOMNode,
        active: this.state.active,
        offset: this.props.offset,
        prefixClassName: "".concat(prefixClassName, "-tooltip"),
        position: this.props.position
      }, /*#__PURE__*/React.createElement(TimePicker, {
        prefixClassName: "".concat(prefixClassName, "-picker"),
        value: this.state.value,
        onChange: this._handleChange
      })));
    }
  }, {
    key: "renderLabel",
    value: function renderLabel() {
      var _this$props2 = this.props,
        prefixClassName = _this$props2.prefixClassName,
        error = _this$props2.error,
        label = _this$props2.label;
      if (!label) return null;
      return /*#__PURE__*/React.createElement(Label, {
        focused: this.state.focused,
        error: error,
        className: "".concat(prefixClassName, "-label")
      }, label);
    }
  }, {
    key: "renderInput",
    value: function renderInput() {
      var _this$state = this.state,
        focused = _this$state.focused,
        active = _this$state.active;
      var _this$props3 = this.props,
        placeholder = _this$props3.placeholder,
        prefixClassName = _this$props3.prefixClassName,
        onFocus = _this$props3.onFocus,
        onBlur = _this$props3.onBlur,
        error = _this$props3.error,
        disabled = _this$props3.disabled;
      var parsedValue = this._getParsedDate();
      return /*#__PURE__*/React.createElement(TextInput, {
        prefixClassName: "".concat(prefixClassName, "-input"),
        innerRef: this._DOMNode,
        onKeyDown: this._handleKeyDown,
        onFocus: onFocus,
        onBlur: onBlur,
        onMouseDown: this.toggleDate,
        focused: focused,
        active: active,
        value: parsedValue,
        placeholder: placeholder,
        error: error,
        editable: false,
        disabled: disabled,
        postfixComponent: /*#__PURE__*/React.createElement(Icon, {
          src: AngleDownIcon
        })
      });
    }
  }]);
  return Time;
}(React.Component);
Time.propTypes = {
  /** The classname to appended to the outermost element */
  className: PropTypes.string,
  /** If the input is disabled (non-editable) */
  disabled: PropTypes.bool,
  /** If the input has an error. */
  error: PropTypes.bool,
  /** The prefix classname appended to all elements */
  prefixClassName: PropTypes.string,
  /** Label text */
  label: PropTypes.string,
  /** The offset of the tooltip containing the picker */
  offset: PropTypes.object,
  /** onBlur callback */
  onBlur: PropTypes.func,
  /** onChange callback */
  onChange: PropTypes.func,
  /** onFocus callback */
  onFocus: PropTypes.func,
  /** The input placeholder (when no value is selected) */
  placeholder: PropTypes.string,
  /** The position of the tooltip */
  position: PropTypes.string,
  /** The value of the input */
  value: PropTypes.string
};
Time.defaultProps = {
  label: "",
  className: "",
  prefixClassName: "",
  value: "",
  placeholder: "",
  error: false,
  disabled: false,
  offset: null,
  position: null,
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  onChange: function onChange() {}
};
Time.classNames = {
  $prefix: "Added to the wrapper",
  "$prefix-label": "Added to the wrapper",
  "$prefix-input": "Added to the wrapper",
  "$prefix-tooltip": "Added to the wrapper",
  "$prefix-tooltip-overlay": "Added to the wrapper",
  "$prefix-tooltip-inner": "Added to the wrapper",
  "$prefix-tooltip-caret": "Added to the wrapper",
  "$prefix-tooltip-body": "Added to the wrapper",
  "$prefix-picker": "Added to the wrapper",
  "$prefix-picker-input": "Added to the wrapper",
  "$prefix-picker-input-element": "Added to the wrapper",
  "$prefix-picker-input-arrows": "Added to the wrapper",
  "$prefix-picker-input-arrow": "Added to the wrapper",
  "$prefix-picker-switcher": "Added to the wrapper",
  "$prefix-picker-switcher-value": "Added to the wrapper"
};
Time.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "renderLabel",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "renderInput",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_getParsedDate",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_getParsedValueFromDate",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "value",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_handleChange",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "date",
      "type": null
    }],
    "returns": null
  }, {
    "name": "toggleDate",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "closeDate",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }],
  "displayName": "Time",
  "props": {
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label text"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to appended to the outermost element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The prefix classname appended to all elements"
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The value of the input"
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The input placeholder (when no value is selected)"
    },
    "error": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If the input has an error."
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If the input is disabled (non-editable)"
    },
    "offset": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "The offset of the tooltip containing the picker"
    },
    "position": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The position of the tooltip"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onFocus callback"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onBlur callback"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange callback"
    }
  }
};

export default Time;
