"use strict";

exports.__esModule = true;
exports.default = DefaultLegendItem;

var _react = _interopRequireDefault(require("react"));

var _legend = require("@vx/legend");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

function DefaultLegendItem({
  item,
  MarkRenderer,
  LabelRenderer
}) {
  return _react.default.createElement(_legend.LegendItem, {
    key: "legend-item-" + item.field + "-" + item.value,
    margin: "0 5px"
  }, typeof MarkRenderer === 'undefined' ? _react.default.createElement("svg", {
    width: MARK_SIZE,
    height: MARK_SIZE,
    style: MARK_STYLE
  }, _react.default.createElement("circle", {
    fill: // @ts-ignore
    item.encodedValues.color || // @ts-ignore
    item.encodedValues.stroke || // @ts-ignore
    item.encodedValues.fill || '#ccc',
    stroke: // @ts-ignore
    item.encodedValues.stroke || 'none',
    r: MARK_SIZE / 2,
    cx: MARK_SIZE / 2,
    cy: MARK_SIZE / 2
  })) : _react.default.createElement(MarkRenderer, {
    item: item
  }), typeof LabelRenderer === 'undefined' ? _react.default.createElement(_legend.LegendLabel, {
    align: "left",
    margin: "0 0 0 4px"
  }, item.value) : _react.default.createElement(LabelRenderer, {
    item: item
  }));
}