'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

var _TimeScrubberTimeDisplay = require('./TimeScrubberTimeDisplay');

var _TimeScrubberTimeDisplay2 = _interopRequireDefault(_TimeScrubberTimeDisplay);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Indicator = _styledComponents2.default.div.withConfig({
  displayName: 'TimeScrubberViewport__Indicator'
})(['position:absolute;z-index:1;left:50%;transform:translateX(-1px);background:', ';width:3px;height:5px;bottom:0;'], (0, _themeGet2.default)('colors.text.default'));

var Overlay = _styledComponents2.default.div.withConfig({
  displayName: 'TimeScrubberViewport__Overlay'
})(['pointer-events:none;position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;']);

var Window = _styledComponents2.default.div.withConfig({
  displayName: 'TimeScrubberViewport__Window'
})(['position:relative;overflow-x:hidden;overflow-y:hidden;width:100%;cursor:', ';pointer-events:', ';border:', ' solid ', ';border-left:0;border-right:0;height:53px;background:', ';transition:all 0.2s ease;&:focus{outline:0;box-shadow:inset 0 -5px 0 ', ';border-color:', ';}&:active{cursor:grabbing;}'], function (props) {
  return props.disabled ? 'default' : 'grab';
}, function (props) {
  return props.disabled ? 'none' : 'initial';
}, (0, _themeGet2.default)('thicknesses.wide'), function (props) {
  return props.disabled ? (0, _themeGet2.default)('colors.border.disabled')(props) : (0, _themeGet2.default)('colors.border.light')(props);
}, function (props) {
  return props.disabled ? (0, _themeGet2.default)('colors.background.disabled')(props) : (0, _themeGet2.default)('colors.background.default')(props);
}, (0, _themeGet2.default)('colors.primary.light'), (0, _themeGet2.default)('colors.border.medium'));

var Centered = _styledComponents2.default.div.withConfig({
  displayName: 'TimeScrubberViewport__Centered'
})(['position:absolute;left:50%;bottom:0;top:0;']);

/**
 * A limited viewport area in which the Timeline bar moves. Automatically
 * starts all content at the center of the visible viewport. Use relative
 * offsets on content to move content within the viewport.
 */
var Viewport = function Viewport(_ref) {
  var children = _ref.children,
      time = _ref.time,
      rest = (0, _objectWithoutProperties3.default)(_ref, ['children', 'time']);
  return _react2.default.createElement(
    Window,
    (0, _extends3.default)({}, rest, { tabIndex: 0 }),
    _react2.default.createElement(
      Centered,
      null,
      children
    ),
    _react2.default.createElement(Indicator, null),
    _react2.default.createElement(_TimeScrubberTimeDisplay2.default, { time: time })
  );
};

exports.default = Viewport;