import { _ as _extends } from './extends-60e0e1c6.js';
import React from 'react';
import { B as BlockContent } from './BlockContent-52cf21c5.js';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';
import { i as imageUrlBuilder } from './index-0dbff1d1.js';
import { L as LazyLoad } from './index-35bdcc81.js';
import { r as reactSocialIcons_1 } from './react-social-icons-91f9716f.js';
import './_commonjsHelpers-0c4b6f40.js';
import './_to-object-b50e61c3.js';
import './_object-pie-133f504a.js';
import 'prop-types';
import 'react-dom';

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,
      imageWidth = props.imageWidth,
      getSerializers = props.getSerializers;

  var builder = imageUrlBuilder(client);

  var urlFor = function urlFor(source) {
    return builder.image(source).auto('format');
  };

  var renderCardImage = function renderCardImage(row) {
    var url = urlFor(row.thumbnail);
    if (imageHeight) url = url.height(imageHeight);
    if (imageWidth) url = url.width(imageWidth);
    return url.url();
  };

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

  var itemCounter = 0;
  var lgVar = 12;

  return React.createElement(
    'div',
    { className: 'contentDeck' },
    React.createElement(
      Container,
      null,
      React.createElement(
        Row,
        null,
        data && data.map(function (row, index) {
          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;

          var socialLinks = [linkedIn, twitter, facebook];
          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.createElement(
            Col,
            { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
            React.createElement(
              Card,
              { className: 'taxonomy-card', style: { flexDirection: mode, position: 'relative', overflow: 'hidden' } },
              React.createElement(
                Card.Body,
                null,
                React.createElement(
                  Row,
                  null,
                  thumbnailURL && React.createElement(
                    Col,
                    null,
                    React.createElement(
                      LazyLoad,
                      { height: imageHeight },
                      row && row.thumbnail && React.createElement(
                        'figure',
                        null,
                        row.thumbnail.link ? React.createElement(
                          'a',
                          { href: row.thumbnail.link, target: row.thumbnail.blank ? '_blank' : '_self' },
                          React.createElement(Card.Img, { variant: 'top', src: thumbnailURL, alt: row.thumbnail.alt ? row.thumbnail.alt : 'profile image' })
                        ) : React.createElement(Card.Img, { variant: 'top', src: thumbnailURL, alt: row.thumbnail.alt ? row.thumbnail.alt : 'profile image' }),
                        row && row.thumbnail && row.thumbnail.caption && React.createElement(
                          'figcaption',
                          null,
                          row.thumbnail.caption
                        )
                      )
                    )
                  ),
                  React.createElement(
                    Col,
                    null,
                    React.createElement(
                      Row,
                      { className: 'details-content-wrapper' },
                      React.createElement(
                        'div',
                        { className: 'details-content-inner-wrapper' },
                        (address && address.length > 0 || companyDetails && companyDetails.length > 0) && React.createElement(
                          'div',
                          { className: 'details-wrapper' },
                          companyDetails && companyDetails.length > 0 && React.createElement(
                            'div',
                            { className: 'company-wrapper' },
                            companyDetails.map(function (field, index) {
                              if (field.value && field.key === 'company') {
                                return React.createElement(
                                  'p',
                                  { className: 'details-field', key: index },
                                  field.value
                                );
                              } else if (field.value && field.key === 'url') {
                                return React.createElement(
                                  'a',
                                  { className: 'details-field', href: field.value, key: index },
                                  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.createElement(
                            'div',
                            { className: 'address-wrapper' },
                            address.map(function (field, index) {
                              if (field) {
                                return React.createElement(
                                  'p',
                                  { className: 'details-field', key: index },
                                  field
                                );
                              }
                            })
                          ),
                          React.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.createElement(
                          'div',
                          { className: 'social-icons' },
                          socialLinks.map(function (url, index) {
                            if (url && url.length) {
                              return React.createElement(reactSocialIcons_1, {
                                target: '_blank',
                                rel: 'noopener noreferrer',
                                key: index,
                                index: index,
                                url: url,
                                style: { width: 30, height: 30, marginRight: 10 }
                              });
                            }
                          }),
                          React.createElement(
                            'style',
                            { jsx: 'true' },
                            '\n                                    .social-icons {\n                                      margin-top: 0px;\n                                      margin-bottom: 10px;\n                                    }\n                                  '
                          )
                        ),
                        React.createElement(
                          Card.Text,
                          null,
                          React.createElement(BlockContent, _extends({ blocks: row.summary, serializers: getSerializers }, client.config()))
                        )
                      )
                    )
                  )
                ),
                icon && React.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.createElement(
      'style',
      { jsx: 'true' },
      '\n          .taxonomy-card:hover .taxonomy-icon {\n            transform: translateY(-50%) scale(1.5) translateX(0) !important;\n          }\n        '
    )
  );
};

export default TaxonomyCard;
