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

export interface LoadingIndicatorProps {
    className?: string;
    style?: React.CSSProperties;
    testId?: string;
    small?: boolean;
    fullscreen?: boolean;
    title?: string | false;
}

export const CLASS_NAME = 'LoadingIndicator';
export const CLASS_NAME_OUTER = `${CLASS_NAME}-outer`;
export const CLASS_NAME_DOTS = `${CLASS_NAME}-dots`;
export const CLASS_NAME_DOT = `${CLASS_NAME}-dot`;
export const CLASS_NAME_TITLE = `${CLASS_NAME}-title`;
export const CLASS_NAME_FULLSCREEN = 'fullscreen';
export const CLASS_NAME_SMALL = 'small';

/**
 * Please use LoadingPageIndicator.
 *
 * @type atom
 * @status deprecated
 * @tags feedback
 */
export const LoadingIndicator: FC<LoadingIndicatorProps> = ({
    className,
    style,
    testId = CLASS_NAME,
    fullscreen = false,
    small = false,
    title = formatMessage('loading_pleaseWait'),
}) => (
    <div
        data-testid={testId}
        className={cx(CLASS_NAME, className, {
            [CLASS_NAME_FULLSCREEN]: fullscreen,
            [CLASS_NAME_SMALL]: small,
        })}
        style={style}
    >
        <div className={CLASS_NAME_OUTER}>
            <div className={CLASS_NAME_DOTS}>
                <div className={CLASS_NAME_DOT} />
                <div className={CLASS_NAME_DOT} />
                <div className={CLASS_NAME_DOT} />
                <div className={CLASS_NAME_DOT} />
                <div className={CLASS_NAME_DOT} />
            </div>
            {title ? <p className={CLASS_NAME_TITLE}>{title}</p> : null}
        </div>
    </div>
);