import { css, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { LineMedium, LineType, lineColor, lineWidth } from "../index.js";
import { customElement } from "../../decorator.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var ThreeWayLineDirection = /* @__PURE__ */ ((ThreeWayLineDirection2) => {
  ThreeWayLineDirection2["top"] = "top";
  ThreeWayLineDirection2["right"] = "right";
  ThreeWayLineDirection2["bottom"] = "bottom";
  ThreeWayLineDirection2["left"] = "left";
  return ThreeWayLineDirection2;
})(ThreeWayLineDirection || {});
let ObcThreeWayLine = class extends LitElement {
  constructor() {
    super(...arguments);
    this.medium = LineMedium.normal;
    this.direction = "top";
    this.lineType = LineType.fluid;
  }
  render() {
    let rotation = 0;
    if (this.direction === "top") {
      rotation = 180;
    } else if (this.direction === "right") {
      rotation = 270;
    } else if (this.direction === "bottom") {
      rotation = 0;
    } else if (this.direction === "left") {
      rotation = 90;
    }
    if (this.lineType === LineType.connector) {
      return html`
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          transform="rotate(${rotation})"
        >
          <path
            d="M10 11.5H14V12.5L10 12.5V11.5Z"
            fill="var(--element-neutral-color)"
          />
          <path
            d="M4 11.5H8V12.5L4 12.5V11.5Z"
            fill="var(--element-neutral-color)"
          />
          <path
            d="M0 11.5H2L2 12.5L0 12.5V11.5Z"
            fill="var(--element-neutral-color)"
          />
          <path
            d="M22 11.5L24 11.5V12.5L22 12.5V11.5Z"
            fill="var(--element-neutral-color)"
          />
          <path
            d="M16 11.5H20V12.5L16 12.5V11.5Z"
            fill="var(--element-neutral-color)"
          />
          <path
            d="M12.5 24V22.1667H11.5V24H12.5Z"
            fill="var(--element-neutral-color)"
          />
          <path
            d="M12.5 20.3333L12.5 16.6667H11.5L11.5 20.3333H12.5Z"
            fill="var(--element-neutral-color)"
          />
          <path
            d="M12.5 14.8333V13L11.5 13V14.8333H12.5Z"
            fill="var(--element-neutral-color)"
          />
        </svg>
      `;
    }
    const color = lineColor(this.medium);
    const width = lineWidth(this.lineType) + 1;
    const h = width / 2;
    const c = 13 - h;
    return html`
      <svg
        class="line"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        transform="rotate(${rotation})"
      >
        <path
          d="M-1 ${12 + h} v${-width}h26v${width}h-${c}v${c}h-${width}v-${c}Z"
          fill="var(${color.inner})"
          stroke="var(${color.outer})"
        />
      </svg>
    `;
  }
};
ObcThreeWayLine.styles = css`
    :host {
      display: block;
      line-height: 0;
    }

    svg {
      position: relative;
      top: -12px;
      left: -12px;
    }
  `;
__decorateClass([
  property({ type: String })
], ObcThreeWayLine.prototype, "medium", 2);
__decorateClass([
  property({ type: String })
], ObcThreeWayLine.prototype, "direction", 2);
__decorateClass([
  property({ type: String })
], ObcThreeWayLine.prototype, "lineType", 2);
ObcThreeWayLine = __decorateClass([
  customElement("obc-three-way-line")
], ObcThreeWayLine);
export {
  ObcThreeWayLine,
  ThreeWayLineDirection
};
//# sourceMappingURL=three-way-line.js.map
