---

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: (symbol: string) => void;
    handleNewScale: (symbol: string) => void;
    handleNewPanel: (symbol: string) => void;
  };
};

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

  const selectedSymbol = selectedInstrumentRows[0].issKey;
  const isButtonDisabled = !selectedSymbol;

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



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 { __CompareManager__, CompareMode } from 'moex-chart';
import React, { MutableRefObject, useEffect, useState } from 'react';

import { InstrumentSearch } from '@components/InstrumentSearch';

export const CompareModal = ({
  compareManager,
  widgetId,
  isOpen,
  setOpen,
}: {
  onClose: () => void;
  widgetId: number;
  compareManager: MutableRefObject<__CompareManager__ | null>;

  isOpen: boolean;
  setOpen: (isOpen: boolean) => void;
}) => {
  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 handlePercent = (symbol: string) => {
    compareManager?.current?.setSymbolMode('Line', { symbol }, CompareMode.Percentage);
  };

  const handleNewScale = (symbol: string) => {
    compareManager?.current?.setSymbolMode('Line', symbol, CompareMode.NewScale);
  };

  const handleNewPanel = (symbol: string) => {
    compareManager?.current?.setSymbolMode('Line', symbol, CompareMode.NewPane);
  };

  return (
    <InstrumentSearch
      setOpen={setOpen}
      isOpen={isOpen}
      variant="single"
      widgetId={widgetId}
      // withNRD={false}
      // Временный костыль, пока не завезем свой поиск интструментов
      addInstruments={() => {
        // nothing
      }}
      isNewScaleDisabled={isNewScaleDisabled}
      customActionsFooterHandlers={{
        handlePercent,
        handleNewScale,
        handleNewPanel,
      }}
    />
  );
};
import { __CompareManager__, CompareMode } from 'moex-chart';
import React, { MutableRefObject, useEffect, useState } from 'react';

import { InstrumentSearch } from '@components/InstrumentSearch';

export const CompareModal = ({
  compareManager,
  widgetId,
  isOpen,
  setOpen,
}: {
  onClose: () => void;
  widgetId: number;
  compareManager: MutableRefObject<__CompareManager__ | null>;

  isOpen: boolean;
  setOpen: (isOpen: boolean) => void;
}) => {
  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 handlePercent = (symbol: string) => {
    compareManager?.current?.setSymbolMode('Line', { symbol }, CompareMode.Percentage);
  };

  const handleNewScale = (symbol: string) => {
    compareManager?.current?.setSymbolMode('Line', symbol, CompareMode.NewScale);
  };

  const handleNewPanel = (symbol: string) => {
    compareManager?.current?.setSymbolMode('Line', symbol, CompareMode.NewPane);
  };

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