---

import { useEffect, useState } from 'react';
import { Button } from 'exchange-elements/v2';
import { PriceScaleMode } from 'lightweight-charts';
import type { Observable } from 'rxjs';

import type { PriceScaleTarget } from '@src/core/PriceScale';

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

interface PriceScaleControlsProps {
  target: PriceScaleTarget;
  getMode: (target: PriceScaleTarget) => PriceScaleMode;
  toggleMode: (target: PriceScaleTarget, mode: PriceScaleMode) => void;
  modeChanges$: Observable<void>;
}

export function PriceScaleControls({ target, getMode, toggleMode, modeChanges$ }: PriceScaleControlsProps) {
  const [mode, setMode] = useState(() => getMode(target));

  useEffect(() => {
    setMode(getMode(target));

    const subscription = modeChanges$.subscribe(() => {
      setMode(getMode(target));
    });

    return () => subscription.unsubscribe();
  }, [getMode, modeChanges$, target]);

  const isLogarithmic = mode === PriceScaleMode.Logarithmic;

  const handleToggleLogarithmic = () => {
    toggleMode(target, PriceScaleMode.Logarithmic);
    setMode(getMode(target));
  };

  return (
    <div className={styles.root}>
      <Button
        size="sm"
        className={`${styles.button} ${isLogarithmic ? styles.button_active : ''}`}
        onClick={handleToggleLogarithmic}
        label="Log"
      />
    </div>
  );
}




.root {
  display: flex;
  align-items: center;
  gap: var(--space-0250);
}

.button {
  min-width: 38px;
  height: 24px;
  padding: 0 var(--space-0500);
}

.button_active {
  font-weight: 600;
}