import React from 'react';
import { Box, Input, Typography, CssGrid as Grid } from '../..';
import ControlsListItem from './ControlsListItem';
var GRID = {
  areas: [['icon', 'label', 'button'], ['.', 'description', 'description']],
  templateColumns: ['auto', '1fr', '1fr'],
  templateRows: ['auto', '1fr'],
  gutter: {
    row: 1,
    col: 2
  }
};
var ControlsListItemRadio = function ControlsListItemRadio(_ref) {
  var checked = _ref.checked,
    description = _ref.description,
    Icon = _ref.Icon,
    label = _ref.label,
    name = _ref.name,
    onChange = _ref.onChange,
    value = _ref.value,
    addon = _ref.addon,
    disabled = _ref.disabled;
  var hasAddon = React.isValidElement(addon);
  return React.createElement(ControlsListItem, {
    disabled: disabled
  }, React.createElement(Grid.Container, GRID, React.createElement(Grid.Item, {
    area: "icon",
    justify: "start",
    align: "center"
  }, React.createElement(React.Fragment, null, Icon)), React.createElement(Grid.Item, {
    area: "label",
    justify: "start",
    align: "center"
  }, React.createElement(Typography, {
    type: "secondary",
    weight: "bold"
  }, label)), React.createElement(Grid.Item, {
    area: "button",
    justify: "end",
    align: "center"
  }, React.createElement(Input.Radio, {
    name: name,
    value: value,
    label: label,
    checked: checked,
    onChange: onChange,
    hideLabel: true,
    disabled: disabled
  })), React.createElement(Grid.Item, {
    area: "description"
  }, description && React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return t.color.label;
    }
  }, description), hasAddon && React.createElement(Box, {
    pt: 2
  }, addon))));
};
export default ControlsListItemRadio;