import { LightningElement } from "lwc";

// A UI-agnostic component meant to be used as a child of dx-step-sequence. The component
// automatically enables "go forward" and "go back" functionality for any slotted element's
// ".primary-action" child and ".secondary-action" child, respectively. If the
// dx-step-sequence has `animateTransitions` set to `true`, the transitions will auto-animate.
// Child component action buttons can still perform whatever actions they want before the
// step proceeds.
export default class StepSequenceStep extends LightningElement {
    handleSlotChange(e: Event) {
        const slot = e.target as HTMLSlotElement;
        const rootElement = slot.assignedElements()[0];
        const primaryActionElement = rootElement.querySelector(
            ".primary-action"
        ) as HTMLElement | undefined;
        const secondaryActionElement = rootElement.querySelector(
            ".secondary-action"
        ) as HTMLElement | undefined;

        if (primaryActionElement) {
            const assignedOnClick = primaryActionElement.onclick;
            primaryActionElement.onclick = (event: MouseEvent) => {
                assignedOnClick?.call(primaryActionElement, event);
                // Child elements can prevent the default "go forward" action.
                if (!event.defaultPrevented) {
                    this.goForward();
                }
            };
        }

        if (secondaryActionElement) {
            const assignedOnClick = secondaryActionElement.onclick;
            secondaryActionElement.onclick = (event: MouseEvent) => {
                assignedOnClick?.call(secondaryActionElement, event);
                // Child elements can prevent the default "go back" action.
                if (!event.defaultPrevented) {
                    this.goBack();
                }
            };
        }
    }

    goForward() {
        this.dispatchEvent(
            new CustomEvent("stepincrement", {
                bubbles: true,
                composed: true
            })
        );
    }

    goBack() {
        this.dispatchEvent(
            new CustomEvent("stepdecrement", {
                bubbles: true,
                composed: true
            })
        );
    }
}