import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from "./..";
/**
 *
 * @category containers
 * @component chip
 * @variations collab-ui-react
 *
 */

var Chip = function Chip(_ref) {
  var className = _ref.className,
      leftContent = _ref.leftContent,
      fileDownloadLink = _ref.fileDownloadLink,
      fileType = _ref.fileType,
      rightContent = _ref.rightContent,
      subTitle = _ref.subTitle,
      title = _ref.title,
      type = _ref.type;
  Chip.displayName = 'Chip'; // This appears to be a false positive
  // See: https://github.com/yannickcr/eslint-plugin-react/issues/1181
  // eslint-disable-next-line react/no-multi-comp

  function buildChipLeft() {
    if (type === 'file') {
      return React.createElement(Icon, {
        name: "file-" + fileType + "_32"
      });
    }

    if (type === 'recording') {
      return React.createElement(Icon, {
        name: "play-circle_32",
        color: "white"
      });
    }

    if (type === 'unauthorized') {
      return React.createElement(Icon, {
        name: "warning_32"
      });
    }

    return leftContent;
  } // eslint-disable-next-line react/no-multi-comp


  function buildChipRight() {
    if (rightContent) {
      return rightContent;
    }

    if (type === 'file' && fileDownloadLink) {
      return React.createElement("a", {
        className: "file-download",
        download: true,
        href: fileDownloadLink
      }, React.createElement("i", {
        className: "icon icon-download_32"
      }));
    }

    return null;
  }

  var chipLeft = buildChipLeft();
  var chipRight = buildChipRight();
  return React.createElement("div", {
    className: 'cui-chip' + ("" + (className && " " + className || ''))
  }, React.createElement("div", {
    className: 'cui-chip-left' + ("" + (type && " " + type || ''))
  }, chipLeft), React.createElement("div", {
    className: "cui-chip-center"
  }, title && React.createElement("div", {
    className: "cui-chip__title lead"
  }, title), subTitle && React.createElement("div", {
    className: "cui-chip__sub-title subheader"
  }, subTitle)), chipRight && React.createElement("div", {
    className: "cui-chip-right"
  }, chipRight));
};

Chip.propTypes = {
  className: PropTypes.string,
  fileDownloadLink: PropTypes.string,
  fileType: PropTypes.oneOf(['audio', 'graph', 'image', 'locked', 'missing', 'pdf', 'spreadsheet', 'text', 'video', 'zip']),
  leftContent: PropTypes.node,
  rightContent: PropTypes.node,
  subTitle: PropTypes.string,
  title: PropTypes.string,
  type: PropTypes.oneOf(['file', 'recording', 'unauthorized'])
};
Chip.defaultProps = {
  className: '',
  fileDownloadLink: '',
  fileType: null,
  leftContent: null,
  rightContent: null,
  subTitle: '',
  title: null,
  type: null
};
export default Chip;
/**
 * @name Recording Chip
 *
 * @category containers
 * @component chip
 * @section recording
 * @js

 export default function Chip() {
   return (
     <div className="row">
       <div className="docs-example docs-example--spacing">
         <h3>
           <p><code className="small">size=(16)</code></p>
         </h3>
         <Chip type="recording" title="Webex Teams Recording" subTitle="18 min"/>
       </div>
     </div>
   );
 }

 **/

/**
 * @name File Chip
 *
 * @category containers
 * @component chip
 * @section file
 * @js

 export default function Chip() {
   return (
     <div className="row">
       <div className="docs-example docs-example--spacing">
         <h3>
           <p><code className="small">size=(16)</code></p>
         </h3>
         <Chip type="file" fileType="audio" title="Filename.mp3" subTitle="23kb"  fileDownloadLink="https://www.google.com"/>
       </div>
     </div>
   );
 }
 **/