'use strict';

var React = require('react');
var Container = require('react-bootstrap/Container');
var Row = require('react-bootstrap/Row');
var Col = require('react-bootstrap/Col');
var Card = require('react-bootstrap/Card');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
var Row__default = /*#__PURE__*/_interopDefaultLegacy(Row);
var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);

var RolesDeck = function RolesDeck(props) {
  var _props$icon = props.icon,
      icon = _props$icon === undefined ? false : _props$icon,
      data = props.dataRecord;

  //   Sample
  //   <RolesDeck
  //        icon - flag to show/hide the arrow icon.
  //        dataRecord - data record to be shown in card.
  //   />

  return React__default['default'].createElement(
    'div',
    { className: 'rolesDeck' },
    React__default['default'].createElement(
      Container__default['default'],
      null,
      React__default['default'].createElement(
        Row__default['default'],
        null,
        data && data.map(function (row, index) {
          if (row && row.url && row.name) {
            return React__default['default'].createElement(
              Col__default['default'],
              { key: index, md: 12, lg: 6, counter: index++, style: { display: 'flex', flex: '1 0 auto' } },
              React__default['default'].createElement(
                Card__default['default'],
                { className: 'taxonomy-card', style: { position: 'relative', overflow: 'hidden', borderBottom: '3px solid var(--primary)' } },
                React__default['default'].createElement(
                  Card__default['default'].Link,
                  { href: row.url },
                  React__default['default'].createElement(
                    Card__default['default'].Body,
                    null,
                    React__default['default'].createElement(
                      Row__default['default'],
                      null,
                      React__default['default'].createElement(
                        Col__default['default'],
                        { className: 'details-content-wrapper' },
                        React__default['default'].createElement(
                          'div',
                          { className: 'details-wrapper' },
                          row.name
                        )
                      )
                    ),
                    icon && React__default['default'].createElement(
                      'span',
                      {
                        className: 'taxonomy-icon',
                        style: {
                          position: 'absolute',
                          right: '20px',
                          top: '50%',
                          transform: 'translateY(-50%) translateX(50px)',
                          transition: 'all .25s',
                          pointerEvents: 'none'
                        } },
                      '\u2192'
                    )
                  )
                )
              )
            );
          }
        })
      )
    ),
    icon && React__default['default'].createElement(
      'style',
      { jsx: 'true' },
      '\n          .taxonomy-card .taxonomy-icon {\n            transform: translateY(-50%) translateX(10px) !important;\n          }\n          .taxonomy-card.card:hover .taxonomy-icon {\n            transform: translateY(-50%) translateX(5px) scale(1.25) rotate(-180deg) !important;\n          }\n        '
    )
  );
};

module.exports = RolesDeck;
