'use strict';

var _extends = require('./extends-7c86182f.js');
var React = require('react');
var BlockContent = require('./BlockContent-96b44364.js');
var Container = require('react-bootstrap/Container');
var Row = require('react-bootstrap/Row');
var Col = require('react-bootstrap/Col');
var Card = require('react-bootstrap/Card');
var urlFor = require('./urlFor.js');
var index = require('./index-65621b6c.js');
var reactSocialIcons = require('./react-social-icons-2c5c389a.js');
var checkSisterSite = require('./checkSisterSite-c3a4ac98.js');
require('./_commonjsHelpers-06173234.js');
require('./core.get-iterator-method-5643aa10.js');
require('./_object-pie-083f2dd6.js');
require('prop-types');
require('./index-d48b231c.js');
require('./slicedToArray-067dd3bc.js');
require('./web.dom.iterable-d98303e0.js');
require('react-dom');

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 TaxonomyCard = function TaxonomyCard(props) {
  // setting default value for imageHeight
  var columns = props.columns,
      variant = props.variant,
      _props$icon = props.icon,
      icon = _props$icon === undefined ? false : _props$icon,
      data = props.dataRecord,
      defaultImage = props.defaultImage,
      client = props.client,
      _props$imageHeight = props.imageHeight,
      imageHeight = _props$imageHeight === undefined ? 270 : _props$imageHeight,
      _props$imageWidth = props.imageWidth,
      imageWidth = _props$imageWidth === undefined ? null : _props$imageWidth,
      _props$imageFit = props.imageFit,
      imageFit = _props$imageFit === undefined ? null : _props$imageFit,
      getSerializers = props.getSerializers;


  var renderCardImage = function renderCardImage(row) {
    var url = urlFor({ client: client, source: row.thumbnail, imageHeight: imageHeight, imageWidth: imageWidth, imageFit: imageFit });
    return url;
  };

  var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';

  var itemCounter = 0;
  var lgVar = 12;

  return React__default["default"].createElement(
    'div',
    { className: 'contentDeck' },
    React__default["default"].createElement(
      Container__default["default"],
      null,
      React__default["default"].createElement(
        Row__default["default"],
        null,
        data && data.map(function (row, index$1) {
          if (columns === 'rotate' && itemCounter % 3 === 0) {
            lgVar = 12;
          } else if (columns && columns !== 'rotate') {
            lgVar = Math.floor(12 / columns);
          } else {
            lgVar = 6;
          }
          var thumbnailURL = row.thumbnail && row.thumbnail.asset ? renderCardImage(row) : defaultImage;
          var address1 = row.address1,
              address2 = row.address2,
              city = row.city,
              zip = row.zip,
              state = row.state,
              country = row.country,
              company = row.company,
              website = row.website,
              email = row.email,
              extraURL1 = row.extraURL1,
              extraURL2 = row.extraURL2,
              extraURL3 = row.extraURL3,
              extraURL4 = row.extraURL4,
              linkedIn = row.linkedIn,
              twitter = row.twitter,
              facebook = row.facebook,
              instagram = row.instagram;

          var socialLinks = [linkedIn, twitter, facebook, instagram];
          var address = [address1, address2, city, state, zip, country];
          var companyDetails = [];
          company && companyDetails.push({ key: 'company', value: company });
          website && companyDetails.push({ key: 'url', value: website });
          email && companyDetails.push({ key: 'email', value: email });
          extraURL1 && companyDetails.push({ key: 'url', value: extraURL1 });
          extraURL2 && companyDetails.push({ key: 'url', value: extraURL2 });
          extraURL3 && companyDetails.push({ key: 'url', value: extraURL3 });
          extraURL4 && companyDetails.push({ key: 'url', value: extraURL4 });
          return React__default["default"].createElement(
            Col__default["default"],
            { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
            React__default["default"].createElement(
              Card__default["default"],
              { className: 'taxonomy-card', style: { flexDirection: mode, position: 'relative', overflow: 'hidden' } },
              React__default["default"].createElement(
                Card__default["default"].Body,
                null,
                React__default["default"].createElement(
                  Row__default["default"],
                  null,
                  thumbnailURL && React__default["default"].createElement(
                    Col__default["default"],
                    null,
                    React__default["default"].createElement(
                      index.LazyLoad,
                      { height: imageHeight },
                      row && row.thumbnail && React__default["default"].createElement(
                        'figure',
                        null,
                        row.thumbnail.link ? React__default["default"].createElement(
                          'a',
                          {
                            href: row.thumbnail.link,
                            target: row.thumbnail.blank ? '_blank' : '_self',
                            rel: checkSisterSite.checkSisterSite(row.thumbnail.link) ? '' : 'noopener noreferrer' },
                          React__default["default"].createElement(Card__default["default"].Img, { variant: 'top', src: thumbnailURL, alt: row.thumbnail.alt ? row.thumbnail.alt : 'profile image' })
                        ) : React__default["default"].createElement(Card__default["default"].Img, { variant: 'top', src: thumbnailURL, alt: row.thumbnail.alt ? row.thumbnail.alt : 'profile image' }),
                        row && row.thumbnail && row.thumbnail.caption && React__default["default"].createElement(
                          'figcaption',
                          null,
                          row.thumbnail.caption
                        )
                      )
                    )
                  ),
                  React__default["default"].createElement(
                    Col__default["default"],
                    null,
                    React__default["default"].createElement(
                      Row__default["default"],
                      { className: 'details-content-wrapper' },
                      React__default["default"].createElement(
                        'div',
                        { className: 'details-content-inner-wrapper' },
                        (address && address.length > 0 || companyDetails && companyDetails.length > 0) && React__default["default"].createElement(
                          'div',
                          { className: 'details-wrapper' },
                          companyDetails && companyDetails.length > 0 && React__default["default"].createElement(
                            'div',
                            { className: 'company-wrapper' },
                            companyDetails.map(function (field, index) {
                              if (field.value && field.key === 'company') {
                                return React__default["default"].createElement(
                                  'p',
                                  { className: 'details-field', key: index },
                                  field.value
                                );
                              } else if (field.value && field.key === 'url') {
                                return React__default["default"].createElement(
                                  'a',
                                  { className: 'details-field', href: field.value, key: index, rel: checkSisterSite.checkSisterSite(field.value) ? '' : 'noopener noreferrer' },
                                  field.value
                                );
                              }
                              // else if (field.value && field.key === 'email') {
                              //   return (
                              //     <a className='details-field' href={`mailto:${field.value}`} key={index}>
                              //       {field.value}
                              //     </a>
                              //   )
                              // }
                            })
                          ),
                          address && address.length > 0 && React__default["default"].createElement(
                            'div',
                            { className: 'address-wrapper' },
                            address.map(function (field, index) {
                              if (field) {
                                return React__default["default"].createElement(
                                  'p',
                                  { className: 'details-field', key: index },
                                  field
                                );
                              }
                            })
                          ),
                          React__default["default"].createElement(
                            'style',
                            { jsx: 'true' },
                            '\n                                    .details-content-wrapper,\n                                    .details-content-inner-wrapper {\n                                      width: 100%;\n                                    }\n                                    .details-wrapper .details-field {\n                                      margin: 0px;\n                                      display: block;\n                                      font-size: 1rem;\n                                      margin-bottom: 3px;\n                                    }\n                                    .details-wrapper .company-wrapper {\n                                      margin-right: 20px;\n                                      display: inline-block;\n                                      width: 50%;\n                                      vertical-align: top;\n                                    }\n                                    .details-wrapper .address-wrapper {\n                                      width: 45%;\n                                      display: inline-block;\n                                    }\n                                  '
                          )
                        ),
                        socialLinks && socialLinks.length && React__default["default"].createElement(
                          'div',
                          { className: 'social-icons' },
                          socialLinks.map(function (url, index) {
                            if (url && url.length) {
                              return React__default["default"].createElement(reactSocialIcons.reactSocialIcons_1, {
                                target: '_blank',
                                rel: checkSisterSite.checkSisterSite(url) ? '' : 'noopener noreferrer',
                                key: index,
                                index: index,
                                url: url,
                                style: { width: 30, height: 30, marginRight: 10 }
                              });
                            }
                          }),
                          React__default["default"].createElement(
                            'style',
                            { jsx: 'true' },
                            '\n                                    .social-icons {\n                                      margin-top: 0px;\n                                      margin-bottom: 10px;\n                                    }\n                                  '
                          )
                        ),
                        React__default["default"].createElement(
                          Card__default["default"].Text,
                          null,
                          React__default["default"].createElement(BlockContent.BlockContent, _extends._extends({ blocks: row.summary, serializers: getSerializers }, client.config()))
                        )
                      )
                    )
                  )
                ),
                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:hover .taxonomy-icon {\n            transform: translateY(-50%) scale(1.5) translateX(0) !important;\n          }\n        '
    )
  );
};

module.exports = TaxonomyCard;
