import { LightningElement, api } from "lwc";
import { EmptyStateSize } from "typings/custom";

export default class EmptyState extends LightningElement {
    @api header: string = "";
    @api subtitle?: string | null = null;
    @api body?: string | null = null;
    @api size?: EmptyStateSize = "large";
    @api variant?: "base" | "alt" = "base";

    @api
    get suggestions(): string[] {
        return this._suggestions;
    }
    set suggestions(value: string) {
        this._suggestions = JSON.parse(value);
    }

    private _suggestions = [];

    get altVariant() {
        return this.variant === "alt";
    }

    get containerClassName() {
        return this.variant === "base"
            ? `container ${
                  !this.size || this.size === "large"
                      ? "size-large"
                      : "size-small"
              }`
            : `container-alt`;
    }

    get textClassName() {
        return this.variant === "base" ? "text" : "text-alt";
    }

    get titleClassName() {
        return this.variant === "base"
            ? "title dx-text-display-4"
            : "title-alt dx-text-display-4";
    }

    get subtitleClassName() {
        return this.variant === "base"
            ? "subtitle dx-text-body-2"
            : "subtitle-alt dx-text-display-8";
    }

    get imageClassName() {
        return this.variant === "base" ? "image" : "image-alt";
    }

    get imageAlt() {
        return this.variant === "base"
            ? "Mountains"
            : "Clouds with binary code floating above";
    }

    get imageAssetPath() {
        return this.variant === "base"
            ? `https://developer.salesforce.com/ns-assets/docs-empty-state${
                  this.size === "small" ? "-small" : ""
              }.svg`
            : `https://developer.salesforce.com/ns-assets/binary-cloud-circle${
                  this.size === "small" ? "-small" : ""
              }.svg`;
    }
}