import React, { CSSProperties, PureComponent } from 'react';
import { EncodingConfig } from 'encodable';
import { LegendRendererProps } from './types';
import DefaultLegendGroup from './DefaultLegendGroup';

const LEGEND_CONTAINER_STYLE: CSSProperties = {
  display: 'flex',
  flexBasis: 'auto',
  flexGrow: 1,
  flexShrink: 1,
  maxHeight: 100,
  overflowY: 'auto',
  position: 'relative',
};

export type Props<Config extends EncodingConfig> = LegendRendererProps<Config>;

export default class DefaultLegend<Config extends EncodingConfig> extends PureComponent<
  Props<Config>
> {
  render() {
    const {
      groups,
      LegendGroupRenderer = DefaultLegendGroup,
      LegendItemRenderer,
      LegendItemMarkRenderer,
      LegendItemLabelRenderer,
      style,
    } = this.props;

    const combinedStyle =
      typeof style === 'undefined'
        ? LEGEND_CONTAINER_STYLE
        : { ...LEGEND_CONTAINER_STYLE, ...style };

    return (
      <div style={combinedStyle}>
        {groups
          .filter(group => 'items' in group && group.items.length > 0)
          .map(group => (
            <LegendGroupRenderer
              key={group.field}
              group={group}
              ItemRenderer={LegendItemRenderer}
              ItemMarkRenderer={LegendItemMarkRenderer}
              ItemLabelRenderer={LegendItemLabelRenderer}
            />
          ))}
      </div>
    );
  }
}