import React from 'react';
import { Button } from 'antd';
import { CheckOutlined, EditOutlined, ThunderboltOutlined } from '@ant-design/icons';
import { locales } from '@pisell/utils';
import "./TopologyFloorMapEditToggle.less";
var I18N_EDIT = 'pisell-topology.edit-map';
var I18N_DONE = 'pisell-topology.edit-map-done';
var I18N_AUTO_ARRANGE = 'pisell-topology.auto-arrange';
/** 左下 Dock 尾区：进入 / 退出拓扑编辑（对齐预约页「编辑平面图」） */
export function TopologyFloorMapEditToggle(props) {
  var mapEditInternal = props.mapEditInternal,
    setMapEditInternal = props.setMapEditInternal,
    floorMapLayoutRef = props.floorMapLayoutRef,
    forceEditMode = props.forceEditMode,
    phoneLayout = props.phoneLayout,
    onAutoArrange = props.onAutoArrange,
    autoArrangePending = props.autoArrangePending;
  var editing = forceEditMode || mapEditInternal;
  var label = locales.getText(editing ? I18N_DONE : I18N_EDIT);
  var autoArrangeLabel = locales.getText(I18N_AUTO_ARRANGE);
  var showAutoArrange = editing && typeof onAutoArrange === 'function';
  var handleClick = function handleClick() {
    if (editing) {
      var _floorMapLayoutRef$cu, _floorMapLayoutRef$cu2;
      (_floorMapLayoutRef$cu = floorMapLayoutRef.current) === null || _floorMapLayoutRef$cu === void 0 || (_floorMapLayoutRef$cu2 = _floorMapLayoutRef$cu.saveLayout) === null || _floorMapLayoutRef$cu2 === void 0 || _floorMapLayoutRef$cu2.call(_floorMapLayoutRef$cu);
      if (!forceEditMode) {
        setMapEditInternal(false);
      }
      return;
    }
    setMapEditInternal(true);
  };
  if (phoneLayout) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, showAutoArrange ? /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: "pisell-floor-map-layout-view-controls-tool-btn",
      title: autoArrangeLabel,
      "aria-label": autoArrangeLabel,
      disabled: autoArrangePending,
      onClick: onAutoArrange
    }, /*#__PURE__*/React.createElement(ThunderboltOutlined, null)) : null, /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: editing ? 'pisell-floor-map-layout-view-controls-tool-btn pisell-floor-map-layout-view-controls-tool-btn--active' : 'pisell-floor-map-layout-view-controls-tool-btn',
      title: label,
      "aria-label": label,
      "aria-pressed": editing,
      onClick: handleClick
    }, editing ? /*#__PURE__*/React.createElement(CheckOutlined, null) : /*#__PURE__*/React.createElement(EditOutlined, null)));
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-topology-floor-map-dock-actions"
  }, showAutoArrange ? /*#__PURE__*/React.createElement(Button, {
    size: "middle",
    icon: /*#__PURE__*/React.createElement(ThunderboltOutlined, null),
    className: "pisell-topology-floor-map-edit-btn",
    loading: autoArrangePending,
    onClick: onAutoArrange
  }, autoArrangeLabel) : null, /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    size: "middle",
    className: "pisell-topology-floor-map-edit-btn",
    onClick: handleClick
  }, label));
}