import React from 'react';
import { TooltipFrame, TooltipTable } from '@superset-ui/core';
import { chartTheme } from '@data-ui/theme';
import { TooltipProps } from './Line';

const MARK_STYLE = { marginRight: 4 };

export default function DefaultTooltipRenderer({
  allSeries,
  datum,
  encoder,
  series = {},
  theme = chartTheme,
}: TooltipProps) {
  return (
    <TooltipFrame>
      <>
        <div style={{ fontFamily: theme.labelStyles.fontFamily }}>
          <strong>{encoder.channels.x.formatValue(datum.x)}</strong>
        </div>
        <br />
        {series && (
          <TooltipTable
            data={allSeries
              .filter(({ key }) => series[key])
              .concat()
              .sort((a, b) => series[b.key].y - series[a.key].y)
              .map(({ key, stroke, strokeDasharray, strokeWidth }) => ({
                key,
                keyColumn: (
                  <>
                    <svg width="12" height="8" style={MARK_STYLE}>
                      <line
                        x2="12"
                        y1="3"
                        y2="3"
                        stroke={stroke}
                        strokeWidth={strokeWidth}
                        strokeDasharray={strokeDasharray}
                      />
                    </svg>
                    {series[key] === datum ? <b>{key}</b> : key}
                  </>
                ),
                valueColumn: encoder.channels.y.formatValue(series[key].y),
              }))}
          />
        )}
      </>
    </TooltipFrame>
  );
}