import React from 'react';
import { locales } from '@pisell/utils';
import { I18N_FLOOR_MAP_APPEARANCE_DARK, I18N_FLOOR_MAP_APPEARANCE_LIGHT } from "../reservationConstants";
function ReservationFloorMapAppearanceModeIcon(props) {
  if (props.mode === 'light') {
    return /*#__PURE__*/React.createElement("svg", {
      "data-icon": "sun",
      viewBox: "0 0 24 24",
      width: "1em",
      height: "1em",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "1.8",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      "aria-hidden": "true"
    }, /*#__PURE__*/React.createElement("circle", {
      cx: "12",
      cy: "12",
      r: "4"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M12 2.5V5"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M12 19V21.5"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M21.5 12H19"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M5 12H2.5"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M18.72 5.28L16.95 7.05"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M7.05 16.95L5.28 18.72"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M18.72 18.72L16.95 16.95"
    }), /*#__PURE__*/React.createElement("path", {
      d: "M7.05 7.05L5.28 5.28"
    }));
  }
  return /*#__PURE__*/React.createElement("svg", {
    "data-icon": "moon",
    viewBox: "0 0 24 24",
    width: "1em",
    height: "1em",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "1.8",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M18 15.5a7 7 0 0 1-9.5-9.5 8.5 8.5 0 1 0 9.5 9.5Z"
  }));
}
export function ReservationFloorMapDockAppearanceToggle(props) {
  var label = props.mode === 'light' ? locales.getText(I18N_FLOOR_MAP_APPEARANCE_DARK) : locales.getText(I18N_FLOOR_MAP_APPEARANCE_LIGHT);
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "pisell-floor-map-layout-view-controls-tool-btn pisell-floor-map-layout-view-controls-dock-collapsed-extras-btn",
    title: label,
    "aria-label": label,
    onClick: props.onToggle
  }, /*#__PURE__*/React.createElement(ReservationFloorMapAppearanceModeIcon, {
    mode: props.mode
  }));
}