import React, { useState } from "react";
import { Container } from "./styles";
import Switch from "../toggle";
import ProgressBar from "../ApiProgressBar";
import { BsCheck } from "react-icons/bs";
import Alerm from "./assets/Vector";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";

const ApiConsumption = ({ onClick }) => {
  const { findText } = useTranslation(wordStore);
  const [disabled, setDisabled] = useState(false);
  const [used, setUsed] = useState(300);
  const handleAdjust = (newUsed) => {
    setUsed(newUsed);
  };
  const handleToggle = (e) => {
    //console.log(e.target.checked);

    setDisabled(e.target.checked);
  };
  return (
    <Container disabled={disabled}>
      <div className="switch">
        <div className="view">
          <div className="sw-cont">
            <Switch
              defaultChecked={false}
              color="rgba(254, 191, 16, 1)"
              icon={<BsCheck />}
              onChange={handleToggle}
            />
          </div>

          <p className="v-text">{findText("View Api consumption")}</p>
        </div>

        <div className="notify">
          <p>{findText("Set Notification")}</p>
          <div className="bell" onClick={onClick}>
            <Alerm />
          </div>
        </div>
      </div>
      <ProgressBar
        total={1000}
        used={used}
        available={1000 - used}
        max={1000}
        size="sm"
        disabled={disabled}
        onAdjust={handleAdjust}
      />
    </Container>
  );
};
export default ApiConsumption;
