/**
 * @author Timur Kuzhagaliyev <tim.kuzh@gmail.com>
 * @copyright 2020
 * @license MIT
 */

import React from 'react';

import { makeLocalChonkyStyles } from '../../util/styles';

export interface TextPlaceholderProps {
    minLength: number;
    maxLength: number;
}

const getRandomInt = (min: number, max: number) => {
    return min + Math.floor(Math.random() * Math.floor(max - min));
};
export const TextPlaceholder: React.FC<TextPlaceholderProps> = React.memo(props => {
    const { minLength, maxLength } = props;

    const placeholderLength = getRandomInt(minLength, maxLength);
    const whitespace = '&nbsp;'.repeat(placeholderLength);

    const classes = useStyles();
    return (
        <span
            className={classes.textPlaceholder}
            dangerouslySetInnerHTML={{ __html: whitespace }}
        />
    );
});

const useStyles = makeLocalChonkyStyles(() => ({
    '@keyframes loading-placeholder': {
        '0%': { opacity: 0.2 },
        '50%': { opacity: 0.4 },
        '100%': { opacity: 0.2 },
    },
    textPlaceholder: {
        animationName: '$loading-placeholder',
        animationIterationCount: 'infinite',
        animationTimingFunction: 'linear',
        animationDuration: '1.5s',
        backgroundColor: '#ccc',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        borderRadius: 4,
        maxWidth: '40%',
        minWidth: 20,
    },
}));