import React, { CSSProperties } from 'react';
import { EncodingConfig } from 'encodable';
import { LegendGroupRendererProps } from './types';
import DefaultLegendItem from './DefaultLegendItem';

const LEGEND_GROUP_STYLE: CSSProperties = {
  display: 'flex',
  flexBasis: 'auto',
  flexDirection: 'row',
  flexGrow: 1,
  flexShrink: 1,
  flexWrap: 'wrap',
  fontSize: '0.8em',
  justifyContent: 'flex-end',
  padding: 8,
};

export default function DefaultLegendGroupRenderer<Config extends EncodingConfig>({
  group,
  ItemRenderer = DefaultLegendItem,
  ItemMarkRenderer,
  ItemLabelRenderer,
  style,
}: LegendGroupRendererProps<Config>) {
  const combinedStyle =
    typeof style === 'undefined' ? LEGEND_GROUP_STYLE : { ...LEGEND_GROUP_STYLE, ...style };

  return (
    <div style={combinedStyle}>
      {'items' in group &&
        group.items.map(item => (
          <ItemRenderer
            key={`legend-item-${group.field}-${item.input}`}
            group={group}
            item={item}
            MarkRenderer={ItemMarkRenderer}
            LabelRenderer={ItemLabelRenderer}
          />
        ))}
    </div>
  );
}