import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import * as React from 'react';
import Logo from '../../../logo/Logo';
import Text from '../../../text/Text';
import Flex from '../../../flex/Flex';
import Icon from '../../../icons/Icon';
import Headline from '../../../text/Headline';
import useRadioContext from '../useRadioContext';
import Radio from '../Radio';
var LOGO = {
  plus: 'brainly-plus',
  tutor: 'brainly-tutoring'
};

var CustomRadioComponent = function CustomRadioComponent(_ref) {
  var value = _ref.value,
      type = _ref.type,
      benefits = _ref.benefits;

  var _useRadioContext = useRadioContext(),
      selectedValue = _useRadioContext.selectedValue,
      setSelectedValue = _useRadioContext.setSelectedValue,
      lastFocusedValue = _useRadioContext.lastFocusedValue;

  var labelId = "label-".concat(value);
  var descriptionId = "description-".concat(value);
  var title = benefits.title,
      items = benefits.items;

  var Benefit = function Benefit(_ref2) {
    var item = _ref2.item;
    return /*#__PURE__*/React.createElement(Flex, {
      marginBottom: "m",
      as: "li"
    }, /*#__PURE__*/React.createElement(Flex, {
      alignItems: "center",
      justifyContent: "center"
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "check",
      color: "icon-gray-70",
      size: 16,
      style: {
        marginRight: '8px'
      }
    }), /*#__PURE__*/React.createElement(Text, {
      size: "medium"
    }, item)));
  };

  var borderColor = lastFocusedValue === value ? 'var(--blue-40)' : value === selectedValue ? 'var(--black)' : 'var(--gray-30)';
  return /*#__PURE__*/React.createElement("div", {
    onClick: function onClick(e) {
      setSelectedValue(e, value);
    },
    style: {
      width: '50%',
      position: 'relative',
      border: '2px solid black',
      borderColor: borderColor,
      borderRadius: '8px',
      padding: '24px',
      marginRight: '10px'
    }
  }, /*#__PURE__*/React.createElement(Radio, {
    value: value,
    "aria-labelledby": labelId,
    "aria-describedby": descriptionId,
    style: {
      position: 'absolute',
      top: '0',
      right: '0',
      '--radioColor': value === selectedValue ? 'var(--black)' : 'var(--gray-30)'
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Logo, {
    type: LOGO[type],
    style: {
      width: '42px',
      height: 'auto'
    }
  }), /*#__PURE__*/React.createElement(Text, {
    id: labelId,
    as: "label",
    weight: "bold",
    transform: "capitalize",
    style: {
      marginLeft: '8px'
    }
  }, "Brainly ", value)), /*#__PURE__*/React.createElement(Flex, {
    as: "ul",
    direction: "column",
    alignItems: "flex-start",
    style: {
      padding: '0'
    }
  }, /*#__PURE__*/React.createElement(Headline, {
    align: "to-left",
    extraBold: true,
    style: {
      marginBottom: '16px'
    }
  }, title), _toConsumableArray(items).map(function (item, index) {
    return /*#__PURE__*/React.createElement(Benefit, {
      key: index,
      item: item
    });
  })));
};

export { CustomRadioComponent };