import React from "react";
import { commaSeperated } from "../utils/common-functions";
import {
  LineChart,
  Line,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  ReferenceDot,
} from "recharts";
import PropTypes from "prop-types";
let CreateReactClass = require("create-react-class");

const CustomTooltip = CreateReactClass({
  propTypes: {
    type: PropTypes.string,
    payload: PropTypes.array,
    label: PropTypes.string,
  },

  render() {
    const { active } = this.props;

    if (active) {
      const { payload } = this.props;

      return (
        <div>
          <p
            style={{ fontSize: 10, fontFamily: "notosans", color: "slateblue" }}
          >
            {Number(payload[0].value) > 0
              ? commaSeperated(payload[0].value)
              : "-" + commaSeperated(Math.abs(payload[0].value))}
          </p>
        </div>
      );
    }
    return null;
  },
});

const MiniStateSparkline = ({
  requiredStateDailyData,
  dataKey,
  min,
  max,
  sparklineData,
  stroke,
}) => {
  return (
    <section style={{ alignContent: "center" }}>
      <ResponsiveContainer width="95%" height="100%" aspect={2.35}>
        <LineChart
          data={requiredStateDailyData.slice(
            requiredStateDailyData.length - 20,
            requiredStateDailyData.length
          )}
          syncId="line2"
        >
          <YAxis domain={[min, max]} hide={true} />

          <Tooltip
            content={<CustomTooltip />}
            contentStyle={{
              background: "rgba(255,255,255,0)",
              border: "none",
              textAlign: "left",
            }}
            active={true}
            cursor={false}
            position={{ x: -5, y: 0 }}
            offset={5}
          />
          <Line
            type="monotone"
            dataKey={dataKey}
            stroke={stroke}
            strokeWidth={2.2}
            dot={false}
            animationDuration={2000}
          />
          <ReferenceDot
            x={
              sparklineData.slice(
                sparklineData.length - 20,
                sparklineData.length
              ).length - 1
            }
            y={Number(sparklineData.slice(-1))}
            r={3}
            fill={stroke}
            stroke={stroke}
            isAbove={true}
          />
        </LineChart>
      </ResponsiveContainer>
    </section>
  );
};

export default MiniStateSparkline;