import React, { useState } from 'react';
import { Wrapper, Item, SecondaryItem } from './radioButtonsExpandable.styles';
import { DownOutlined } from '@ant-design/icons';

const RadioButtonsExpandable = ({
  value,
  options,
  onChange
}) => {
  const [expanded, setExpanded] = useState(new Set([]));

  const handleClickExpand = idx => {
    const updated = new Set(expanded);
    expanded.has(idx) ? updated.delete(idx) : updated.add(idx);
    setExpanded(updated);
  };

  return /*#__PURE__*/React.createElement(Wrapper, null, options.map(({
    img,
    label,
    data,
    value: val
  }, i) => /*#__PURE__*/React.createElement(Item, {
    img: img,
    key: i,
    selected: value === val,
    expanded: expanded.has(i)
  }, /*#__PURE__*/React.createElement("div", {
    onClick: () => onChange(val)
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, img && /*#__PURE__*/React.createElement("img", {
    src: img,
    alt: label
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, label)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    onClick: e => {
      e.stopPropagation();
      handleClickExpand(i);
    }
  }, /*#__PURE__*/React.createElement(DownOutlined, null)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, Object.entries(data).map(([key, info], j) => /*#__PURE__*/React.createElement(SecondaryItem, {
    key: j
  }, /*#__PURE__*/React.createElement("div", null, key), /*#__PURE__*/React.createElement("div", null, info))))))));
};

export default RadioButtonsExpandable;