import { Box, Typography } from "@mui/material";
import { ResponsiveLine } from "@nivo/line";
import PropTypes from "prop-types";
import React from "react";
import GradientSVG from "../../Common/GradientSVG/GradientSVG";
import {
  Container,
  StyledDivider,
  StyledHeaderContainer,
  StyledPercentText,
} from "./styles";

/**
@extends {ResponsiveLine from "@nivo/line"}
*/
const LineChart = ({
  width,
  height,
  header1,
  header2,
  isOverPerforming,
  ...otherProps
}) => {
  const gradientColor = isOverPerforming
    ? "gradientSVGPositive"
    : "gradientSVGNegative";
  const shouldRenderHeader =
    header1 !== undefined &&
    header1 !== "" &&
    header2 !== undefined &&
    header1 !== "";

  const renderHeader = () => (
    <StyledHeaderContainer>
      <StyledPercentText variant="body2">%</StyledPercentText>
      <Box>
        <Typography variant="caption">{header1}</Typography>
        <StyledDivider />
        <Typography variant="caption">{header2}</Typography>
      </Box>
    </StyledHeaderContainer>
  );

  return (
    <Container width={width} height={height}>
      <GradientSVG />
      {shouldRenderHeader && renderHeader()}
      <ResponsiveLine
        colors={[`url(#${gradientColor})`]}
        lineWidth={4}
        enablePoints={false}
        enableGridX={false}
        enableGridY={false}
        margin={{ top: 30, right: 40, bottom: 30, left: 10 }}
        xScale={{ type: "point" }}
        yScale={{
          type: "linear",
          min: "auto",
          max: "auto",
          stacked: true,
          reverse: false,
        }}
        yFormat=" >-.2f"
        axisLeft={null}
        axisRight={{
          orient: "right",
          tickSize: 0,
          tickPadding: 10,
          tickRotation: 0,
          legend: "",
          legendOffset: 0,
        }}
        axisBottom={{
          orient: "bottom",
          tickSize: 0,
          tickPadding: 10,
          tickRotation: 0,
          legend: "",
          legendOffset: 0,
        }}
        theme={{
          axis: {
            domain: {
              line: {
                stroke: "#85B4ED",
                strokeWidth: 1,
              },
            },
          },
        }}
        {...otherProps}
      />
    </Container>
  );
};
LineChart.propTypes = {
  width: PropTypes.string,
  height: PropTypes.string,
  header1: PropTypes.string,
  header2: PropTypes.string,
  isOverPerforming: PropTypes.bool,
};
export default LineChart;