import { LightningElement, api, track } from "lwc";
import { toJson } from "dxUtils/normalizers";
import { DocsCard } from "typings/custom";

const stringsMatch = (val1?: string, val2?: string): boolean => {
    return (
        typeof val1 === "string" &&
        typeof val2 === "string" &&
        val1.toLowerCase().includes(val2.toLowerCase())
    );
};

export default class CardGridDocs extends LightningElement {
    @api pageSize = 24;
    @api
    get cards(): DocsCard[] {
        return this._cards;
    }
    set cards(value) {
        this._cards = toJson(value);
    }

    private page: number = 1;
    private _cards: DocsCard[] = [];
    @track
    private value?: string;

    private get filteredCards(): DocsCard[] {
        return this.value
            ? this.cards.filter(({ title, body, label }) =>
                  [title, body, label].some((val) =>
                      stringsMatch(val, this.value)
                  )
              )
            : this.cards;
    }

    private get currentPageCards() {
        return this.filteredCards.slice(
            this.startingRecord - 1,
            this.endingRecord
        );
    }

    private get startingRecord() {
        return this.page === 1
            ? this.page
            : (this.page - 1) * this.pageSize + 1;
    }

    private get endingRecord() {
        const defaultEndingRecord = this.pageSize * this.page;
        return defaultEndingRecord > this.filteredCards.length
            ? this.filteredCards.length
            : defaultEndingRecord;
    }

    private get totalPages() {
        return Math.ceil(this.filteredCards.length / this.pageSize);
    }

    private get hidePagination() {
        return this.totalPages < 2;
    }

    private get emptyStateSubtitle() {
        return "No results" + (this.value !== "" ? ` for "${this.value}"` : "");
    }

    private get showEmptyState() {
        return !this.filteredCards.length;
    }

    private onSearchChange(e: InputEvent): void {
        const detail = `${e.detail}`;
        this.value = detail === "" ? undefined : detail;

        if (this.startingRecord > this.cards.length) {
            this.page = 1;
        }
    }

    private goToPage(e: CustomEvent) {
        this.page = e.detail;
    }
}