import React from "react";

import "./Progress.css";

import { getCN, usePadding, randomId } from "../utils";
import ButtonTouch from "../ButtonTouch/ButtonTouch";

import { IconCheck } from "../../svg_icons/IconCheck";

import { Icon16CheckOutline } from "@vkontakte/icons";

function Progress({ loading, success, ...props }: { [x: string]: any }) {
  var props_id = randomId(props.id, `progress`);
  return (
    <div
      className={getCN([
        `MYUI-Progress`,
        props.value == props.max && `MYUI-Progress--max`,
        loading && `MYUI-Progress--loading`,
      ])}
    >
      <progress
        {...props}
        aria-label={props_id}
        id={props_id}
        className={getCN([`MYUI-Progress_in`, props.className])}
      />
      {!loading && props.value == props.max && (
        <>
          {success == `check` ? (
            <div className="MYUI-Progress--success">
              <IconCheck width={14} height={14} />
            </div>
          ) : (
            <div className="MYUI-Progress--success">{success}</div>
          )}
        </>
      )}
    </div>
  );
}

export default Progress;