---

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 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={{
        handlePercent,
        handleNewScale,
        handleNewPanel,
      }}
    />
  );
};



import React, { FC } from 'react';

import { ActionsButtons, Filters, SearchInput, SearchTable, Wrapper } from './components';
import { MoexChartActions } from './components/Actions/MoexChartActions';
import { useData } from './hooks';
import { InstrumentSearchType } from './types/hooks';

/** Модальное окно поиска инструментов */
export const InstrumentSearch: FC<InstrumentSearchType> = ({
  variant,
  widgetId,
  setOpen,
  isOpen,
  addInstruments,
  customActionsFooterHandlers,
  isNewScaleDisabled,
}) => {
  const { filters, actions, table } = useData(variant, setOpen, addInstruments);
  const tableProps = { ...table, widgetId };

  return (
    <Wrapper
      setOpen={setOpen}
      isOpen={isOpen}
    >
      <SearchInput {...filters} />
      <Filters {...filters} />
      <SearchTable {...tableProps} />

      {customActionsFooterHandlers ? (
        <MoexChartActions
          selectedInstrumentRows={tableProps.data.selectedInstrumentRows}
          customActionsFooterHandlers={customActionsFooterHandlers}
          isNewScaleDisabled={isNewScaleDisabled}
        />
      ) : (
        <ActionsButtons {...actions} />
      )}
    </Wrapper>
  );
};


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: {
    handlePercent: (instrument: Contract) => void;
    handleNewScale: (instrument: Contract) => void;
    handleNewPanel: (instrument: Contract) => void;
  };
};

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

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

  return (
    <div className={styles.actionWrapper}>
      <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>
  );
};