import React, { useContext, useEffect, useState } from "react";
//@ts-ignore
import { ProgressBar } from "impaktapps-design";
import ComponentWrapper from "../common/ComponentWrapper";
import { DataContext } from "../context/Context";
import { getFieldName } from "../permissions/getFieldName";
import { getComponentProps } from "../common/getComponentProps";

const ImpaktApps_ProgressBar = (props: any) => {
  const { uischema, data,path,schema,rootSchema } = props;
  const uischemaData = uischema.config;
  const [graphData, setGraphData] = useState({
    main: {
      ...uischemaData.main,
      data: { total: 0, achieved: 0, remaining: 0 },
    },
  });
  useEffect(() => {
    setGraphData({
      main: {
        bottomLabel_1: "Target",
        bottomLabel_2: "Achieved",
        bottomLabel_3: "Remaining",
        ...uischemaData.main,
        data: data ? data : { Target: 0, Achieved: 0, remaining: 0 },
      },
    });
  }, [data]);
  const { pageName, permissions, theme } = useContext(DataContext);
  const fieldName = getFieldName(path);
  return <ComponentWrapper
  {...getComponentProps(`${pageName}:${fieldName}`,permissions,schema,rootSchema)}>
  <ProgressBar theme={theme} value={graphData} />
  </ComponentWrapper>
  ;
};

export default ImpaktApps_ProgressBar;