import  { useContext, useState } from "react";
import Grid from "@mui/material/Grid2";
import { inputProps } from "../interface/inputfieldProps";
import { Box } from "@mui/system";
import Button from "@mui/material/Button";
import { useJsonForms, withJsonFormsControlProps } from "@jsonforms/react";
import { DataContext } from "../context/Context";
import { getFieldName } from "../permissions/getFieldName";
import ComponentWrapper from "../common/ComponentWrapper";
import { getComponentProps } from "../common/getComponentProps";

const RollAndDice = ({
  data,
  uischema,
  path,
  schema,
  rootSchema,
  renderers,
  handleChange,
}: inputProps) => {
  const [showRank, setShowRank] = useState(false);
  const [rank, setRank] = useState( data?data.rank:0);
  const rankHandler = () => {
    setRank(data?data?.rank:0);
    setShowRank(true);
  };
  const { pageName, permissions, theme } = useContext(DataContext);
  const fieldName = getFieldName(path);
  return (
    <ComponentWrapper
    {...getComponentProps(`${pageName}:${fieldName}`,permissions,schema,rootSchema)}>
      <Grid
        container
        rowSpacing={uischema.config?.main?.rowSpacing || 2}
        columnSpacing={uischema.config?.main?.columnSpacingSpacing || 2}
        spacing={uischema.config?.main?.spacing || 2}
        size={uischema?.config?.layout || 11}
        sx={{
          gap: uischema.config?.main?.gap,
          justifyContent: "space-around",
          width: "100%",
          height: 270,
          position: "relative",
          background: "#333333",
          borderRadius: "12px",
          boxShadow: "2px 2px 5px grey",
          margin: "auto",

          // ...uischema?.config?.style?.wrapperStyle,
          padding: "none"
        }}>
      {  !showRank?
        <>
          <Grid
            sx={{
              color: "white",
              height: 190,
              width: "60%",
              marginLeft: "auto",
              marginRight: "auto",
              backgroundSize: "contain",
              backgroundPosition: "center",
              display: "flex",
              alignItems: "center",
              marginTop: "10px",
              justifyContent: "center",
              backgroundRepeat: "no-repeat",
              padding: "0px 12px",
              backgroundImage:
                "url('https://media0.giphy.com/media/oVC14esV3dKehcBkT4/giphy.gif?cid=ecf05e47vv4p7czphyk7mnyu6uwho7r1g8da0lwyceacljoe&ep=v1_stickers_search&rid=giphy.gif&ct=s')",
              borderRadius: "50%",
            }}
            size={12}
          ></Grid>

          <Button
            onClick={() => rankHandler()}
            sx={{
              width: { xs: "100%", sm: "60%", md: "30%", lg: "20%" },
              position: "absolute",
              bottom: "10px",
              right: { xs: "0%", sm: "20%", md: "35%", lg: "40%" },
            }}
          >
            Rank
          </Button>
        </>
        :
        <>
        <Box
          sx={{
            color: "white",
            height: 300,
            width: "100%",
            marginLeft: "auto",
            marginRight: "auto",
            backgroundSize: "contain",
            backgroundPosition: "center",
            marginTop: "-20px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "0px 12px",
            backgroundRepeat: "no-repeat",
            backgroundImage:
              "url('https://media0.giphy.com/media/oVC14esV3dKehcBkT4/giphy.gif?cid=ecf05e47vv4p7czphyk7mnyu6uwho7r1g8da0lwyceacljoe&ep=v1_stickers_search&rid=giphy.gif&ct=s')",
            borderRadius: "45%",
          }}
        ></Box>
        <Box
          sx={{
            color: "white",
            height: 190,
            width: 190,
            backgroundSize: "contain",
            fontWeight: "bolder",
            backgroundPosition: "center",
            display: "flex",
            alignItems: "center",
            marginTop: "40px",
            justifyContent: "center",
            position: "absolute",
            top: 1,
            left: "calc(50% - 90px)",
            zIndex: 10,
            fontSize: "85px",
            padding: "0px 12px",
            textShadow: "2px 2px 5px rgb(57, 73, 171)",
            background: "#13142B",
            "@keyframes rotateAnimation": {
              from: {
                transform: "rotate(0deg)",
              },
              to: {
                transform: "rotate(360deg)",
              },
            },
            animation: "rotateAnimation 4s infinite",
            borderRadius: "55%",
          }}
        >
          
          {rank}
        </Box>
        <Box
          sx={{
            color: "white",
            marginLeft: "auto",
            marginRight: "auto",
            backgroundSize: "contain",
            position: "absolute",
            bottom: 10,
            backgroundPosition: "center",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "0px 12px",
          }}
        >
          Your Rank
        </Box>
        </>
  }
      </Grid>
    </ComponentWrapper>
  );
};

export default withJsonFormsControlProps(RollAndDice);