/**
 * FloorMapEdgeEditPanel - 选中连线后的侧栏编辑
 */
import React, { useCallback, useRef } from 'react';
import { locales } from '@pisell/utils';
import classNames from 'classnames';
import { CloseOutlined } from '@ant-design/icons';
import { Button, Form, Input, InputNumber, Select, Popconfirm } from 'antd';
import { FLOOR_MAP_EDGE_ANCHORS } from "../utils/edgeRouting";
import "./FloorMapEdgeEditPanel.less";
var PREFIX = 'pisell-floor-map-layout';
var I18N = 'pisell-floor-map-layout.edge-panel';
var STATUS_OPTIONS = [{
  value: 'online',
  labelKey: "".concat(I18N, ".status-online")
}, {
  value: 'offline',
  labelKey: "".concat(I18N, ".status-offline")
}, {
  value: 'warning',
  labelKey: "".concat(I18N, ".status-warning")
}, {
  value: 'unknown',
  labelKey: "".concat(I18N, ".status-unknown")
}];
var ANCHOR_OPTIONS = FLOOR_MAP_EDGE_ANCHORS.map(function (a) {
  return {
    value: a,
    label: a
  };
});
function nodeLabel(config, instanceId) {
  var _config$sceneElements, _el$name;
  var el = ((_config$sceneElements = config.sceneElements) !== null && _config$sceneElements !== void 0 ? _config$sceneElements : []).find(function (e) {
    return e.instanceId === instanceId;
  });
  return (el === null || el === void 0 || (_el$name = el.name) === null || _el$name === void 0 ? void 0 : _el$name.trim()) || instanceId;
}
export function FloorMapEdgeEditPanel(props) {
  var _edge$sourceAnchor, _edge$targetAnchor, _edge$sourceLabel, _edge$targetLabel, _edge$label, _edge$status, _edge$color, _edge$strokeWidth;
  var edge = props.edge,
    config = props.config,
    onUpdate = props.onUpdate,
    onClose = props.onClose,
    onDelete = props.onDelete,
    layoutDraftDirty = props.layoutDraftDirty,
    className = props.className;
  var t = useCallback(function (key) {
    return locales.getText(key);
  }, []);
  var panelScrollRef = useRef(null);
  /** 与图元编辑面板一致：下拉挂到表单项父节点，避免侧栏 overflow 裁切 */
  var getSelectPopupContainer = useCallback(function (node) {
    var _ref, _node$parentElement;
    return (_ref = (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : panelScrollRef.current) !== null && _ref !== void 0 ? _ref : document.body;
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    ref: panelScrollRef,
    className: classNames("".concat(PREFIX, "-edge-edit-panel"), className)
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "-edge-edit-panel-header")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(PREFIX, "-edge-edit-panel-title")
  }, t("".concat(I18N, ".title"))), /*#__PURE__*/React.createElement(Button, {
    type: "text",
    size: "large",
    className: "".concat(PREFIX, "-edge-edit-panel-close"),
    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
    onClick: onClose,
    "aria-label": "close"
  })), layoutDraftDirty ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "-edge-edit-panel-dirty-hint")
  }, t("".concat(I18N, ".dirty-hint"))) : null, /*#__PURE__*/React.createElement(Form, {
    layout: "vertical",
    size: "large",
    className: "".concat(PREFIX, "-edge-edit-form")
  }, /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".source-node"))
  }, /*#__PURE__*/React.createElement(Input, {
    value: nodeLabel(config, edge.sourceId),
    disabled: true
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".target-node"))
  }, /*#__PURE__*/React.createElement(Input, {
    value: nodeLabel(config, edge.targetId),
    disabled: true
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".source-anchor"))
  }, /*#__PURE__*/React.createElement(Select, {
    value: (_edge$sourceAnchor = edge.sourceAnchor) !== null && _edge$sourceAnchor !== void 0 ? _edge$sourceAnchor : 'right',
    options: ANCHOR_OPTIONS,
    getPopupContainer: getSelectPopupContainer,
    onChange: function onChange(v) {
      return onUpdate({
        sourceAnchor: v
      });
    }
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".target-anchor"))
  }, /*#__PURE__*/React.createElement(Select, {
    value: (_edge$targetAnchor = edge.targetAnchor) !== null && _edge$targetAnchor !== void 0 ? _edge$targetAnchor : 'left',
    options: ANCHOR_OPTIONS,
    getPopupContainer: getSelectPopupContainer,
    onChange: function onChange(v) {
      return onUpdate({
        targetAnchor: v
      });
    }
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".source-label"))
  }, /*#__PURE__*/React.createElement(Input, {
    value: (_edge$sourceLabel = edge.sourceLabel) !== null && _edge$sourceLabel !== void 0 ? _edge$sourceLabel : '',
    onChange: function onChange(e) {
      return onUpdate({
        sourceLabel: e.target.value
      });
    },
    placeholder: "G3/WAN"
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".target-label"))
  }, /*#__PURE__*/React.createElement(Input, {
    value: (_edge$targetLabel = edge.targetLabel) !== null && _edge$targetLabel !== void 0 ? _edge$targetLabel : '',
    onChange: function onChange(e) {
      return onUpdate({
        targetLabel: e.target.value
      });
    }
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".center-label"))
  }, /*#__PURE__*/React.createElement(Input, {
    value: (_edge$label = edge.label) !== null && _edge$label !== void 0 ? _edge$label : '',
    onChange: function onChange(e) {
      return onUpdate({
        label: e.target.value
      });
    }
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".status"))
  }, /*#__PURE__*/React.createElement(Select, {
    value: (_edge$status = edge.status) !== null && _edge$status !== void 0 ? _edge$status : 'unknown',
    options: STATUS_OPTIONS.map(function (o) {
      return {
        value: o.value,
        label: t(o.labelKey)
      };
    }),
    getPopupContainer: getSelectPopupContainer,
    onChange: function onChange(v) {
      return onUpdate({
        status: v
      });
    }
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".color"))
  }, /*#__PURE__*/React.createElement(Input, {
    value: (_edge$color = edge.color) !== null && _edge$color !== void 0 ? _edge$color : '',
    onChange: function onChange(e) {
      return onUpdate({
        color: e.target.value || undefined
      });
    },
    placeholder: "#12B76A"
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".stroke-width"))
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 0.5,
    max: 8,
    step: 0.5,
    value: (_edge$strokeWidth = edge.strokeWidth) !== null && _edge$strokeWidth !== void 0 ? _edge$strokeWidth : 1.5,
    onChange: function onChange(v) {
      return onUpdate({
        strokeWidth: v !== null && v !== void 0 ? v : undefined
      });
    },
    style: {
      width: '100%'
    }
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: t("".concat(I18N, ".dashed"))
  }, /*#__PURE__*/React.createElement(Select, {
    value: edge.dashed ? 'yes' : 'no',
    options: [{
      value: 'no',
      label: t("".concat(I18N, ".dashed-no"))
    }, {
      value: 'yes',
      label: t("".concat(I18N, ".dashed-yes"))
    }],
    getPopupContainer: getSelectPopupContainer,
    onChange: function onChange(v) {
      return onUpdate({
        dashed: v === 'yes'
      });
    }
  })), onDelete ? /*#__PURE__*/React.createElement(Popconfirm, {
    title: t("".concat(I18N, ".delete-confirm")),
    onConfirm: onDelete
  }, /*#__PURE__*/React.createElement(Button, {
    danger: true,
    block: true,
    size: "large"
  }, t("".concat(I18N, ".delete")))) : null));
}