import { PHXCard } from '../Card/Card';
import React from 'react';
import { classNames } from '../types';
export function PHXSkeleton({ className, filterQty, reportQty, size = 'extra-large', type = 'default', }) {
    const skeletonClass = 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.createElement("div", { className: 'flex animate-pulse space-x-4' },
        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
            React.createElement("div", { className: 'space-y-2.5' },
                React.createElement("div", { className: 'h-2 w-3/4 rounded bg-gray-200' }),
                React.createElement("div", { className: 'h-7 w-1/4 rounded bg-gray-200' })))));
    const Skeleton = () => (React.createElement("div", { className: 'flex animate-pulse space-x-4' },
        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
            React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
            React.createElement("div", { className: 'space-y-3' },
                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))));
    const SkeletonReport = () => (React.createElement("div", { className: 'flex animate-pulse space-x-4' },
        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
            React.createElement("div", { className: 'space-y-3' },
                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))));
    return (React.createElement(React.Fragment, null, type === 'single' || type === 'only-header' || type === 'only-report' || type === 'only-report_v2' ? (React.createElement(React.Fragment, null,
        type === 'single' && (React.createElement("div", { className: `flex animate-pulse space-x-4 ${className}` },
            React.createElement("div", { className: 'h-3 w-full rounded bg-gray-300' }))),
        type === 'only-header' && React.createElement("div", { className: `h-7 rounded bg-gray-200 ${className}` }),
        type === 'only-report_v2' && (React.createElement("div", { className: classNames('mx-3 flex animate-pulse items-center rounded-xl bg-gray-100 px-3', className) },
            React.createElement("div", { className: 'h-2 w-2/3 rounded bg-gray-200' }))),
        type === 'only-report' && (React.createElement("div", { className: classNames('p-[1px]', className) },
            React.createElement(PHXCard, null,
                React.createElement(SkeletonReportOnly, null)))))) : type === 'content-modal' ? (React.createElement(PHXCard, null,
        React.createElement(Skeleton, null),
        React.createElement(Skeleton, null),
        React.createElement(Skeleton, null))) : (React.createElement("div", { className: `${className} ${skeletonClass}` },
        type !== 'table' ? (React.createElement("div", { className: 'mb-7 flex animate-pulse space-x-4' },
            React.createElement("div", { className: 'h-7 w-1/6 rounded bg-gray-200' }))) : null,
        React.createElement("div", { className: 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.createElement("div", { className: classNames(type === 'default' ? '' : 'grid grid-cols-1 gap-4 lg:col-span-2') },
                (type === 'page-table-report-filter' || type === 'page-table-filter') && (React.createElement("div", { className: 'flex gap-x-3' }, [...Array(filterQty)].map((_, index) => (React.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.createElement(React.Fragment, null, [...Array(reportQty)].map((_, index) => (React.createElement(PHXCard, { key: index },
                    React.createElement(SkeletonReport, null)))))),
                React.createElement(PHXCard, null,
                    React.createElement(Skeleton, null),
                    type === 'page' || type === 'page-col' ? null : (React.createElement(React.Fragment, null,
                        React.createElement(Skeleton, null),
                        React.createElement(Skeleton, null))),
                    (type === 'table' ||
                        type === 'page-with-table' ||
                        type === 'page-table-with-report' ||
                        type === 'page-table-report-filter' ||
                        type === 'page-table-filter') && (React.createElement(React.Fragment, null,
                        React.createElement(Skeleton, null),
                        React.createElement(Skeleton, null),
                        React.createElement(Skeleton, null),
                        React.createElement(Skeleton, null)))),
                type === 'page' || type === 'page-col' ? (React.createElement(React.Fragment, null,
                    React.createElement(PHXCard, null,
                        React.createElement(Skeleton, null)),
                    React.createElement(PHXCard, null,
                        React.createElement(Skeleton, null)))) : null),
            type === 'col' || type === 'page-col' ? (React.createElement("div", { className: 'grid grid-cols-1 gap-4' },
                React.createElement(PHXCard, null,
                    React.createElement("div", { className: 'flex animate-pulse space-x-4' },
                        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
                            React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                            React.createElement("div", { className: 'space-y-3' },
                                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' }),
                                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                                React.createElement("div", { className: 'h-2 rounded bg-gray-200' }))))),
                type === 'page-col' && (React.createElement(PHXCard, null,
                    React.createElement("div", { className: 'flex animate-pulse space-x-4' },
                        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
                            React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
                            React.createElement("div", { className: 'space-y-3' },
                                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
                                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
                                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
                                React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))))))) : null)))));
}
//# sourceMappingURL=Skeleton.js.map