import { defineProperty as _defineProperty, extends as _extends, objectWithoutProperties as _objectWithoutProperties } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import _pt from 'prop-types';
import { MdCheck, MdClose } from 'react-icons/md';
import { BuildActivityStatus, BuildActivityType } from './types.esm.js';
import { BuildLogEntrySkeleton } from './BuildLogEntrySkeleton.esm.js';
import { ProgressBar } from '../ProgressBar/ProgressBar.esm.js';
import '../icons/BlogIcon.esm.js';
import '../icons/CheckIcon.esm.js';
import '../icons/PortfolioIcon.esm.js';
import '../icons/EcommerceIcon.esm.js';
import '../icons/CheckCircleIcon.esm.js';
import '../icons/EllipsisIcon.esm.js';
import InProgressIcon from '../icons/InProgressIcon.esm.js';
import '../icons/CloseCircleIcon.esm.js';
import '../icons/SuccessIcon.esm.js';
import '../icons/GeneralIcon.esm.js';
import '../icons/ReportsIcon.esm.js';
import '../icons/SkullIcon.esm.js';
import '../icons/BuildsIcon.esm.js';
import '../icons/IntegrationsIcon.esm.js';
import '../icons/FreePlanIcon.esm.js';
import '../icons/ProfessionalPlanIcon.esm.js';
import '../icons/BusinessPlanIcon.esm.js';
import '../icons/EnterprisePlanIcon.esm.js';
import '../icons/BitbucketIcon.esm.js';
import '../icons/GitHubIcon.esm.js';
import '../icons/GitLabIcon.esm.js';
import '../icons/FeaturesIcon.esm.js';
import '../icons/CollaborationIcon.esm.js';
import '../icons/LoginIcon.esm.js';
import '../icons/ProviderIcon.esm.js';
import '../icons/DeployIcon.esm.js';
import '../icons/CampaignIcon.esm.js';

var _activityEntryStatusV;

var durationCellCss = function durationCellCss(theme) {
  return _defineProperty({
    display: "grid",
    alignItems: "center",
    fontSize: theme.fontSizes[1]
  }, theme.mediaQueries.tablet, {
    gridTemplateColumns: "50% 50%"
  });
};

var durationCss = function durationCss(theme) {
  return {
    textAlign: "end",
    fontSize: theme.fontSizes[0]
  };
};

var hiddenOnMobileCss = function hiddenOnMobileCss(theme) {
  return _defineProperty({
    display: "none",
    padding: "0 ".concat(theme.space[4])
  }, theme.mediaQueries.tablet, {
    display: "block"
  });
};

var statusColorLookup = function statusColorLookup(theme) {
  var _ref3;

  return _ref3 = {}, _defineProperty(_ref3, BuildActivityStatus.Failed, theme.colors.red[70]), _defineProperty(_ref3, BuildActivityStatus.InProgress, theme.colors.blue[80]), _defineProperty(_ref3, BuildActivityStatus.NotStarted, theme.colors.grey[50]), _defineProperty(_ref3, BuildActivityStatus.Success, theme.colors.grey[50]), _defineProperty(_ref3, BuildActivityStatus.Interrupted, theme.colors.red[70]), _ref3;
};

function BuildActivityEntry(_ref4) {
  var activity = _ref4.activity,
      standardLogData = _objectWithoutProperties(_ref4, ["activity"]);

  var duration = activity.duration,
      current = activity.current,
      total = activity.total,
      type = activity.type,
      status = activity.status;
  var isSuccessfulActivity = status === BuildActivityStatus.Success;
  var isFailedActivity = [BuildActivityStatus.Interrupted, BuildActivityStatus.Failed].includes(status);
  /*
   * Normalize total in case it's not updated properly when activity succeeds
   */

  var normalizedTotal = isSuccessfulActivity ? current : total;
  var showProgressBar = type === BuildActivityType.Progress && !isSuccessfulActivity && !isFailedActivity;

  var baseCss = function baseCss(theme) {
    return {
      color: statusColorLookup(theme)[status]
    };
  };

  var progressCss = function progressCss(theme) {
    return [hiddenOnMobileCss(theme), {
      textAlign: "right",
      fontSize: theme.fontSizes[0],
      visibility: isFailedActivity ? "hidden" : "visible"
    }];
  };

  return jsx(BuildLogEntrySkeleton, {
    icon: jsx(ActivityStatusIcon, {
      activityId: activity.id,
      status: status
    }),
    css: baseCss
  }, jsx("div", {
    id: "activity__message--".concat(activity.id)
  }, activity.message || activity.name || standardLogData.message), jsx("div", {
    css: hiddenOnMobileCss
  }, showProgressBar && jsx(ProgressBar, {
    value: current || 0,
    max: normalizedTotal || 0,
    getProgressColor: function getProgressColor(theme) {
      return theme.colors.blue[50];
    },
    "aria-describedby": "activity__message--".concat(activity.id)
  })), jsx("div", {
    css: durationCellCss
  }, jsx("span", {
    css: progressCss
  }, formatProgress(current, normalizedTotal)), typeof duration === "number" && jsx("span", {
    css: durationCss
  }, formatDuration(duration))));
}

var formatDuration = function formatDuration(duration) {
  return "".concat(duration.toFixed(2), "s");
};

var formatProgress = function formatProgress(current, total) {
  return [current, typeof total === "number" && typeof current === "number" && total < current ? current : total].filter(function (part) {
    return typeof part === "number";
  }).join(" / ");
};

function ActivityStatusIcon(_ref5) {
  var activityId = _ref5.activityId,
      status = _ref5.status;
  var statusVariant = status ? activityEntryStatusVariants[status] : null;

  if (!statusVariant) {
    return null;
  }

  return jsx(statusVariant.Icon, {
    "aria-label": statusVariant.label,
    css: statusVariant.styles,
    id: "statusIcon--".concat(activityId)
  });
}

ActivityStatusIcon.propTypes = {
  activityId: _pt.string.isRequired
};
var activityEntryStatusVariants = (_activityEntryStatusV = {}, _defineProperty(_activityEntryStatusV, BuildActivityStatus.Success, {
  label: "Completed",
  Icon: MdCheck,
  styles: function styles(theme) {
    return {
      color: theme.colors.grey[40]
    };
  }
}), _defineProperty(_activityEntryStatusV, BuildActivityStatus.Interrupted, {
  label: "Failed",
  Icon: MdClose,
  styles: function styles(theme) {
    return {
      color: theme.colors.red[60]
    };
  }
}), _defineProperty(_activityEntryStatusV, BuildActivityStatus.Failed, {
  label: "Failed",
  Icon: MdClose,
  styles: function styles(theme) {
    return {
      color: theme.colors.red[60]
    };
  }
}), _defineProperty(_activityEntryStatusV, BuildActivityStatus.InProgress, {
  label: "In Progress",
  Icon: ActivityInProgressIcon,
  styles: function styles(theme) {
    return {
      color: theme.colors.blue[80]
    };
  }
}), _activityEntryStatusV);

function ActivityInProgressIcon(props) {
  return jsx(InProgressIcon, _extends({}, props, {
    size: "inherit"
  }));
}

BuildActivityEntry.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "BuildActivityEntry",
  "props": {
    "activity": {
      "required": true,
      "tsType": {
        "name": "BuildActivity"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/BuildLogs/BuildActivityEntry.tsx"] = {
    name: "BuildActivityEntry",
    docgenInfo: BuildActivityEntry.__docgenInfo,
    path: "src/components/BuildLogs/BuildActivityEntry.tsx"
  };
}

export { BuildActivityEntry };
//# sourceMappingURL=BuildActivityEntry.esm.js.map
