import React, { memo, useContext, useEffect, useMemo, useState } from "react";
import { Box, styled } from "@mui/system";
import Grid from "@mui/material/Grid2";
import { inputProps } from "../interface/inputfieldProps";
import { useJsonForms, withJsonFormsControlProps } from "@jsonforms/react";
import { DataContext } from "../context/Context";
import { getFieldName } from "../permissions/getFieldName";
import ComponentWrapper from "../common/ComponentWrapper";
import { TooltipProps, Tooltip, tooltipClasses } from "@mui/material";
import Archer from "../assets/Archer";
import Arrow from "../assets/Arrow";
import Target from "../assets/Target";


const StyledTooltip = memo(
  styled(({ className, theme, ...props }: any) => (
    <Tooltip {...props} classes={{ popper: className }} />
  ))(({theme}) => ({
    [`& .${tooltipClasses.tooltip}`]: {
      "& .MuiTooltip-arrow": {
        color: theme.myTheme.palette.secondary.main,
      },
      backgroundColor: theme.myTheme.palette.secondary.main,
      color: theme.myTheme.palette.text.primary,
      fontSize: 11,
      boxShadow: `1px 2px ${theme.myTheme.palette.secondary.dark}`,
    },
  }))
);

const RunnerProgressBar = memo(function ({
  data,
  uischema,
  path,
}: inputProps) {
  const { pageName, permissions, theme } = useContext(DataContext);
  const tooltipTitle = useMemo(
    () => (
      <>
        <div style={{ fontWeight: "normal", textAlign: "center" }}>
          Target Achieved
        </div>
        <div style={{ fontWeight: "bold", textAlign: "center" }}>
          {data?.achieve}
        </div>
      </>
    ),
    [data?.achieve]
  );

  const [progress, setProgrss] = useState(0);
  useEffect(() => {
    setProgrss(((data?.achieve * 100) / data?.total) || 0);
  }, [data?.total, data?.achieve]);
  const getColor = () => {
    if (progress < 25) {
      return [`${theme.myTheme.palette.grey[300]}`, `red`];
    } else if (progress < 50) {
      return [`${theme.myTheme.palette.grey[300]}`, `yellow`];
    } else {
      return [`${theme.myTheme.palette.grey[300]}`, `#0d8b92`];
    }
  };
  const fieldName = getFieldName(path);
  const ctx = useJsonForms();
  const pathArray = path.split(".");
  const finalPath = pathArray[pathArray.length - 1];
  return (
    <ComponentWrapper
      additionalProps={ctx.core.data?.additionalProps?.[finalPath]}
      path={`${pageName}:${fieldName}`}
      permissions={permissions}
    >
      <Grid
        sx={{
          position: "relative",
          height: "120px",
          top: "50%",
          transform: "translateY(-50%)",
          ...uischema.config.style
        }}
      >
        <Archer
          color={progress < 25 ? "red" : progress < 50 ? "yellow" : "#0d8b92"}
        />

        <Box
          sx={{
            width: "80%",
            height: "6px",
            margin: "auto",
            borderRadius: "10px",
            marginBottom: "15px",
            position: "absolute",
            left: "15%",
            top: "40%",
            "&:hover": {
              "& .progress-bar-fill": {
                width: 0,
                "@keyframes widthAnimationHover": {
                  from: {
                    width: 0,
                  },
                  to: {
                    width: progress > 100 ? "100%" : `${progress}%`,
                  },
                },
                animation: `widthAnimationHover ${
                  (progress > 100 ? 100 : progress) * (1 / 20)
                }s ease-out 0.2s 1 forwards`,
              },
            },

            "&:hover ~ .arrow-parent .arrow": {
              left: 0,
              "@keyframes leftAnimationHover": {
                from: { left: 0 },
                to: { left: progress > 100 ? "100%" : `${progress}%` },
              },
              animation: `leftAnimationHover ${
                (progress > 100 ? 100 : progress) * (1 / 20)
              }s ease-out 0.2s 1 forwards`,
            },
          }}
        >
          <div
            style={{
              width: "-webkit-fill-available",
              height: "12px",
              margin: "auto",
              borderRadius: "10px",
              backgroundColor: getColor()[0],

              marginBottom: "0px",
              position: "absolute",
              top: "10px",
            }}
          >
            <StyledTooltip
            theme={theme}
              arrow
              title={
                tooltipTitle
              }
              placement="top-end"
            >
              <Box
                className="progress-bar-fill"
                sx={{
                  width: 0,
                  "@keyframes widthAnimation": {
                    from: {
                      width: 0,
                    },
                    to: {
                      width: progress > 100 ? "100%" : `${progress}%`,
                    },
                  },
                  animation: `widthAnimation ${
                    (progress > 100 ? 100 : progress) * (1 / 20)
                  }s ease-out 0s 1 forwards`,
                  backgroundColor: getColor()[1],
                  height: "100%",
                  borderRadius: "10px",
                  marginBottom: "0px",
                  transition: "width 2s ease-out",
                  position: "relative",
                  border: "1px solid transparent",
                  overflow: "hidden",
                  "&:hover": {
                    border: "1px solid black",
                  },
                }}
              >
                <div
                  style={{
                    borderRadius: "50%",
                    width: "7px",
                    height: "7px",
                    backgroundColor: `${theme.myTheme.palette.common.white}`,
                    position: "absolute",
                    top: "50%",
                    right: `2px`,
                    transform: "translateY(-50%)",
                  }}
                ></div>
              </Box>
            </StyledTooltip>
          </div>
        </Box>
        <div
        className="arrow-parent"
          style={{
            width: "80%",
            left: "15.2%",
            top: "29%",
            position: "absolute",
          }}
        >
          <Box
            key={progress}
            className="arrow"
            sx={{
              "@keyframes leftAnimation": {
                from: {
                  left: 0,
                },
                to: {
                  left: progress > 100 ? "100%" : `${progress}%`,
                },
              },
              animation: `leftAnimation ${
                (progress > 100 ? 100 : progress) * (1 / 20)
              }s ease-out 0s 1 forwards`,
              zIndex: "1",
              borderRadius: "50%",
              position: "absolute",
              transform: "translateX(-100%)",
            }}
          >
            <Arrow
              color={
                progress < 25 ? "red" : progress < 50 ? "yellow" : "#0d8b92"
              }
            />
          </Box>
        </div>

        <div
          style={{
            borderRadius: "50%",
            position: "absolute",
            top: "8%",
            right: "0%",
          }}
        >
          <Target
            color={progress < 25 ? "red" : progress < 50 ? "yellow" : "#0d8b92"}
          />
        </div>
        <div
          style={{
            width: "80%",
            position: "absolute",
            left: "15%",
            bottom: "0px",
            flexDirection: "row",
            display: "flex",
            color: theme.myTheme.palette?.text?.primary,
          }}
        >
          <div style={{ width: "33.33%" }}>
            <div
              style={{
                textAlign: "left",
                fontSize: "14px",
                color: theme.myTheme.palette?.grey[600],
              }}
            >
              {uischema?.config?.main?.bottomLabel_1 || "Target"}
            </div>
            <div
              style={{
                color: theme.myTheme.palette?.grey[600],
                textAlign: "left",
              }}
            >
              {data?.total || data?.bottomLabel_1_value}
            </div>
          </div>
          <div style={{ width: "33.33%" }}>
            <div
              style={{
                textAlign: "center",
                fontSize: "14px",
                color: theme.myTheme.palette?.grey[600],
              }}
            >
              {uischema?.config?.main?.bottomLabel_2 || "Achieved"}
            </div>
            <div
              style={{
                textAlign: "center",
                color: theme.myTheme.palette?.grey[600],
              }}
            >
              {data?.achieve || data?.bottomLabel_2_value}
            </div>
          </div>
          <div style={{ width: "33.33%" }}>
            <div
              style={{
                textAlign: "right",
                fontSize: "14px",
                color: theme.myTheme.palette?.grey[600],
              }}
            >
              {uischema?.config?.main?.bottomLabel_3 || "Remaining"}
            </div>
            <div
              style={{
                textAlign: "right",
                color: theme.myTheme.palette?.grey[600],
              }}
            >
              {Math.max(0, data?.remaining || data?.total - data?.achieve)}
            </div>
          </div>
        </div>
      </Grid>
    </ComponentWrapper>
  );
});
export default withJsonFormsControlProps(RunnerProgressBar);