import { LightningElement, api } from "lwc";

import { HrVariant } from "typings/custom";

export default class Hr extends LightningElement {
    @api text: string | null = null;
    @api href?: string | null;
    @api target: string | null = "_top";
    @api spacing: string | null = "2xl";
    @api noPadding: boolean = false;
    @api variant: HrVariant | null = null;

    private get ariaRole() {
        return this.isHeading ? "heading" : "separator";
    }

    private get style() {
        const spacing = this.spacing
            ? `margin: var(--dx-g-spacing-${this.spacing}) 0;`
            : "";
        const padding = this.noPadding
            ? ""
            : "padding: 0 var(--dx-c-hr-padding-horizontal);";

        return `${spacing}${padding}`;
    }

    private get isButtonVariant() {
        return this.variant === "link" || this.variant === "load-more";
    }

    private get isLink() {
        return this.variant === "link";
    }

    private get isLoadMore() {
        return this.variant === "load-more";
    }

    private get isHeading() {
        return !this.isButtonVariant && this.text;
    }

    private get isSeparator() {
        return !this.isButtonVariant && !this.text;
    }

    handleClick() {
        this.dispatchEvent(new CustomEvent("loadmore"));
    }
}