---

import { CompareMode } from 'moex-chart';
import React, { useEffect, useState } from 'react';

import { InstrumentSearch } from '@components/InstrumentSearch';
import { Contract } from '@modules/contracts';

import type { __CompareManager__ } from 'moex-chart';
import type { MutableRefObject } from 'react';

interface CompareModalProps {
  widgetId: number;
  compareManager: MutableRefObject<__CompareManager__ | null>;
  isOpen: boolean;
  setOpen: (isOpen: boolean) => void;
}

export const CompareModal = ({ compareManager, widgetId, isOpen, setOpen }: CompareModalProps): React.ReactElement => {
  const [isNewScaleDisabled, setIsNewScaleDisabled] = useState(false);

  useEffect(() => {
    const manager = compareManager.current;

    if (!isOpen || !manager) {
      setIsNewScaleDisabled(false);
      return;
    }

    setIsNewScaleDisabled(manager.isNewScaleDisabled());

    const subscription = manager.isNewScaleDisabledObservable().subscribe(setIsNewScaleDisabled);

    return () => subscription.unsubscribe();
  }, [compareManager, isOpen]);

  const setCompareMode = (instrument: Contract, mode: CompareMode): void => {
    if (!instrument.issKey) {
      return;
    }

    compareManager.current?.setSymbolMode(
      'Line',
      {
        symbolId: instrument.issKey,
        symbol: instrument.symbol,
        symbolName: instrument.displayName,
      },
      mode,
    );
  };

  const handleAbsolute = (instrument: Contract): void => {
    setCompareMode(instrument, CompareMode.Absolute);
  };

  const handlePercent = (instrument: Contract): void => {
    setCompareMode(instrument, CompareMode.Percentage);
  };

  const handleNewScale = (instrument: Contract): void => {
    setCompareMode(instrument, CompareMode.NewScale);
  };

  const handleNewPanel = (instrument: Contract): void => {
    setCompareMode(instrument, CompareMode.NewPane);
  };

  return (
    <InstrumentSearch
      setOpen={setOpen}
      isOpen={isOpen}
      variant="single"
      widgetId={widgetId}
      // withNRD={false}
      // Временный костыль, пока не завезем свой поиск интструментов
      addInstruments={() => {
        // nothing
      }}
      isNewScaleDisabled={isNewScaleDisabled}
      customActionsFooterHandlers={{
        handleAbsolute,
        handlePercent,
        handleNewScale,
        handleNewPanel,
      }}
    />
  );
};




customActionsFooterHandlers?: {
  handleAbsolute: (instrument: Contract) => void;
  handlePercent: (instrument: Contract) => void;
  handleNewScale: (instrument: Contract) => void;
  handleNewPanel: (instrument: Contract) => void;
};





import React from 'react';

import { Contract } from '@modules/contracts';
import { Button } from '@uikit/Button';

import styles from './styles.module.scss';

type TMoexChartActionsProps = {
  selectedInstrumentRows: Contract[];
  isNewScaleDisabled?: boolean;
  customActionsFooterHandlers: {
    handleAbsolute: (instrument: Contract) => void;
    handlePercent: (instrument: Contract) => void;
    handleNewScale: (instrument: Contract) => void;
    handleNewPanel: (instrument: Contract) => void;
  };
};

export const MoexChartActions = ({
  selectedInstrumentRows,
  isNewScaleDisabled = false,
  customActionsFooterHandlers,
}: TMoexChartActionsProps) => {
  const { handleAbsolute, handlePercent, handleNewScale, handleNewPanel } = customActionsFooterHandlers;

  const selectedInstrument = selectedInstrumentRows[0];
  const isButtonDisabled = !selectedInstrument?.issKey;

  return (
    <div className={styles.actionWrapper}>
      <Button
        text="Абсолютная шкала"
        onClick={() => {
          if (selectedInstrument?.issKey) {
            handleAbsolute(selectedInstrument);
          }
        }}
        disabled={isButtonDisabled}
        variant="outlined-secondary"
      />
      <Button
        text="%"
        onClick={() => {
          if (selectedInstrument?.issKey) {
            handlePercent(selectedInstrument);
          }
        }}
        disabled={isButtonDisabled}
        variant="outlined-secondary"
      />
      <Button
        text="Новая шкала"
        onClick={() => {
          if (selectedInstrument?.issKey) {
            handleNewScale(selectedInstrument);
          }
        }}
        disabled={isButtonDisabled || isNewScaleDisabled}
        variant="outlined-secondary"
      />
      <Button
        text="Новая панель"
        onClick={() => {
          if (selectedInstrument?.issKey) {
            handleNewPanel(selectedInstrument);
          }
        }}
        disabled={isButtonDisabled}
        variant="outlined-secondary"
      />
    </div>
  );
};