import { LightningElement, api } from "lwc";
import cx from "classnames";
import { LightningSlotElement } from "typings/custom";
import { isSlotEmpty } from "dxUtils/slot";
import { toDxColor } from "dxUtils/css";
import { normalizeBoolean, toJson } from "dxUtils/normalizers";
import ImageAndLabel from "dx/imageAndLabel";

export default class CardContent extends LightningElement {
    @api backgroundColor?: string | null = null;
    @api body?: string | null = null;
    @api featured?: boolean = false;
    @api fixOrientation: boolean = false;
    @api href!: string;
    @api imgAlt?: string = "";
    @api imgSrc?: string | null = null;
    @api label: string = "";
    @api layout: "vertical" | "horizontal" = "vertical";
    @api subtitle?: string | null = null;
    @api target?: string | null = null;
    @api header!: string;
    @api hrefClick: any = null;
    @api contentType: string | null = null;

    @api
    get authors() {
        if (this._authors && this._authors.length) {
            return this._authors!.map((author, index) => ({
                ...{
                    ...author,
                    // @ts-ignore we're doing some hacky stuff to get at LWC internals here
                    href: author.href || this.getAuthorLink(author.name)
                },
                // @ts-ignore we're doing some hacky stuff to get at LWC internals here
                imgSrc: author.image_src,
                key: index
            }));
        }
        return undefined;
    }
    set authors(value: any) {
        if (value !== "undefined") {
            this._authors = (toJson(value) as Array<any>)?.filter(
                (author) => author.name
            );
        }
    }
    private _authors?: Array<ImageAndLabel>;

    @api
    get borderless() {
        return this._borderless;
    }
    set borderless(value: string | boolean) {
        this._borderless = normalizeBoolean(value);
    }
    private _borderless = true;

    @api
    get imgLinkAriaLabel() {
        return this._imgLinkAriaLabel || `Read More About ${this.header}`;
    }
    set imgLinkAriaLabel(value: string) {
        this._imgLinkAriaLabel = value;
    }
    private _imgLinkAriaLabel = "";

    private isDatetimeEmpty: boolean = true;
    private isLinkHovered: boolean = false;

    private get backgroundStyle(): string {
        return this.backgroundColor
            ? `background: ${toDxColor(this.backgroundColor)}`
            : "";
    }

    private get className(): string {
        return cx(
            "card-content",
            "dx-card-base",
            `dx-card-base_layout-${this.layout}`,
            this.borderless && "dx-card-base_borderless",
            this.featured && "dx-card-base_featured",
            this.fixOrientation && "dx-card-base_fix-orientation",
            this.isDatetimeEmpty && "hide-datetime",
            this.isLinkHovered && "dx-card-base_link-hovered",
            this.hasImage && "has-image"
        );
    }

    private get imgAnchorClassName(): string {
        return cx(
            "image-link",
            this.borderless && "dx-card-base_borderless-image_link"
        );
    }

    private get imgClassName(): string {
        return cx(
            "image",
            "dx-card-base_image",
            this.borderless && "dx-card-base_borderless-image"
        );
    }

    private get hasImage() {
        return this.imgSrc || this.backgroundColor;
    }

    private setLinkHovered() {
        this.isLinkHovered = true;
    }

    private setLinkInactive() {
        this.isLinkHovered = false;
    }

    private onDatetimeSlotChange(e: LightningSlotElement): void {
        this.isDatetimeEmpty = isSlotEmpty(e);
    }

    private handleClick(e: Event) {
        if (this.hrefClick) {
            this.hrefClick(e);
        }
    }

    private getAuthorLink(name: any): string {
        return `/content-archive?authors=${name.split(" ").join("-").trim()}${
            this.contentType ? `&content-type=${this.contentType}` : ``
        }`;
    }
}