import { useContext, useEffect, useState } from "react";
import { inputProps } from "../interface/inputfieldProps";
import {
  BarGraph,
  PieGraph,
  LineGraph,
  HorizontalBarGraph
} from "impaktapps-design";
import { AreaGraph } from "impaktapps-design";
import { Box } from "@mui/system";
import { getComponentProps } from "../common/getComponentProps";
import ComponentWrapper from "../common/ComponentWrapper";
import { DataContext } from "../context/Context";
import { getFieldName } from "../permissions/getFieldName";
import { StackBarLineGraph } from 'impaktapps-design';
const Graph = function (props: inputProps) {
  const { uischema, data, path, schema, rootSchema } = props;
  const uischemaData = uischema.config;
  const colorMap = (schema as any)?.colorMap || uischemaData?.style?.colorMap;
  const [graphData, setGraphData] = useState(uischemaData.main);
  useEffect(() => {
    if (Array.isArray(data)) {
      setGraphData({ ...uischemaData.main, data: data });
    }
  }, [data, data?.length]);
  const { pageName, permissions, theme } = useContext(DataContext);
  const fieldName = getFieldName(path);
  return (
    <ComponentWrapper
      {...getComponentProps(
        `${pageName}:${fieldName}`,
        permissions,
        schema,
        rootSchema
      )}
    >
      <Box sx={{ width: "100%", overflowX: "auto", margin: "auto", position: 'relative' }}>
        {uischemaData.main?.type === "BarGraph" && (
          <BarGraph
            theme={theme}
            value={{
              main: graphData,
              style: { ...uischemaData.style, colorMap: colorMap }
            }}
          />
        )}
        {uischemaData.main?.type === "StackBarGraph" && (
          <BarGraph
            theme={theme}
            value={{
              main: graphData,
              style: { ...uischemaData.style, colorMap: colorMap}
            }}
          />
        )}
        {uischemaData.main?.type === "PieGraph" && (
          <PieGraph
            theme={theme}
            value={{
              main: graphData,
              style: { ...uischemaData.style, colorMap: colorMap}
            }}
          />
        )}
        {uischemaData.main?.type === "LineGraph" && (
          <LineGraph
            theme={theme}
            value={{
              main: graphData,
              style: { ...uischemaData.style, colorMap: colorMap}
            }}
          />
        )}
        {uischemaData.main?.type === "HorizontalBarGraph" && (
          <HorizontalBarGraph
            theme={theme}
            value={{
              main: graphData,
              style: { ...uischemaData.style, colorMap: colorMap}
            }}
          />
        )}
        {uischemaData.main?.type === "HorizontalStackBarGraph" && (
          <HorizontalBarGraph
            theme={theme}
            value={{
              main: graphData,
              style: { ...uischemaData.style, colorMap: colorMap}
            }}
          />
        )}
        {uischemaData.main?.type === "AreaGraph" && (
          <AreaGraph
            theme={theme}
            value={{
              main: {
                ...graphData,
                xAxisSchemaFormat: schema?.format
              },
              style: { ...uischemaData.style, colorMap: colorMap}
            }}
          />
        )}
        {uischemaData.main?.type === 'StackBarLineGraph' && (
          <StackBarLineGraph
            theme={theme}
            value={{
              main: graphData,
              style: { ...uischemaData.style, colorMap: colorMap },
            }}
          />
        )}
      </Box>
    </ComponentWrapper>
  );
};

export default Graph;