import React from "react";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";

import createClasses from "./styles";

export interface CustomTooltipProps {
    payload?: {
        name: string;
        value: number;
        payload?: {
            fill?: string;
        };
    }[];
    active?: boolean;
    tooltipPostfix?: string
}

const CustomTooltip = (props: CustomTooltipProps) => {
    const { payload, active, tooltipPostfix } = props;

    const isPayload = payload && payload.length > 0;
    const showTooltip = active && isPayload;

    const classes = createClasses({
        backgroundColor: isPayload ? payload?.[0].payload?.fill : "transparent"
    });

    if (showTooltip) {
        return (
            <Grid container className={classes.root}>
                <Typography align="center">
                    <Box component="span" className={classes.square} />
                    <Typography component="span" className={classes.name}>
                        {payload?.[0].name}
                    </Typography>
                    <Typography component="span" className={classes.data}>
                        {payload?.[0].value}{tooltipPostfix}
                    </Typography>
                </Typography>
            </Grid>
        );
    }

    return null;
};

CustomTooltip.defaultProps = {
    active: false,
    payload: []
};

export default CustomTooltip;