import React, { HTMLAttributes } from "react";

import "./ProgressCount.css";

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

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

import { Icon16CheckOutline } from "@vkontakte/icons";
import FormBody, { IFormBody } from "../../componentsDefault/FormBody/FormBody";

export interface IProgressCount extends HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  max?: number;
  min?: number;
  value: number;
  maxValueTransfer?: number;
  top?: IFormBody["top"];
  top_after?: IFormBody["top"];
  bottom?: IFormBody["bottom"];
}

function ProgressCount({
  children,
  max = 100,
  min = 0,
  value,
  maxValueTransfer = max / 1.4,
  top_after,
  top,
  bottom,
  ...props
}: IProgressCount) {
  var props_id = randomId(props.id, `progress`);
  return (
    <div
      className={getCN([`MYUI-ProgressCount`])}
    >
      <FormBody
        top={top}
        top_after={top_after}
        bottom={bottom}
        className={getCN(`ProgressCount_form`)}
      >
        <div className={getCN([`MYUI-ProgressCount_in`, props.className])}>
          <div
            style={{ width: `${(value / max) * 100}%` }}
            className={getCN([`MYUI-ProgressCount_body`, props.className])}>
            {value >= maxValueTransfer && children}
          </div>
          {value < maxValueTransfer && children && <div
            style={{ width: `calc(100% - ${(value / max) * 100}%)` }}
            className={getCN([`MYUI-ProgressCount_children`, props.className])}>
            {children}
          </div>}
        </div>
      </FormBody>
    </div>
  );
}

export default ProgressCount;