import React, { CSSProperties } from 'react';
import { LegendItem, LegendLabel } from '@vx/legend';
import { EncodingConfig } from 'encodable';
import { LegendItemRendererProps } from './types';

const MARK_SIZE = 8;

const MARK_STYLE: CSSProperties = { display: 'inline-block' };

export default function DefaultLegendItem<Config extends EncodingConfig>({
  group,
  item,
  MarkRenderer,
  LabelRenderer,
}: LegendItemRendererProps<Config>) {
  return (
    <LegendItem key={`legend-item-${group.field}-${item.input}`} margin="0 5px">
      {typeof MarkRenderer === 'undefined' ? (
        <svg width={MARK_SIZE} height={MARK_SIZE} style={MARK_STYLE}>
          <circle
            fill={
              // @ts-ignore
              (item.output.color ??
                // @ts-ignore
                item.output.fill ??
                // @ts-ignore
                item.output.stroke ??
                '#ccc') as string
            }
            stroke={
              // @ts-ignore
              (item.output.stroke ?? 'none') as string
            }
            r={MARK_SIZE / 2}
            cx={MARK_SIZE / 2}
            cy={MARK_SIZE / 2}
          />
        </svg>
      ) : (
        <MarkRenderer group={group} item={item} />
      )}
      {typeof LabelRenderer === 'undefined' ? (
        <LegendLabel align="left" margin="0 0 0 4px">
          {item.input}
        </LegendLabel>
      ) : (
        <LabelRenderer group={group} item={item} />
      )}
    </LegendItem>
  );
}