/*
 * @Title:
 * @Author: hongmye
 * @Date: 2024-03-28 13:43:42
 */
import React, { useRef, useEffect, isValidElement } from 'react';
import PandaImage from '@/assets/images/loadPage/熊猫.png';
import style from './style.less';

export default props => {
  const { type, percent, text } = props;

  const extra = props.extra ?? {};

  const progresRef = useRef(null);
  const containerRef = useRef(null);
  const lastCurrent = useRef(0);

  useEffect(() => {
    if (percent == undefined) return;
    if (extra.progressCustom) return;
    // progresRef.current.style.animationDuration = `${10 * percent}s`;
    // containerRef.current.style.transitionDuration = `${5 * (percent - lastCurrent.current)}s`;
    // lastCurrent.current = percent;
  }, [extra.progressCustom, percent]);

  return (
    <div className={style.panda_civbase_style_load_page_center_container} data-type={extra.loadCenterStyleType ?? type}>
      {/* {extra.leftCustom ? (
        <extra.leftCustom />
      ) : (
        <div className={style.panda_civbase_style_load_page_center_container_icon}>
          <img
            alt=""
            src={extra.leftLogo ?? PandaImage}
            className={style.panda_civbase_style_load_page_center_container_icon_image}
          />
          <div className={style.panda_civbase_style_load_page_center_container_icon_bg}>
            <div />
            <div />
            <div />
          </div>
        </div>
      )} */}
      <div className={style.panda_civbase_style_load_page_center_container_logo}>
        {extra.progressCustom ? (
          <extra.progressCustom percent={percent} />
        ) : (
          <div className={style.panda_civbase_style_load_page_center_container_logo_progress}>
            <div
              ref={containerRef}
              className={style.panda_civbase_style_load_page_center_container_logo_progress_inside}
              style={{
                width: `${(percent == undefined ? 1 : percent) * 100}%`,
              }}
            >
              {percent != undefined ? (
                <span className={style.panda_civbase_style_load_page_center_container_logo_progress_inside_percent}>
                  {parseInt(percent * 100)}%
                </span>
              ) : null}
              <div
                ref={progresRef}
                className={style.panda_civbase_style_load_page_center_container_logo_progress_inside_current}
              />
            </div>
          </div>
        )}
        {text ? <div className={style.panda_civbase_style_load_page_center_container_logo_text}>{text}</div> : null}
      </div>
    </div>
  );
};