---

import { Button } from 'exchange-elements/v2';
import React from 'react';

import { Observable } from 'rxjs';

import { TrashIcon } from '@components/Icon';
import { LegendModel, ohlcValuesToShowForMainSerie } from '@core/Legend';

import { OHLCConfig } from '../../types';
import { useObservable } from '../../utils';
import { formatToString } from '@src/utils/formatter';

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

export interface LegendProps {
  ohlcConfig?: OHLCConfig;
  viewModel: Observable<LegendModel>;
}

const mainSerieKeys = new Set(ohlcValuesToShowForMainSerie);

function getEntries(values: LegendModel[number]['values']) {
  return values instanceof Map ? Array.from(values.entries()) : Object.entries(values);
}

export const LegendComponent: React.FC<LegendProps> = ({ ohlcConfig, viewModel }) => {
  const model = useObservable(viewModel);
  const showMainSerieValues = Boolean(ohlcConfig?.show);

  return (
    <section className={styles.legend}>
      {model?.map((item) => (
        <div
          key={`legend-${item.name}`}
          className={styles.row}
        >
          <div className={styles.symbol}>{item.name}</div>

          {getEntries(item.values).map(([key, value], index) => {
            if (!item.isIndicator && (!showMainSerieValues || !mainSerieKeys.has(key))) {
              return null;
            }

            const text = formatToString(value.value);

            if (!text) {
              return null;
            }

            return (
              <div
                key={`${item.name}-${key}-${index}`}
                className={styles.item}
              >
                {value.name && <span>{value.name}</span>}
                <span style={{ color: value.color }}>{text}</span>
              </div>
            );
          })}

          {item.remove && (
            <Button
              size="sm"
              className={styles.button}
              onClick={item.remove}
              label={<TrashIcon />}
            />
          )}
        </div>
      ))}
    </section>
  );
};