import React__default from 'react';
import urlFor from './urlFor.js';
import { m as main_43 } from './main-f97773b2.js';
import Carousel from 'react-bootstrap/Carousel';
import './slicedToArray-6ebcbfea.js';
import './_commonjsHelpers-0c4b6f40.js';
import './web.dom.iterable-ab4dea5c.js';
import './core.get-iterator-method-ea258bb1.js';
import './index-3f5c03b2.js';

//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 = 900;
  if (main_43) {
    imageWidth = 225;
  }

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

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

  var openLink = function openLink(feature_link) {
    if (checkUrlIsExternal(feature_link)) {
      window.open(feature_link, '_blank');
    } else {
      window.open(feature_link);
    }
  };

  return React__default.createElement(
    'div',
    null,
    React__default.createElement(
      Carousel,
      { 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.createElement(
          Carousel.Item,
          { key: index, style: { background: 'var(--primary)' }, onClick: function onClick() {
              return openLink(feature_link);
            } },
          React__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.createElement(
            Carousel.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)
          )
        );
      })
    )
  );
};

export { Feature as default };
