---

const TREntry = (props: TRProps) => {
  const [isCompareOpen, setIsCompareOpen] = useState(false);
  const [moexChart, setMoexChart] = useState<MoexChart | undefined>();
  const [snap, setSnap] = useState<any>();

  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const container = containerRef.current;

    if (!container) {
      return;
    }

    const chart = new MoexChart({
      ...props,
      container,
      chartCollectionPreset: {
        ...props.chartCollectionPreset,
        openCompareModal: () => setIsCompareOpen(true),
      },
    });

    setMoexChart(chart);

    return () => {
      chart.destroy();
    };
  }, [props]);

  return (
    <div
      style={{
        width: '100%',
        height: '100dvh',
        boxSizing: 'border-box',
        padding: 20,
        display: 'grid',
        gridTemplateRows: 'auto auto minmax(0, 1fr)',
        gap: 12,
        overflow: 'hidden',
      }}
    >
      <h3
        style={{
          margin: 0,
        }}
      >
        TradeRadar usage
      </h3>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          flexWrap: 'wrap',
        }}
      >
        <button
          type="button"
          onClick={() => {
            setSnap(moexChart?.getSnapshot());
          }}
        >
          Сохранить стейт
        </button>

        <button
          type="button"
          onClick={() => {
            if (snap) {
              moexChart?.setSnapshot(snap);
            }
          }}
        >
          Применить стейт
        </button>
      </div>

      <div
        style={{
          width: '100%',
          minWidth: 0,
          minHeight: 0,
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        <div
          ref={containerRef}
          style={{
            width: '100%',
            height: '100%',
            minWidth: 0,
            minHeight: 0,
            position: 'relative',
          }}
        />
      </div>

      {isCompareOpen &&
        createPortal(
          <Modal
            onClose={() => setIsCompareOpen(false)}
            compareManager={moexChart?.getCompareManager() ?? null}
          />,
          document.body,
        )}
    </div>
  );
};