import React from 'react';
import { getText } from "../../../../locales";
/** 资源墙顶栏：时钟、浅深切换、伪全屏、控制台入口 */
export var ResourceWallViewportToolbar = function ResourceWallViewportToolbar(_ref) {
  var now = _ref.now,
    appearanceMode = _ref.appearanceMode,
    onAppearanceModeChange = _ref.onAppearanceModeChange,
    pseudoFullscreen = _ref.pseudoFullscreen,
    onTogglePseudoFullscreen = _ref.onTogglePseudoFullscreen,
    onOpenControlPanel = _ref.onOpenControlPanel,
    headerBorder = _ref.headerBorder,
    headerBg = _ref.headerBg,
    clockColor = _ref.clockColor,
    mutedText = _ref.mutedText,
    toolbarBtnBorder = _ref.toolbarBtnBorder,
    toolbarBtnBg = _ref.toolbarBtnBg,
    toolbarBtnBgActive = _ref.toolbarBtnBgActive;
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-resource-wall-viewport-toolbar",
    style: {
      flexShrink: 0,
      borderBottom: headerBorder,
      background: headerBg
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-resource-wall-viewport-toolbar__clock",
    style: {
      color: clockColor
    }
  }, now.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  }), ' ', "\xB7", ' ', now.toLocaleDateString('en-GB', {
    day: '2-digit',
    month: 'short',
    year: 'numeric'
  })), /*#__PURE__*/React.createElement("div", {
    className: "pisell-resource-wall-viewport-toolbar__actions"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      borderRadius: 6,
      border: toolbarBtnBorder,
      overflow: 'hidden',
      background: toolbarBtnBg
    }
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: function onClick() {
      return onAppearanceModeChange('light');
    },
    style: {
      border: 'none',
      padding: '6px 12px',
      fontSize: 13,
      fontWeight: 500,
      cursor: 'pointer',
      background: appearanceMode === 'light' ? toolbarBtnBgActive : 'transparent',
      color: appearanceMode === 'light' ? clockColor : mutedText
    }
  }, getText('pisell-resource-wall-appearance-light')), /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: function onClick() {
      return onAppearanceModeChange('dark');
    },
    style: {
      border: 'none',
      borderLeft: toolbarBtnBorder,
      padding: '6px 12px',
      fontSize: 13,
      fontWeight: 500,
      cursor: 'pointer',
      background: appearanceMode === 'dark' ? toolbarBtnBgActive : 'transparent',
      color: appearanceMode === 'dark' ? clockColor : mutedText
    }
  }, getText('pisell-resource-wall-appearance-dark'))), /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: onTogglePseudoFullscreen,
    style: {
      borderRadius: 6,
      padding: '6px 14px',
      fontSize: 13,
      fontWeight: 500,
      cursor: 'pointer',
      border: toolbarBtnBorder,
      background: pseudoFullscreen ? toolbarBtnBgActive : toolbarBtnBg,
      color: clockColor
    }
  }, pseudoFullscreen ? getText('pisell-resource-wall-fullscreen-exit') : getText('pisell-resource-wall-fullscreen-enter')), /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: onOpenControlPanel,
    style: {
      borderRadius: 6,
      padding: '6px 14px',
      fontSize: 13,
      fontWeight: 500,
      cursor: 'pointer',
      border: toolbarBtnBorder,
      background: toolbarBtnBg,
      color: clockColor
    }
  }, getText('pisell-resource-wall-control-open'))));
};