---

import React from 'react';

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

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

type TMoexChartActionsProps = {
  selectedInstrumentRows: [] | Contract[];
  customActionsFooterHandlers: {
    handlePercent: (symbol: string) => void;
    handleNewScale: (symbol: string) => void;
    handleNewPanel: (symbol: string) => void;
  };
};

export const MoexChartActions = ({ selectedInstrumentRows, customActionsFooterHandlers }: TMoexChartActionsProps) => {
  const { handlePercent, handleNewScale, handleNewPanel } = customActionsFooterHandlers;
  const isButtonDisabled = !selectedInstrumentRows.length;

  return (
    <div className={styles.actionWrapper}>
      <Button
        text="%"
        onClick={() => {
          if (selectedInstrumentRows[0].issKey) {
            handlePercent(selectedInstrumentRows[0].issKey);
          }
        }}
        disabled={isButtonDisabled}
        variant="outlined-secondary"
      />
      <Button
        text="Новая шкала"
        onClick={() => {
          if (selectedInstrumentRows[0].issKey) {
            handleNewScale(selectedInstrumentRows[0].issKey);
          }
        }}
        disabled={isButtonDisabled}
        variant="outlined-secondary"
      />
      <Button
        text="Новая панель"
        onClick={() => {
          if (selectedInstrumentRows[0].issKey) {
            handleNewPanel(selectedInstrumentRows[0].issKey);
          }
        }}
        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,
}) => {
  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}
        />
      ) : (
        <ActionsButtons {...actions} />
      )}
    </Wrapper>
  );
};




// eslint-disable-next-line import/no-unresolved -- MOEX_CHART
import { CompareManager } from 'moex-chart/dist/types/core/CompareManager';
import React, { MutableRefObject } from 'react';

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

/**
 * @deprecated
 *
 * TODO: удалить это, когда moex-chart добавит экспорт у себя.
 */
enum CompareMode {
  Percentage = 'PCT',
  NewScale = 'SCALE',
  NewPane = 'PANE',
}

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

  isOpen: boolean;
  setOpen: (isOpen: boolean) => void;
}) => {
  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);
  };

  console.log('render');

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