import type { FC } from 'react';
import React from 'react';
import { range } from '@theorchard/suite-utils';
import cx from 'classnames';

const CLASS_NAME = 'SkeletonLoader';
const CLASS_NAME_ITEM = `${CLASS_NAME}-item`;
const CLASS_NAME_VERTICAL = `${CLASS_NAME}-vertical`;
const CLASS_NAME_HORIZONTAL = `${CLASS_NAME}-horizontal`;

interface SkeletonLoaderProps {
    className?: string;
    header?: string | JSX.Element;
    shape?:
        | 'line'
        | 'square'
        | 'circle'
        | 'rounded'
        | 'columnChart'
        | 'barChart'
        | 'pieChart'
        | 'lineChart'
        | 'unifiedChart';
    numberOfItems?: number;
    vertical?: boolean;
    testId?: string;
    width?: number;
    height?: number;
    style?: React.CSSProperties;
}

/**
 * A skeleton screen is a layout concept that shows a loading page or part of a page by displaying a basic wireframe-like page layout.
 *
 * @type atom
 * @status live
 * @tags feedback
 */
const SkeletonLoader: FC<SkeletonLoaderProps> = ({
    className,
    header,
    shape = 'line',
    numberOfItems = 1,
    testId = CLASS_NAME,
    vertical,
    width,
    height,
    style,
}) => (
    <div
        data-testid={testId}
        className={cx(
            CLASS_NAME,
            vertical ? CLASS_NAME_VERTICAL : CLASS_NAME_HORIZONTAL,
            className
        )}
        style={style}
    >
        {header}
        {range(numberOfItems).map((key) => (
            <div key={key} className={CLASS_NAME_ITEM}>
                <div
                    className={`${CLASS_NAME}-${shape}`}
                    style={{
                        width,
                        height,
                        borderRadius: shape === 'rounded' && height ? height / 2 : undefined,
                    }}
                />
            </div>
        ))}
    </div>
);

export { SkeletonLoader };