var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React from 'react';
import PropTypes from 'prop-types';
import ReactHtmlParser from 'react-html-parser';
import classNames from 'classnames';

import LinkDropdown from '../../molecules/LinkDropdown';
import Icon from '../../base/Icon';
import ButtonWithIcon from '../../atoms/buttons/ButtonWithIcon';
import DecorativeLink from '../../atoms/links/DecorativeLink';
import Email from '../../atoms/contact/Email';
import Image from '../../atoms/media/Image';
import EventTime from '../../atoms/contact/EventTime';
import PhoneNumber from '../../atoms/contact/PhoneNumber';
import Address from '../../atoms/contact/Address';
import TeaserSearch from './TeaserSearch';
import TeaserOrgs from './TeaserOrgs';
import { buildUrl } from './utils';
import './style.css';

var GenTeaser = function GenTeaser(props) {
  var _classNames;

  var children = props.children,
      onClick = props.onClick,
      onKeyDown = props.onKeyDown,
      stacked = props.stacked,
      align = props.align,
      rest = _objectWithoutProperties(props, ['children', 'onClick', 'onKeyDown', 'stacked', 'align']);

  var teaserClasses = classNames((_classNames = {
    'ma__gen-teaser': true,
    'ma__gen-teaser--clickable': onClick,
    'ma__gen-teaser--stacked': stacked
  }, _classNames['ma__gen-teaser--align-' + align] = align, _classNames));
  var role = onClick ? 'button' : '';
  return (
    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
    React.createElement(
      'section',
      _extends({ className: teaserClasses, onClick: onClick, onKeyDown: onKeyDown, role: role }, rest),
      children
    )
  );
};

GenTeaser.displayName = 'GenTeaser';

GenTeaser.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A custom on click function */
  onClick: PropTypes.func,
  /** A custom on key down function */
  onKeyDown: PropTypes.func,
  /** React children to render */
  children: PropTypes.node,
  /** whether to stack image on top */
  stacked: PropTypes.bool,
  /** alignment for description relative to image */
  align: PropTypes.oneOf(['top', 'center'])
} : {};

export default GenTeaser;

/**
  Wrapper
  */

var GenTeaserDetails = function GenTeaserDetails(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__details' }, rest),
    children
  );
};

GenTeaserDetails.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};

GenTeaser.Details = GenTeaserDetails;
GenTeaser.Details.displayName = 'GenTeaser.Details';

/**
  Image
  */

var GenTeaserImage = function GenTeaserImage(props) {
  var img = props.img,
      children = props.children,
      rest = _objectWithoutProperties(props, ['img', 'children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__image' }, rest),
    children || img && React.createElement(Image, img)
  );
};

GenTeaserImage.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Either a string or react component */
  img: PropTypes.shape(Image.propTypes),
  /** React children to render */
  children: PropTypes.node
} : {};

GenTeaser.Image = GenTeaserImage;
GenTeaser.Image.displayName = 'GenTeaser.Image';

/**
  Eyebrow
  */

var GenTeaserEyebrow = function GenTeaserEyebrow(props) {
  var eyebrow = props.eyebrow,
      children = props.children,
      rest = _objectWithoutProperties(props, ['eyebrow', 'children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__eyebrow' }, rest),
    children || React.createElement(
      'span',
      null,
      eyebrow
    )
  );
};

GenTeaserEyebrow.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Either a string or react component */
  eyebrow: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  /** React children to render */
  children: PropTypes.node
} : {};

GenTeaser.Eyebrow = GenTeaserEyebrow;
GenTeaser.Eyebrow.displayName = 'GenTeaser.Eyebrow';

/**
  Expand Button
  */

var GenTeaserButton = function GenTeaserButton(props) {
  var button = props.button,
      rest = _objectWithoutProperties(props, ['button']);

  var icon = button.icon ? button.icon : React.createElement(Icon, { name: 'expand', width: 15, height: 15 });
  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__button' }, rest),
    React.createElement(ButtonWithIcon, _extends({
      capitalized: true
    }, button, {
      icon: icon,
      size: 'small'
    }))
  );
};

GenTeaserButton.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Expects props from ButtonWithIcon (e.g. text, info, etc.) */
  button: PropTypes.shape(ButtonWithIcon.propTypes).isRequired
} : {};

GenTeaser.Button = GenTeaserButton;
GenTeaser.Button.displayName = 'GenTeaser.Button';

/**
  Stat info
  */

var GenTeaserStat = function GenTeaserStat(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__stat' }, rest),
    children
  );
};

GenTeaserStat.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Expects to receive children directly (e.g. <span><b>103 item</b></span>). */
  children: PropTypes.node.isRequired
} : {};

GenTeaser.Stat = GenTeaserStat;
GenTeaser.Stat.displayName = 'GenTeaser.Stat';

/**
  Title Link
  */
var GenTeaserTitle = function GenTeaserTitle(props) {
  var level = props.level,
      title = props.title,
      children = props.children,
      rest = _objectWithoutProperties(props, ['level', 'title', 'children']);

  if (title) {
    title.icon = title.icon ? React.createElement(Icon, { name: title.icon, svgWidth: 15, svgHeight: 15, 'aria-hidden': 'true' }) : '';
  }
  var Element = 'h' + (level || 2);
  return React.createElement(
    Element,
    _extends({ className: 'ma__gen-teaser__title' }, rest),
    children || React.createElement(DecorativeLink, title)
  );
};

GenTeaserTitle.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The heading level of the title */
  level: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /** The title object (text, info, href) */
  title: PropTypes.shape(DecorativeLink.propTypes),
  /** React children to render */
  children: PropTypes.node
} : {};

GenTeaser.Title = GenTeaserTitle;
GenTeaser.Title.displayName = 'GenTeaser.Title';

/**
  Emphasis wrapper for Date and Orgs
  */

var GenTeaserEmphasis = function GenTeaserEmphasis(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__emphasis' }, rest),
    children
  );
};

GenTeaserEmphasis.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};

GenTeaser.Emphasis = GenTeaserEmphasis;
GenTeaser.Emphasis.displayName = 'GenTeaser.Emphasis';

/**
  Date
  */

var GenTeaserDate = function GenTeaserDate(props) {
  var date = props.date,
      children = props.children,
      rest = _objectWithoutProperties(props, ['date', 'children']);

  return React.createElement(
    'span',
    _extends({ className: 'ma__gen-teaser__date' }, rest),
    children || date
  );
};

GenTeaserDate.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Either a formatted date or a formatted date with a label */
  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /** React children to render */
  children: PropTypes.node
} : {};

GenTeaser.Date = GenTeaserDate;
GenTeaser.Date.displayName = 'GenTeaser.Date';

/**
  Orgs
  */

var GenTeaserOrgs = function GenTeaserOrgs(props) {
  var orgs = props.orgs,
      rest = _objectWithoutProperties(props, ['orgs']);

  return React.createElement(TeaserOrgs, _extends({ orgs: orgs }, rest));
};

GenTeaserOrgs.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An comma seperate list of organizations */
  orgs: PropTypes.string
} : {};

GenTeaser.Orgs = GenTeaserOrgs;
GenTeaser.Orgs.displayName = 'GenTeaser.Orgs';

/**
  Description
  */

var GenTeaserDescription = function GenTeaserDescription(props) {
  var children = props.children,
      description = props.description,
      rest = _objectWithoutProperties(props, ['children', 'description']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__description' }, rest),
    children || React.createElement(
      'p',
      null,
      ReactHtmlParser(description)
    )
  );
};

GenTeaserDescription.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A html formatted or plain string of text */
  description: PropTypes.string,
  /** React children to render */
  children: PropTypes.node
} : {};

GenTeaser.Description = GenTeaserDescription;
GenTeaser.Description.displayName = 'GenTeaser.Description';

/**
  Search bar
  */

var GenTeaserSearchBar = function GenTeaserSearchBar(props) {
  var search = props.search,
      rest = _objectWithoutProperties(props, ['search']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__search' }, rest),
    React.createElement(TeaserSearch, search)
  );
};

GenTeaserSearchBar.propTypes = process.env.NODE_ENV !== "production" ? {
  /**
    search:
      target: target url of the search bar
      id: id of the search bar
      queryInput: query input variable to replace in the target url with the user entered term
      placeholder: Placeholder text of the search bar.
  */
  search: PropTypes.shape(TeaserSearch.propTypes).isRequired
} : {};

GenTeaser.SearchBar = GenTeaserSearchBar;
GenTeaser.SearchBar.displayName = 'GenTeaser.SearchBar';

/**
  SubLinks wrapper for formatting key actions into 2 columns
  */

var GenTeaserSubLinks = function GenTeaserSubLinks(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__key-action' }, rest),
    children.length > 2 ? React.createElement(
      React.Fragment,
      null,
      React.createElement(
        'div',
        { className: 'ma__gen-teaser__key-action-col' },
        children.slice(0, 2)
      ),
      React.createElement(
        'div',
        { className: 'ma__gen-teaser__key-action-col' },
        children.slice(2, 4)
      )
    ) : React.createElement(
      'div',
      { className: 'ma__gen-teaser__key-action-col' },
      children
    )
  );
};

GenTeaserSubLinks.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};

GenTeaser.SubLinks = GenTeaserSubLinks;
GenTeaser.SubLinks.displayName = 'GenTeaser.SubLinks';

/**
  KeyAction
  */

var GenTeaserKeyAction = function GenTeaserKeyAction(props) {
  var description = props.description,
      href = props.href,
      text = props.text,
      info = props.info,
      children = props.children,
      rest = _objectWithoutProperties(props, ['description', 'href', 'text', 'info', 'children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__key-action-item' }, rest),
    children || React.createElement(
      React.Fragment,
      null,
      text && href && React.createElement(DecorativeLink, { href: href, text: text, info: info }),
      description && React.createElement(
        'p',
        null,
        ReactHtmlParser(description)
      )
    )
  );
};

GenTeaserKeyAction.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A description of the link */
  description: PropTypes.string,
  /** A link */
  href: PropTypes.string,
  /** Link text */
  text: PropTypes.string,
  /** Link info */
  info: PropTypes.string,
  /** React children to render */
  children: PropTypes.node
} : {};

GenTeaser.KeyAction = GenTeaserKeyAction;
GenTeaser.KeyAction.displayName = 'GenTeaser.KeyAction';

/**
  MoreInfo wrapper for formatting primary and secondary info
  */

var GenTeaserMoreInfo = function GenTeaserMoreInfo(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__moreinfo' }, rest),
    children
  );
};

GenTeaserMoreInfo.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};

GenTeaser.MoreInfo = GenTeaserMoreInfo;
GenTeaser.MoreInfo.displayName = 'GenTeaser.MoreInfo';

/**
  Primary info
  */

var GenTeaserPrimaryInfo = function GenTeaserPrimaryInfo(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__pimary' }, rest),
    children
  );
};

GenTeaserPrimaryInfo.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};

GenTeaser.PrimaryInfo = GenTeaserPrimaryInfo;
GenTeaser.PrimaryInfo.displayName = 'GenTeaser.PrimaryInfo';

/**
  Secondary info
  */

var GenTeaserSecondaryInfo = function GenTeaserSecondaryInfo(props) {
  var children = props.children,
      rest = _objectWithoutProperties(props, ['children']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__secondary' }, rest),
    children
  );
};

GenTeaserSecondaryInfo.propTypes = process.env.NODE_ENV !== "production" ? {
  /** React children to render */
  children: PropTypes.node.isRequired
} : {};

GenTeaser.SecondaryInfo = GenTeaserSecondaryInfo;
GenTeaser.SecondaryInfo.displayName = 'GenTeaser.SecondaryInfo';

/**
  Address
  */

var GenTeaserAddress = function GenTeaserAddress(props) {
  var address = props.address,
      directionLink = props.directionLink,
      details = props.details,
      rest = _objectWithoutProperties(props, ['address', 'directionLink', 'details']);

  var addrProps = {
    address: address,
    directionLink: directionLink,
    details: details
  };
  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__infoitem' }, rest),
    React.createElement(
      'span',
      { className: 'ma__gen-teaser__infoitem-icon' },
      React.createElement(Icon, { name: 'marker', svgWidth: 15, svgHeight: 15 })
    ),
    React.createElement(Address, addrProps)
  );
};

GenTeaserAddress.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A string or html formatted string of the address */
  address: PropTypes.string,
  /** A link to directions to the address */
  directionLink: PropTypes.string,
  /** Any details related to the phone number */
  details: PropTypes.string
} : {};

GenTeaser.Address = GenTeaserAddress;
GenTeaser.Address.displayName = 'GenTeaser.Address';

/**
  Phone
  */

var GenTeaserPhone = function GenTeaserPhone(props) {
  var number = props.number,
      details = props.details,
      rest = _objectWithoutProperties(props, ['number', 'details']);

  var phoneProps = {
    number: number,
    details: details
  };
  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__infoitem' }, rest),
    React.createElement(
      'span',
      { className: 'ma__gen-teaser__infoitem-icon' },
      React.createElement(Icon, { name: 'phone', svgWidth: 15, svgHeight: 15 })
    ),
    React.createElement(PhoneNumber, phoneProps)
  );
};

GenTeaserPhone.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The phone number */
  number: PropTypes.string,
  /** Any details related to the phone number */
  details: PropTypes.string
} : {};

GenTeaser.Phone = GenTeaserPhone;
GenTeaser.Phone.displayName = 'GenTeaser.Phone';

/**
  Email
  */

var GenTeaserEmail = function GenTeaserEmail(props) {
  var email = props.email,
      details = props.details,
      rest = _objectWithoutProperties(props, ['email', 'details']);

  var emailProps = {
    email: email,
    details: details
  };
  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__infoitem' }, rest),
    React.createElement(
      'span',
      { className: 'ma__gen-teaser__infoitem-icon' },
      React.createElement(Icon, { name: 'mail', svgWidth: 15, svgHeight: 15 })
    ),
    React.createElement(Email, emailProps)
  );
};

GenTeaserEmail.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An email object */
  email: PropTypes.shape(Email.propTypes).isRequired,
  /** Any details related to the email */
  details: PropTypes.string
} : {};

GenTeaser.Email = GenTeaserEmail;
GenTeaser.Email.displayName = 'GenTeaser.Email';

/**
  Event
  */

var GenTeaserEvent = function GenTeaserEvent(props) {
  var calendars = props.calendars,
      startDate = props.startDate,
      endDate = props.endDate,
      details = props.details,
      location = props.location,
      description = props.description,
      title = props.title,
      rest = _objectWithoutProperties(props, ['calendars', 'startDate', 'endDate', 'details', 'location', 'description', 'title']);

  var dropdownProps = {
    dropdownButton: {
      text: 'Add to Calendar',
      theme: 'c-primary',
      usage: 'quaternary',
      id: 'dropdownbutton-simple',
      'aria-haspopup': true,
      capitalized: true
    }
  };
  var eventProps = {
    startDate: startDate,
    endDate: endDate,
    details: details,
    location: location,
    description: description,
    title: title
  };
  dropdownProps.dropdownItems = calendars.map(function (item) {
    var type = item.type,
        text = item.text;

    var itemVals = '';
    switch (type) {
      case 'yahoo':
      case 'google':
      case 'outlookcom':
        itemVals = {
          text: text,
          href: buildUrl(eventProps, type)
        };
        break;
      default:
        itemVals = {
          text: text,
          href: buildUrl(eventProps, type, window || ''),
          target: '_blank',
          download: 'download.ics'
        };
        break;
    }
    return itemVals;
  });
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      'div',
      _extends({ className: 'ma__gen-teaser__infoitem' }, rest),
      React.createElement(
        'span',
        { className: 'ma__gen-teaser__infoitem-icon' },
        React.createElement(Icon, { name: 'calendar', svgWidth: 15, svgHeight: 15 })
      ),
      React.createElement(EventTime, eventProps)
    ),
    React.createElement(LinkDropdown, dropdownProps)
  );
};

GenTeaserEvent.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The start date & time of the event  */
  startDate: PropTypes.string,
  /** The end date & time of the event  */
  endDate: PropTypes.string,
  /** The address of the event */
  location: PropTypes.string,
  /** Any details about the event */
  details: PropTypes.string,
  /** What type of calendars you would like users to be able to add to.
      'google', 'yahoo', and 'outlookcom' if passed will render as specific
      formats, all others render as base ics format.
   */
  calendars: PropTypes.arrayOf(PropTypes.string),
  /** The title of the event */
  title: PropTypes.string,
  /** A description of the event */
  description: PropTypes.string
} : {};

GenTeaser.Event = GenTeaserEvent;
GenTeaser.Event.displayName = 'GenTeaser.Event';

/**
  Info details
  */

var GenTeaserInfoDetails = function GenTeaserInfoDetails(props) {
  var icon = props.icon,
      href = props.href,
      text = props.text,
      rest = _objectWithoutProperties(props, ['icon', 'href', 'text']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__infoitem' }, rest),
    React.createElement(
      'span',
      { className: 'ma__gen-teaser__infoitem-icon' },
      React.createElement(Icon, { name: icon || 'laptop', svgWidth: 15, svgHeight: 15 })
    ),
    text && !href && React.createElement(
      'span',
      null,
      text
    ),
    href && text && React.createElement(DecorativeLink, { text: text, href: href })
  );
};

GenTeaserInfoDetails.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The text information related to the details */
  text: PropTypes.string.isRequired,
  /** The icon to render in the text, defaults to laptop icon. */
  icon: PropTypes.string,
  /** A link for the text */
  href: PropTypes.string
} : {};

GenTeaser.InfoDetails = GenTeaserInfoDetails;
GenTeaser.InfoDetails.displayName = 'GenTeaser.InfoDetails';

/**
  Tags
  */

var GenTeaserTags = function GenTeaserTags(props) {
  var tags = props.tags,
      rest = _objectWithoutProperties(props, ['tags']);

  return React.createElement(
    'div',
    _extends({ className: 'ma__gen-teaser__tags' }, rest),

    // eslint-disable-next-line react/no-array-index-key
    tags.map(function (tag, index) {
      return React.createElement(
        'span',
        { key: tag + '--' + index, className: 'ma__gen-teaser__tag' },
        tag
      );
    })
  );
};

GenTeaserTags.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An array of tags */
  tags: PropTypes.arrayOf(PropTypes.string).isRequired
} : {};

GenTeaser.Tags = GenTeaserTags;
GenTeaser.Tags.displayName = 'GenTeaser.Tags';