import React, {useEffect, useState} from "react";
import {Box, Grid, Typography, useTheme} from "@mui/material";
import {XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ComposedChart, Bar} from "recharts";
import {updateDiaryWidget, Widget} from "../../../actions/cicap-diary-widgets";
import {useAuthContext} from "../../AuthProvider/AuthProvider";

interface ProfitWeekdaysChartProps {
  data: number[];
  widget: Widget;
  onWidgetUpdate: (id: string) => void;
}

const ProfitWeekdaysChart = ({data, widget, onWidgetUpdate}: ProfitWeekdaysChartProps) => {
  return (
    <>
      <Grid display="flex" >
        {
          periodProfitWeekdaysChart.map((p, i) => <Grid key={i}>
            <Typography
              onClick={(e) => {
                //@ts-ignore
                onChangePeriodProfitWeekdaysChart(e.target.outerText);
              }}
              fontSize={13}
              sx={{
                cursor: "pointer",
                mr: ".25rem",
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "center",
                alignContent: "center",
                height: "24px",
                padding: "2px 10px 1px",
                backgroundColor: !p.checked ? !darkTheme ? "#E6E6E6" : "#242424" : !darkTheme ? "#C3463B" : "#B41C18",
                color: !p.checked ? !darkTheme ? "rgba(91, 91, 91, 0.6)" : "#999999" : "#fff",
                borderRadius: "1rem",
              }}>
              {p.title}
            </Typography>
          </Grid>
          )
        }
      </Grid>
      <ResponsiveContainer width="100%" height="100%">
        <ComposedChart
          data={formattedSeriesData}
          layout="vertical"
          margin={{
            top: 30,
            right: 20,
            bottom: 20,
            left: -25,
          }}
        >
          <CartesianGrid horizontal={false} strokeDasharray="3 3" stroke={darkTheme ? "#5c5a57" : "#ccc"} />
          <YAxis
            dataKey="name"
            interval={0}
            axisLine={darkTheme ? false : {stroke: "#EBEBEB"}}
            tickLine={false}
            fontSize="12"
            type="category"
            scale="band"
            tick={({x, y, payload, width}) => {
              return (
                <text
                  x={x - 10}
                  y={y + 10}
                  textAnchor="middle"
                  fill="#9E9B98"
                  fontSize={13}
                >
                  {payload.value}
                </text>
              );
            }}
          />
          <XAxis
            type="number"
            axisLine={false}
            tickLine={false}
            tick={({x, y, payload}) => {
              return (
                <text
                  x={x}
                  y={y + 10}
                  textAnchor="middle"
                  fill="#9E9B98"
                  fontSize={13}
                >
                  {
                    +payload.value >= 0 ? `$${Math.abs(+payload.value)}` : `-$${Math.abs(+payload.value)}`
                  }
                </text>
              );
            }}
          />
          <Tooltip content={<CustomTooltip />} />
          <Bar dataKey="profit" radius={[0, 8, 8, 0]} barSize={60}
            fill={darkTheme ? "#0F3B2B" : "#F3C9CE"} />
        </ComposedChart>
      </ResponsiveContainer>
    </>
  );
};

нужно сделть высота баров по оси x высотой в 24px, цвет баров в темной теме, если value отрицательный, то #0F3B2B, если положительный то #89ADA0.
Так же сделать чтобы при наедении мышко