import React from 'react';
import classNames from 'classnames';
import { SelectTime } from '@pisell/materials';
import { t } from "../i18n";
/**
 * Manual Add time：通过 END TIME 选择新的结束时刻（SelectTime / 虚拟键盘时间面板）。
 */
export var ManualTimeControls = function ManualTimeControls(_ref) {
  var visible = _ref.visible,
    endTime = _ref.endTime,
    onEndTimeChange = _ref.onEndTimeChange,
    _ref$slice = _ref.slice,
    slice = _ref$slice === void 0 ? 15 : _ref$slice;
  return /*#__PURE__*/React.createElement("section", {
    className: classNames('pisell-adjust-time__manual-panel', {
      'pisell-adjust-time__manual-panel--visible': visible
    })
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-adjust-time__end-time-box"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-adjust-time__end-time-label"
  }, t('pisell2.adjust-time.end-time')), /*#__PURE__*/React.createElement("div", {
    className: "pisell-adjust-time__end-time-field"
  }, /*#__PURE__*/React.createElement(SelectTime, {
    value: endTime,
    onChange: onEndTimeChange,
    slice: slice,
    popoverProps: {
      overlayClassName: 'pisell-adjust-time__end-time-popover',
      getPopupContainer: function getPopupContainer(node) {
        return node.parentElement || document.body;
      }
    },
    timePickerProps: {
      className: 'pisell-adjust-time__end-time-picker',
      bordered: false,
      suffixIcon: /*#__PURE__*/React.createElement("span", {
        className: "pisell-adjust-time__end-time-edit"
      }, /*#__PURE__*/React.createElement("span", {
        className: "pisell-adjust-time__end-time-edit-icon",
        "aria-hidden": true
      }, "\u270E"), t('pisell2.adjust-time.edit'))
    },
    timeProps: {
      style: {
        zoom: 0.85
      }
    }
  }))));
};