import _pt from "prop-types";

function _extends() { _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; }; return _extends.apply(this, arguments); }

import React from "react";
import classNames from "classnames";
import Button from "../Button";
import OverlayWrapper from "../OverlayWrapper";
import Popover from "../Popover";
import Dropdown from "../Dropdown";
import ButtonIcon from "../ButtonIcon";
import Icon from "react-oui-icons";
import { greyDark } from "../../tokens/forimport/index.es";

var renderDropdownActivator = function renderDropdownActivator(_ref // eslint-disable-line
) {
  var onClick = _ref.onClick,
      buttonRef = _ref.buttonRef;
  return React.createElement(ButtonIcon, {
    style: "plain",
    iconFill: "default",
    iconName: "ellipsis",
    buttonRef: buttonRef,
    onClick: onClick
  });
};

var Tile = function Tile(_ref2) {
  var description = _ref2.description,
      dragHandleProps = _ref2.dragHandleProps,
      dropdownItems = _ref2.dropdownItems,
      _ref2$hasSpacing = _ref2.hasSpacing,
      hasSpacing = _ref2$hasSpacing === void 0 ? true : _ref2$hasSpacing,
      _ref2$hasWarning = _ref2.hasWarning,
      hasWarning = _ref2$hasWarning === void 0 ? false : _ref2$hasWarning,
      _ref2$isDraggable = _ref2.isDraggable,
      isDraggable = _ref2$isDraggable === void 0 ? false : _ref2$isDraggable,
      _ref2$isSelected = _ref2.isSelected,
      isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
      name = _ref2.name,
      onCopy = _ref2.onCopy,
      onDismiss = _ref2.onDismiss,
      onEdit = _ref2.onEdit,
      onTileClick = _ref2.onTileClick,
      order = _ref2.order,
      status = _ref2.status,
      testSection = _ref2.testSection,
      _ref2$usesMonospaceNa = _ref2.usesMonospaceName,
      usesMonospaceName = _ref2$usesMonospaceNa === void 0 ? false : _ref2$usesMonospaceNa,
      _ref2$warningContent = _ref2.warningContent,
      warningContent = _ref2$warningContent === void 0 ? "" : _ref2$warningContent,
      warningTitle = _ref2.warningTitle;
  var tileContent = React.createElement(React.Fragment, null, React.createElement("p", {
    className: classNames("text--left flush", {
      monospace: usesMonospaceName
    })
  }, name), React.createElement("p", {
    className: "text--left muted flush--bottom push-half--top micro wrap-text"
  }, description));
  return React.createElement("div", {
    className: classNames("oui-tile flex flex-align--center soft", {
      "oui-tile--selected": isSelected,
      "push-half--ends": hasSpacing
    }),
    "data-test-section": testSection
  }, order && React.createElement("span", {
    className: "oui-tile__order-number milli text--right push--right"
  }, order), isDraggable && React.createElement("div", _extends({
    className: "oui-tile__drag-handle push--right"
  }, dragHandleProps), React.createElement(Icon, {
    name: "hamburger",
    fill: greyDark
  })), hasWarning && React.createElement("div", {
    className: "push--right push-half--top display--inline-block"
  }, React.createElement(OverlayWrapper, {
    behavior: "hover",
    horizontalAttachment: "center",
    overlay: React.createElement(Popover, {
      title: warningTitle,
      testSection: "".concat(testSection, "-warning-popover")
    }, warningContent),
    shouldHideOnClick: true,
    verticalAttachment: "bottom"
  }, React.createElement(Icon, {
    name: "exclamation"
  }))), onTileClick ? React.createElement(Button, {
    testSection: "".concat(testSection, "-main-tile-button"),
    style: "unstyled",
    width: "full",
    onClick: onTileClick
  }, tileContent) : React.createElement("div", {
    className: "width--1-1 line--1"
  }, tileContent), React.createElement("div", {
    className: "flex flex-justified--between flex-align--center push--left"
  }, status && React.createElement("p", {
    className: "muted micro flush--bottom weight--bold push-half--sides"
  }, status), onCopy && React.createElement(ButtonIcon, {
    iconName: "clipboard",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onCopy
  }), onEdit && React.createElement(ButtonIcon, {
    iconName: "pencil",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onEdit
  }), onDismiss && React.createElement(ButtonIcon, {
    iconName: "trash",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onDismiss
  }), dropdownItems && React.createElement(Dropdown, {
    renderActivator: renderDropdownActivator,
    placement: "bottom-end",
    key: "dropdown",
    testSection: "".concat(testSection, "-action-overflow-button")
  }, React.createElement(Dropdown.Contents, {
    direction: "right"
  }, dropdownItems))));
};

Tile.propTypes = {
  description: _pt.string,
  dragHandleProps: _pt.object,
  dropdownItems: _pt.arrayOf(_pt.node),
  hasSpacing: _pt.bool,
  hasWarning: _pt.bool,
  isDraggable: _pt.bool,
  isSelected: _pt.bool,
  onCopy: _pt.func,
  onDismiss: _pt.func,
  onEdit: _pt.func,
  onTileClick: _pt.func,
  order: _pt.number,
  status: _pt.string,
  testSection: _pt.string,
  name: _pt.string.isRequired,
  usesMonospaceName: _pt.bool,
  warningContent: _pt.any,
  warningTitle: _pt.string
};
export default Tile;