"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXSkeleton = PHXSkeleton;
const tslib_1 = require("tslib");
const Card_1 = require("../Card/Card");
const react_1 = tslib_1.__importDefault(require("react"));
const types_1 = require("../types");
function PHXSkeleton({ className, filterQty, reportQty, size = 'extra-large', type = 'default', }) {
    const skeletonClass = (0, types_1.classNames)(
    // @ts-ignore
    size === 'small' && 'mx-auto md:w-5/6 xl:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12', size === 'extra-large' && 'mx-auto w-full');
    const SkeletonReportOnly = () => (react_1.default.createElement("div", { className: 'flex animate-pulse space-x-4' },
        react_1.default.createElement("div", { className: 'flex-1 space-y-6 py-1' },
            react_1.default.createElement("div", { className: 'space-y-2.5' },
                react_1.default.createElement("div", { className: 'h-2 w-3/4 rounded bg-gray-200' }),
                react_1.default.createElement("div", { className: 'h-7 w-1/4 rounded bg-gray-200' })))));
    const Skeleton = () => (react_1.default.createElement("div", { className: 'flex animate-pulse space-x-4' },
        react_1.default.createElement("div", { className: 'flex-1 space-y-6 py-1' },
            react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
            react_1.default.createElement("div", { className: 'space-y-3' },
                react_1.default.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                    react_1.default.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                    react_1.default.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' })))));
    const SkeletonReport = () => (react_1.default.createElement("div", { className: 'flex animate-pulse space-x-4' },
        react_1.default.createElement("div", { className: 'flex-1 space-y-6 py-1' },
            react_1.default.createElement("div", { className: 'space-y-3' },
                react_1.default.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                    react_1.default.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                    react_1.default.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' })))));
    return (react_1.default.createElement(react_1.default.Fragment, null, type === 'single' || type === 'only-header' || type === 'only-report' || type === 'only-report_v2' ? (react_1.default.createElement(react_1.default.Fragment, null,
        type === 'single' && (react_1.default.createElement("div", { className: `flex animate-pulse space-x-4 ${className}` },
            react_1.default.createElement("div", { className: 'h-3 w-full rounded bg-gray-300' }))),
        type === 'only-header' && react_1.default.createElement("div", { className: `h-7 rounded bg-gray-200 ${className}` }),
        type === 'only-report_v2' && (react_1.default.createElement("div", { className: (0, types_1.classNames)('mx-3 flex animate-pulse items-center rounded-xl bg-gray-100 px-3', className) },
            react_1.default.createElement("div", { className: 'h-2 w-2/3 rounded bg-gray-200' }))),
        type === 'only-report' && (react_1.default.createElement("div", { className: (0, types_1.classNames)('p-[1px]', className) },
            react_1.default.createElement(Card_1.PHXCard, null,
                react_1.default.createElement(SkeletonReportOnly, null)))))) : type === 'content-modal' ? (react_1.default.createElement(Card_1.PHXCard, null,
        react_1.default.createElement(Skeleton, null),
        react_1.default.createElement(Skeleton, null),
        react_1.default.createElement(Skeleton, null))) : (react_1.default.createElement("div", { className: `${className} ${skeletonClass}` },
        type !== 'table' ? (react_1.default.createElement("div", { className: 'mb-7 flex animate-pulse space-x-4' },
            react_1.default.createElement("div", { className: 'h-7 w-1/6 rounded bg-gray-200' }))) : null,
        react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'default' ||
                type === 'table' ||
                type === 'page' ||
                type === 'page-with-table' ||
                type === 'page-table-with-report' ||
                type === 'page-table-report-filter' ||
                type === 'page-table-filter'
                ? ''
                : 'grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-4') },
            react_1.default.createElement("div", { className: (0, types_1.classNames)(type === 'default' ? '' : 'grid grid-cols-1 gap-4 lg:col-span-2') },
                (type === 'page-table-report-filter' || type === 'page-table-filter') && (react_1.default.createElement("div", { className: 'flex gap-x-3' }, [...Array(filterQty)].map((_, index) => (react_1.default.createElement("div", { key: index, className: 'h-7 w-20 animate-pulse rounded bg-gray-200' }))))),
                (type === 'page-table-with-report' || type === 'page-table-report-filter') && (react_1.default.createElement(react_1.default.Fragment, null, [...Array(reportQty)].map((_, index) => (react_1.default.createElement(Card_1.PHXCard, { key: index },
                    react_1.default.createElement(SkeletonReport, null)))))),
                react_1.default.createElement(Card_1.PHXCard, null,
                    react_1.default.createElement(Skeleton, null),
                    type === 'page' || type === 'page-col' ? null : (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(Skeleton, null),
                        react_1.default.createElement(Skeleton, null))),
                    (type === 'table' ||
                        type === 'page-with-table' ||
                        type === 'page-table-with-report' ||
                        type === 'page-table-report-filter' ||
                        type === 'page-table-filter') && (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement(Skeleton, null),
                        react_1.default.createElement(Skeleton, null),
                        react_1.default.createElement(Skeleton, null),
                        react_1.default.createElement(Skeleton, null)))),
                type === 'page' || type === 'page-col' ? (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(Card_1.PHXCard, null,
                        react_1.default.createElement(Skeleton, null)),
                    react_1.default.createElement(Card_1.PHXCard, null,
                        react_1.default.createElement(Skeleton, null)))) : null),
            type === 'col' || type === 'page-col' ? (react_1.default.createElement("div", { className: 'grid grid-cols-1 gap-4' },
                react_1.default.createElement(Card_1.PHXCard, null,
                    react_1.default.createElement("div", { className: 'flex animate-pulse space-x-4' },
                        react_1.default.createElement("div", { className: 'flex-1 space-y-6 py-1' },
                            react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                            react_1.default.createElement("div", { className: 'space-y-3' },
                                react_1.default.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                                    react_1.default.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' }),
                                    react_1.default.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    react_1.default.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    react_1.default.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                                react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' }))))),
                type === 'page-col' && (react_1.default.createElement(Card_1.PHXCard, null,
                    react_1.default.createElement("div", { className: 'flex animate-pulse space-x-4' },
                        react_1.default.createElement("div", { className: 'flex-1 space-y-6 py-1' },
                            react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                            react_1.default.createElement("div", { className: 'space-y-3' },
                                react_1.default.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                                    react_1.default.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    react_1.default.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                                react_1.default.createElement("div", { className: 'h-2 rounded bg-gray-200' })))))))) : null)))));
}
//# sourceMappingURL=Skeleton.js.map