"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Tooltip = require("./Tooltip");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

const Tooltip = _react.default.lazy(() => Promise.resolve().then(() => require('../../spi/Tooltip')));
/** @return frac formatted as "xx.y%" */
function str(frac) {
  return (frac * 100).toFixed(10).toString() + '%';
}
class Bar extends _react.default.PureComponent {
  render() {
    const totalOverheads = (this.props.overheads || []).reduce((left, {
      width
    }) => left + width, 0);
    const leftIncludingOverheads = this.props.left === undefined ? 0 : this.props.left + totalOverheads;
    const left = str(leftIncludingOverheads);
    const width = str(this.props.width ? this.props.width - totalOverheads : 1 - (leftIncludingOverheads || 0));
    const className = 'kui--bar ' + (this.props.className || 'kui--bar-default-color') + (this.props.onClick ? ' clickable' : '') + (this.props.left === undefined || this.props.width === undefined ? ' kui--sequence-diagram-in-progress' : '');
    return _react.default.createElement("div", {
      className: 'kui--bar-wrapper ' + (this.props.wrapperClassName || '')
    }, _react.default.createElement(Tooltip, Object.assign({
      markdown: this.props.title
    }, _Tooltip.tooltipProps), _react.default.createElement("div", {
      className: className,
      "data-left": left,
      "data-width": width,
      style: {
        left,
        width
      },
      onClick: this.props.onClick
    })), this.props.overheads && this.props.overheads.map(({
      title,
      width,
      offset
    }, idx) => _react.default.createElement(Tooltip, Object.assign({
      key: idx,
      markdown: title
    }, _Tooltip.tooltipProps), _react.default.createElement("div", {
      "data-overlay": idx,
      style: {
        marginLeft: str(offset + this.props.left),
        width: str(width)
      },
      className: 'kui--bar' + (this.props.onClick ? ' clickable' : '')
    }))));
  }
}
exports.default = Bar;