import React from 'react';
import { i as imageUrlBuilder } from './index-0dbff1d1.js';
import { m as main_43 } from './main-b5c5aac1.js';
import Carousel from 'react-bootstrap/Carousel';
import './_commonjsHelpers-0c4b6f40.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;


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

  var urlFor = function urlFor(source) {
    var client = props.client;

    var builder = imageUrlBuilder(client);
    return builder.image(source).auto('format');
  };
  //image width updated.
  var imageWidth = 450;
  if (main_43) {
    imageWidth = 225;
  }

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

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

  return React.createElement(
    'div',
    null,
    React.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.createElement(
          Carousel.Item,
          { key: index, style: { background: 'var(--primary)' } },
          React.createElement('img', {
            style: { maxHeight: '375px', minHeight: '300px', objectFit: 'cover', paddingLeft: '50%' },
            className: 'd-block w-100',
            src: urlFor(feature_img).width(imageWidth).url(),
            alt: feature_alt
          }),
          React.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 default Feature;
