import Grid from "@mui/material/Grid2";
import { useContext, useState } from "react";
import { inputProps } from "../interface/inputfieldProps";
import { DataContext } from "../context/Context";
import { withJsonFormsControlProps } from "@jsonforms/react";
import { getFieldName } from "../permissions/getFieldName";
import ComponentWrapper from "../common/ComponentWrapper";
import { getComponentProps } from "../common/getComponentProps";
import MyRank from "../assets/myRank";
import CheckMyRank from "../assets/CheckMyRank";
const RankCard = ({
  data,
  uischema,
  path,
  schema,
  rootSchema
}: inputProps) => {
  const uischemaData = uischema?.config?.main;
  const { pageName, permissions, theme } = useContext(DataContext);
  const fieldName = getFieldName(path);
  const [showRank, setShowRank] = useState(false);
  return (
    <ComponentWrapper
    {...getComponentProps(`${pageName}:${fieldName}`,permissions,schema,rootSchema)}>
      <Grid
        container
        sx={{
          background: "tranparent",
          justifyContent: "center"
        }}>
            <CheckMyRank
              height={uischema?.config?.main?.height ?? "200px"}
              onClick={() => setShowRank(true)}
              style={{ display: showRank ? "none" : "flex" }}
            />
            <MyRank style={{display: showRank ? "flex" : "none"}} color={theme.myTheme.palette.primary.dark} rank={data?.rank ? data.rank : uischemaData?.rank} height={uischema?.config?.main?.height ?? "200px"}></MyRank>
      </Grid>
    </ComponentWrapper>
  );
};

export default withJsonFormsControlProps(RankCard);