---

import { SyntheticEvent } from 'react';
import classNames from 'classnames';
import { Button } from 'exchange-elements/v2';

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

interface PriceScaleControlsProps {
  isAutoScale: boolean;
  isLogarithmic: boolean;
  onAutoScale: () => void;
  onToggleLogarithmic: () => void;
  onRefresh: () => void;
}

export function PriceScaleControls({
  isAutoScale,
  isLogarithmic,
  onAutoScale,
  onToggleLogarithmic,
  onRefresh,
}: PriceScaleControlsProps) {
  const stopPropagation = (event: SyntheticEvent) => {
    event.stopPropagation();
  };

  return (
    <section
      className={classNames(styles.root, 'moex-price-scale-controls-content')}
      onMouseEnter={onRefresh}
      onFocus={onRefresh}
      onPointerDown={stopPropagation}
      onMouseDown={stopPropagation}
      onClick={stopPropagation}
    >
      <Button
        size="sm"
        className={classNames(styles.button, {
          [styles.button_active]: isAutoScale,
        })}
        onClick={onAutoScale}
        label="A"
      />

      <Button
        size="sm"
        className={classNames(styles.button, {
          [styles.button_active]: isLogarithmic,
        })}
        onClick={onToggleLogarithmic}
        label="L"
      />
    </section>
  );
}



.root {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0250);
  pointer-events: none;
}

.button {
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-0250);
  pointer-events: auto;
}

.button_active {
  font-weight: 600;
}