import React, {useEffect, useRef, useState} from "react";
import {
  init,
  dispose,
  Chart,
  DeepPartial,
  IndicatorFigureStylesCallbackData,
  Indicator,
  IndicatorStyle,
  KLineData,
  utils,
} from "klinecharts";
import {CandleChartProps} from "./CandleChart.props";
import CandleChartToolbar from "./CandleChartToolbar";
import {Style} from "util";
import {Box, Icon, IconButton, Stack} from "@mui/material";
import getMinutesTickSizeByInterval from "./utils/getMinutesTickSizeByInterval.util";
import drawTrade from "./utils/drawTrade.util";
import drawTradeLines from "./utils/drawTradeLines.util";
import {BasketIcon, ScreenIcon} from "../../icons";
import {FullScreen, useFullScreenHandle} from "react-full-screen";;

// @ts-ignore
const chartStyles: DeepPartial<Style> = {
  candle: {
    bar: {
      upColor: "#4caf50",
      downColor: "#d32f2f",
      noChangeColor: ""
    },
    priceMark: {
      high: {
        textFamily: "Mont",
      },
      low: {
        textFamily: "Mont",
      },
      last: {
        text: {
          family: "Mont",
        }
      }
    },
    tooltip: {
      text: {
        family: "Mont",
        marginLeft: 10,
        marginTop: 8,
        marginRight: 10
      }
    }
  },
  indicator: {
    ohlc: {
      upColor: "red",
      downColor: "red",
      noChangeColor: "red"
    },
    bars: [{
      upColor: "#4caf50",
      downColor: "#d32f2f",
      noChangeColor: ""
    }],
    lastValueMark: {
      show: false,
      text: {
        family: "Mont",
      }
    },
    tooltip: {
      text: {
        family: "Mont",
      },
    },
  },
  xAxis: {
    tickText: {
      family: "Mont",
    }
  },
  yAxis: {
    type: "log",
    tickText: {
      family: "Mont",
    },
  },
  crosshair: {
    horizontal: {
      text: {
        family: "Mont",
      }
    },
    vertical: {
      text: {
        family: "Mont",
      }
    }
  },
  overlay: {
    text: {
      family: "Mont",
    },
    rectText: {
      family: "Mont",
      backgroundColor: "#686D76",
    }
  }
}

interface Vol {
  volume?: number
}

export const CandleChart = ({
  images,
  candles,
  tradeId,
  orders,
  interval,
  openPrice,
  closePrice,
  pricePrecision,
  quantityPrecision,
  createImage
}: CandleChartProps) => {
  const chart = useRef<Chart|null>();
  const paneId = useRef<string>("");
  const [figureId, setFigureId] = useState<string>("")
  const ref = useRef<HTMLDivElement>(null);
  const handle = useFullScreenHandle();

  const onWindowResize = () => chart.current?.resize()

  useEffect(() => {
    window.addEventListener("resize", onWindowResize);
    onWindowResize();
    return () => {
      window.removeEventListener("resize", onWindowResize);
    };
  }, [ref, handle]);
  
  useEffect(() => {
    chart.current = init(`chart-${tradeId}`, {styles: chartStyles});

    return () => dispose(`chart-${tradeId}`);
  }, [tradeId]);

  useEffect(() => {
    const onWindowResize = () => chart.current?.resize();
    window.addEventListener("resize", onWindowResize);

    return () => window.removeEventListener("resize", onWindowResize);
  }, []);

  useEffect(() => {
    chart.current?.applyNewData(candles);
    chart.current?.overrideIndicator({
      name: "VOL",
      shortName: "Объем",
      calcParams: [],
      figures: [
        {
          key: "volume",
          title: "",
          type: "bar",
          baseValue: 0,
          styles: (data: IndicatorFigureStylesCallbackData<Vol>, indicator: Indicator, defaultStyles: IndicatorStyle) => {
            const kLineData = data.current.kLineData as KLineData
            let color: string
            if (kLineData.close > kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].upColor", (defaultStyles.bars)[0].upColor) as string
            } else if (kLineData.close < kLineData.open) {
              color = utils.formatValue(indicator.styles, "bars[0].downColor", (defaultStyles.bars)[0].downColor) as string
            } else {
              color = utils.formatValue(indicator.styles, "bars[0].noChangeColor", (defaultStyles.bars)[0].noChangeColor) as string
            }
            return { color }
          }
        }
      ]
    }, paneId.current);
    chart.current?.createIndicator("VOL", false, { id: paneId.current });
    chart.current?.setPriceVolumePrecision(+pricePrecision, +quantityPrecision);
  }, [candles]);

  useEffect(() => {
    if (!orders || orders.length === 0 || candles.length === 0) return;

    const minTime = orders[0].time;
    const maxTime = orders[orders.length - 1].time;
    const needleTime = minTime + (maxTime - minTime) / 2;

    chart.current?.scrollToTimestamp(needleTime + 45 * getMinutesTickSizeByInterval(interval) * 60 * 1000);
    drawTrade(chart, paneId, orders, interval);
    if (openPrice && closePrice) {
      let openTime = Infinity;
      let closeTime = -Infinity;

      orders.forEach(order => {
        if (openTime > order.time) {
          openTime = order.time;
        }

        if (closeTime < order.time) {
          closeTime = order.time;
        }
      });

      drawTradeLines(
        chart,
        openPrice,
        openTime,
        closePrice,
        closeTime,
        orders[0].position,
        paneId,
        pricePrecision,
        quantityPrecision,
      );
    }
  }, [orders, candles, tradeId]);

  const removeFigure = () => {
    chart.current?.removeOverlay({
      id: figureId
    })
    setFigureId("")
  } 

  const onButtonClick = async () => {
    const imgUrl = chart.current?.getConvertPictureUrl(true)
    if (!imgUrl) return
    createImage(`chart-${tradeId}-${images.length}`, imgUrl)
      const link = document.createElement("a");
      link.setAttribute("href", imgUrl);
      link.setAttribute("download", `chart-${tradeId}.jpg`);
  
      link.click();
  }

  return (<>
    <FullScreen handle={handle}>
      <Box height={!handle.active ? 590 : "100%"} sx={{ position: "relative", background: "#ffffff" }}>
         
        <Box sx={{ borderBottom: "1px solid #ddd" }}>
          <Box sx={{ borderLeft: "1px solid #ddd", ml: "55px" }}>
            <IconButton sx={{ borderRadius: 2, ml: 1, fontSize: "1rem", fontFamily: "Mont", color: "#677294" }} onClick={onButtonClick}>
              <Icon component={ScreenIcon} /> Screenshot
            </IconButton>
          </Box>
        </Box>

        <Stack direction="row" height={!handle.active ? 550 : "100%"} width="100%">
          <CandleChartToolbar
            setFigureId={setFigureId}
            chart={chart} paneId={paneId}
            handle={handle}
          />
           <Box
            ref={ref}
            id={`chart-${tradeId}`}
            width="calc(100% - 55px)"
            height={!handle.active ? 550 : "100%"}
            sx={{ borderLeft: "1px solid #ddd" }}
          >
            {
              figureId.length > 0 &&
              <Stack
                sx={{
                  backgroundColor: "#CBD4E3",
                  borderRadius: 1,
                  position: "absolute",
                  zIndex: 10,
                  right: 80,
                  top: 30,
                  border: "1px solid #697669",
                }}
                spacing={2}
              >
                <IconButton sx={{ borderRadius: 1 }} onClick={removeFigure}>
                  <Icon component={BasketIcon} />
                </IconButton>
              </Stack>
            }
          </Box>
        </Stack>

      </Box>
      </FullScreen>
  </>);
}


как сделать в этом компоненте,  чтобы график отображал текущую ситуацию на рынке, как здесь?