import "./../../../css/components/preloader.css";
import React from "react";

export default function Preloader ( props: {visible: boolean, text?: string | null}) {
  const {text = 'загрузка'} = props;
  let preloaderColorArray: string[] = ['preloader-ruby-circle', 'preloader-emerald-circle', 'preloader-graphite-circle'],
  //Код ниже реализует возможность присваивать каждую перезагрузку разные классы с цветом полос
  //Рандомное число, по которому получим первый класс
  firstColorIndex: number = Math.floor(Math.random() * 3),
  firstCircleClass: typeof preloaderColorArray[number] = preloaderColorArray[firstColorIndex],
  secondCircleClass: typeof preloaderColorArray[number],
  thirdCircleClass: typeof preloaderColorArray[number];
  //Удалим уже используемый класс цвета из массива 
  preloaderColorArray.splice(firstColorIndex, 1);
  //Оставшиеся 2 класса распределеяем в зависимости от проостой проверки четности/нечетности
  if (Math.floor(Math.random() * 2) % 2 === 0) {
    secondCircleClass = preloaderColorArray[0];
    thirdCircleClass = preloaderColorArray[1];
  } else {
    secondCircleClass = preloaderColorArray[1];
    thirdCircleClass = preloaderColorArray[0];
  }
  return (
    props.visible ? 
      <div id='preloader_container'>
        <div id='preloader'>
          <div className={'circle ' + firstCircleClass} id='circle_one'></div>
          <div className={'circle ' + secondCircleClass} id='circle_two'></div>
          <div className={'circle ' + thirdCircleClass} id='circle_three'></div>
          <div id='logo'>
            <div className='logo_square' id='right-bottom'></div>
            <div className='logo_square' id='left-top'></div>
          </div>
          <div id='preloader_text'>{ text }</div>
        </div>
      </div>
      : null
  )
}