---

export interface OHLCConfig {
  show: boolean;
  precision?: number;
}

export interface LegendConfig {
  absoluteChange?: boolean;
  percentageChange?: boolean;
}

export interface TooltipFieldConfig {
  visible?: boolean;
  label?: string;
}

export interface TooltipConfig {
  showTooltip?: boolean;
  time?: TooltipFieldConfig;
  open?: TooltipFieldConfig;
  high?: TooltipFieldConfig;
  low?: TooltipFieldConfig;
  close?: TooltipFieldConfig;
  absoluteChange?: TooltipFieldConfig;
  percentageChange?: TooltipFieldConfig;
  volume?: TooltipFieldConfig;
  value?: TooltipFieldConfig;
}


{((tooltipConfig.high?.visible && entries.high?.value) ||
  (tooltipConfig.low?.visible && entries.low?.value) ||
  (tooltipConfig.absoluteChange?.visible && entries.absoluteChange?.value) ||
  (tooltipConfig.percentageChange?.visible && entries.percentageChange?.value)) && (
  <Divider
    direction="horizontal"
    pt={{ divider: { className: styles.divider } }}
  />
)}

{tooltipConfig.high?.visible &&
  renderRow(`${indicator.id}-high`, tooltipConfig.high.label, entries.high?.value)}

{tooltipConfig.low?.visible &&
  renderRow(`${indicator.id}-low`, tooltipConfig.low.label, entries.low?.value)}

{tooltipConfig.absoluteChange?.visible &&
  renderRow(
    `${indicator.id}-absolute-change`,
    tooltipConfig.absoluteChange.label,
    entries.absoluteChange?.value,
  )}

{tooltipConfig.percentageChange?.visible &&
  renderRow(
    `${indicator.id}-percentage-change`,
    tooltipConfig.percentageChange.label,
    entries.percentageChange?.value,
  )}



tooltipConfig: {
  absoluteChange: {
    visible: true,
    label: 'Абсолютное изменение',
  },
  percentageChange: {
    visible: true,
    label: 'Относительное изменение',
  },
}



const mainSerieKeys = new Set(ohlcValuesToShowForMainSerie);

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

  const shouldShowMainSerieValue = (key: string) => {
    if (mainSerieKeys.has(key)) {
      return showMainSerieValues;
    }

    if (key === 'absoluteChange') {
      return Boolean(changeConfig?.absoluteChange);
    }

    if (key === 'percentageChange') {
      return Boolean(changeConfig?.percentageChange);
    }

    return false;
  };

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

          {getEntries(item.values).map(([key, value]) => {
            if (!item.isIndicator && !shouldShowMainSerieValue(key)) {
              return null;
            }

            if (!value) {
              return null;
            }

            const text = formatDisplayText(value.value);

            if (!text) {
              return null;
            }

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

          {item.settings && (
            <Button
              size="sm"
              className={styles.button}
              onClick={item.settings}
              label={<GearIcon />}
            />
          )}

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