import { Component, ComponentInterface, Prop, h } from "@stencil/core";
import { ProcessFlowBoxVariants } from "../../utils/utils";
import { ProcessFlowBoxStepStates } from "../../utils/utils";

@Component({
  tag: "hy-process-flow-box",
  styleUrl: "process-flow-box.scss",
  shadow: true,
})
export class ProcessFlowBox implements ComponentInterface {
  @Prop() variant: ProcessFlowBoxVariants = ProcessFlowBoxVariants.default;
  @Prop() boxNumber: string;
  @Prop() boxTitle: string;
  @Prop() boxDescription: string;
  @Prop() intermediateStepTitle: string = "";
  @Prop() stepState: ProcessFlowBoxStepStates = "default";
  @Prop() numberTerm: string = "Vaihe";
  render() {
    const classVariant = [this.variant, "hy-process-flow-box"].join(" ");
    const classContentVariant = [this.variant, "content"].join(" ");

    const classIsEven = (parseInt(this.boxNumber) % 2 == 0) ? "even" : "odd";

    const classNumberVariant = [this.variant, "number"].join(" ");
    const classStepVariant = [this.variant, this.stepState, classIsEven, "step"].join(" ");

    // let myHeaderSize: HeadingVarians = HeadingVarians.h2;

    return (
      <div class={classVariant}>
        {this.intermediateStepTitle && (
          <div class={classStepVariant}>
            <svg class="desktop" width="200" height="72">
              <polygon points="0 0, 15 36, 0 72, 168 72, 200 36, 168 0, 0 0" />
            </svg>
            <svg class="mobile" width="138" height="82">
              <polygon points="0 0, 69 15, 138 0, 138 50, 69 82, 0 50" />
            </svg>
            <h2 class="hy-process-flow-box__step">
              {this.intermediateStepTitle}
            </h2>
          </div>
        )}
        <div class={classNumberVariant}>
          <h2
            class="hy-process-flow-box__number"
            aria-label={`${this.numberTerm} ${this.boxNumber}`}
          >
            {this.boxNumber}
          </h2>
        </div>
        <div class={classContentVariant}>
          <h3 class="hy-process-flow-box__title">{this.boxTitle}</h3>
          <div class="hy-process-flow-box__description">
            {this.boxDescription}
          </div>
        </div>
      </div>
    );
  }
}