'use strict';

var React = require('react');
var urlFor = require('./urlFor.js');
var main = require('./main-f1c77adb.js');
var Carousel = require('react-bootstrap/Carousel');
require('./slicedToArray-067dd3bc.js');
require('./_commonjsHelpers-06173234.js');
require('./web.dom.iterable-d98303e0.js');
require('./core.get-iterator-method-5643aa10.js');
require('./index-d48b231c.js');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Carousel__default = /*#__PURE__*/_interopDefaultLegacy(Carousel);

//Feature query to be used
// const featureQuery = `*[_type == 'feature' && is_active == true && feature_url == "/"] | order(_updatedAt asc)[0..5]{
//     ...,
//      feature_img { asset-> {url} }
//    }`

//Update*  Added control toggle for features.  Will default to off -
//<Feature controls dataset={props.features} /></div>

var Feature = function Feature(props) {
  var dataset = props.dataset;
  var _props$controls = props.controls,
      controls = _props$controls === undefined ? false : _props$controls,
      client = props.client;


  var checkUrlIsExternal = function checkUrlIsExternal(url) {
    if (/(http|https?)([^\s]+)/g.test(url)) {
      return true;
    }
    return false;
  };

  //image width updated.
  var imageWidth = 450;
  if (main.main_43) {
    imageWidth = 225;
  }

  var renderUrl = function renderUrl(feature_link, feature_title, feature_body) {
    if (checkUrlIsExternal(feature_link)) {
      return React__default['default'].createElement(
        React__default['default'].Fragment,
        null,
        React__default['default'].createElement(
          'a',
          { href: feature_link, target: '_blank' },
          React__default['default'].createElement(
            'h3',
            { style: { color: 'white' } },
            feature_title
          ),
          React__default['default'].createElement(
            'p',
            { style: { color: '#eee' } },
            feature_body
          )
        )
      );
    }

    return React__default['default'].createElement(
      'a',
      { href: feature_link },
      React__default['default'].createElement(
        'h3',
        { style: { color: 'white' } },
        feature_title
      ),
      React__default['default'].createElement(
        'p',
        { style: { color: '#eee' } },
        feature_body
      )
    );
  };

  return React__default['default'].createElement(
    'div',
    null,
    React__default['default'].createElement(
      Carousel__default['default'],
      { touch: true, controls: controls },
      dataset.map(function (feature, index) {
        var feature_title = feature.feature_title,
            feature_body = feature.feature_body,
            feature_img = feature.feature_img,
            feature_alt = feature.feature_alt,
            feature_link = feature.feature_link;

        return React__default['default'].createElement(
          Carousel__default['default'].Item,
          { key: index, style: { background: 'var(--primary)' } },
          React__default['default'].createElement('img', {
            style: { maxHeight: '375px', minHeight: '300px', objectFit: 'cover', paddingLeft: '50%' },
            className: 'd-block w-100',
            src: urlFor({ client: client, source: feature_img, imageWidth: imageWidth }),
            alt: feature_alt
          }),
          React__default['default'].createElement(
            Carousel__default['default'].Caption,
            {
              style: { paddingRight: '50%', left: '3rem', right: '3rem', top: '0', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
            renderUrl(feature_link, feature_title, feature_body)
          )
        );
      })
    )
  );
};

module.exports = Feature;
