import _defineProperty from '@babel/runtime/helpers/defineProperty';
import classnames from 'classnames';
import Warning from '@bigbinary/neeto-icons/Warning';
import Tooltip from '@bigbinary/neetoui/Tooltip';
import Typography from '@bigbinary/neetoui/Typography';
import Spinner from '@bigbinary/neetoui/Spinner';
import { useTranslation } from 'react-i18next';
import DateRangeFilter from './DateRangeFilter.js';
import { t } from 'i18next';
import { memo, createElement } from 'react';
import { sum, values, pluck } from 'ramda';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { existsBy, hyphenate } from '@bigbinary/neeto-cist';
import HelpPopover from './HelpPopover.js';
import '@babel/runtime/helpers/slicedToArray';
import '@bigbinary/neeto-commons-frontend/initializers';
import '@bigbinary/neeto-commons-frontend/utils';
import '@bigbinary/neetoui/Select';
import '@bigbinary/neetoui/DatePicker';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@bigbinary/neeto-icons/Help';
import '@bigbinary/neetoui/Button';
import '@bigbinary/neetoui/Popover';

var DEFAULT_DEVICES = [{
  label: t("neetoMolecules.insights.labels.devices.desktop"),
  value: "desktop"
}, {
  label: t("neetoMolecules.insights.labels.devices.mobile"),
  value: "smartphone"
}];
var DEFAULT_OS = [{
  label: t("neetoMolecules.insights.labels.os.macos"),
  value: "mac"
}, {
  label: t("neetoMolecules.insights.labels.os.windows"),
  value: "windows"
}];
var DEFAULT_BROWSERS = [{
  label: t("neetoMolecules.insights.labels.browsers.chrome"),
  value: "chrome"
}, {
  label: t("neetoMolecules.insights.labels.browsers.safari"),
  value: "safari"
}];
({
  label: t("neetoMolecules.insights.labels.allTime")});

var PercentageBar = function PercentageBar(_ref) {
  var value = _ref.value;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [value !== 0 && /*#__PURE__*/jsx("div", {
      className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2",
      style: {
        width: "".concat(value, "%")
      }
    }), /*#__PURE__*/jsx(Typography, {
      style: "body3",
      children: value ? "".concat(value, "%") : 0
    })]
  });
};
var PercentageBar$1 = /*#__PURE__*/memo(PercentageBar);

var MetaInfoItem = function MetaInfoItem(_ref) {
  var name = _ref.name,
    value = _ref.value;
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(Typography, {
      style: "body2",
      textTransform: "capitalize",
      children: name
    }), /*#__PURE__*/jsx("div", {
      className: "col-span-3 flex items-center gap-2",
      children: /*#__PURE__*/jsx(PercentageBar$1, {
        value: value
      })
    })]
  });
};
var MetaInfoItem$1 = /*#__PURE__*/memo(MetaInfoItem);

var DataDistribution = function DataDistribution(_ref) {
  var data = _ref.data;
  return /*#__PURE__*/jsx("div", {
    className: "grid grid-cols-4 gap-2",
    children: data.map(function (_ref2) {
      var name = _ref2.name,
        value = _ref2.value;
      return /*#__PURE__*/createElement(MetaInfoItem$1, {
        name: name,
        value: value,
        key: name
      });
    })
  });
};

var getSum = function getSum(data, searchKey) {
  var sum = 0;
  for (var key in data) {
    if (key.includes(searchKey)) sum += data[key];
  }
  return sum;
};
var transformInsights = function transformInsights(data, defaultItems) {
  var othersData = Object.keys(data).filter(function (key) {
    return !existsBy({
      value: key
    }, defaultItems);
  }).map(function (key) {
    return {
      name: key,
      value: data[key]
    };
  });
  var defaultData = defaultItems.map(function (_ref) {
    var label = _ref.label,
      value = _ref.value;
    return {
      name: label,
      value: getSum(data, value) || 0
    };
  });
  return {
    defaultData: defaultData,
    othersData: othersData
  };
};

var MetaInfo = function MetaInfo(_ref) {
  var type = _ref.type,
    data = _ref.data,
    defaultItems = _ref.defaultItems;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _transformInsights = transformInsights(data, defaultItems),
    defaultData = _transformInsights.defaultData,
    othersData = _transformInsights.othersData;
  var othersSum = sum(values(pluck("value", othersData)));
  return /*#__PURE__*/jsxs("div", {
    className: "neeto-ui-bg-gray-100 neeto-ui-rounded p-4",
    children: [/*#__PURE__*/jsx(Typography, {
      className: "mb-2",
      style: "body2",
      textTransform: "uppercase",
      weight: "bold",
      children: type
    }), /*#__PURE__*/jsx(DataDistribution, {
      data: defaultData
    }), /*#__PURE__*/jsx(Tooltip, {
      content: /*#__PURE__*/jsx(DataDistribution, {
        data: othersData
      }),
      disabled: !othersSum,
      position: "bottom",
      children: /*#__PURE__*/jsx("div", {
        className: "mt-2 grid grid-cols-4 gap-2",
        children: /*#__PURE__*/jsx(MetaInfoItem$1, {
          name: t("neetoMolecules.insights.others"),
          value: othersSum
        })
      })
    })]
  });
};
var MetaInfo$1 = /*#__PURE__*/memo(MetaInfo);

var TimeItem = function TimeItem(_ref) {
  var value = _ref.value,
    suffix = _ref.suffix;
  return /*#__PURE__*/jsxs("div", {
    className: "flex items-end",
    "data-testid": "time-item",
    children: [/*#__PURE__*/jsx(Typography, {
      className: "me-1",
      style: "h1",
      weight: "semibold",
      children: value
    }), /*#__PURE__*/jsx(Typography, {
      lineHeight: "loose",
      style: "body2",
      children: suffix
    })]
  });
};
var TimeItem$1 = /*#__PURE__*/memo(TimeItem);

var MetricItem = function MetricItem(_ref) {
  var metric = _ref.metric,
    value = _ref.value,
    helpText = _ref.helpText,
    isTime = _ref.isTime,
    isPercentage = _ref.isPercentage;
  var renderTime = function renderTime(value) {
    var hours = value.h,
      minutes = value.m,
      seconds = value.s;
    var showSeconds = !hours && !minutes;
    return /*#__PURE__*/jsxs("div", {
      className: "flex gap-2",
      children: [!!hours && /*#__PURE__*/jsx(TimeItem$1, {
        suffix: "H",
        value: hours
      }), !!minutes && /*#__PURE__*/jsx(TimeItem$1, {
        suffix: "M",
        value: minutes
      }), (!!seconds || showSeconds) && /*#__PURE__*/jsx(TimeItem$1, {
        suffix: "S",
        value: seconds
      })]
    });
  };
  return /*#__PURE__*/jsxs("div", {
    className: "nf-insights__metric-item neeto-ui-border-gray-200 border-b pb-4",
    "data-cy": "".concat(hyphenate(metric), "-metric"),
    children: [/*#__PURE__*/jsxs("div", {
      className: "flex items-center gap-2",
      children: [/*#__PURE__*/jsx("div", {
        className: "flex items-end gap-x-1",
        children: isTime ? renderTime(value) : /*#__PURE__*/jsxs(Typography, {
          className: "neeto-ui-text-gray-800",
          "data-cy": "insights-count",
          "data-testid": "insights-count",
          style: "h1",
          weight: "semibold",
          children: [value || 0, isPercentage ? "%" : ""]
        })
      }), helpText && /*#__PURE__*/jsx("div", {
        children: /*#__PURE__*/jsx(HelpPopover, {
          description: helpText
        })
      })]
    }), /*#__PURE__*/jsx(Typography, {
      className: "neeto-ui-text-gray-700",
      "data-cy": "insights-type",
      style: "body3",
      children: metric
    })]
  });
};
var MetricItem$1 = /*#__PURE__*/memo(MetricItem);

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Insights = function Insights(_ref) {
  var insightsData = _ref.insightsData,
    isLoading = _ref.isLoading,
    timePeriod = _ref.timePeriod,
    setTimePeriod = _ref.setTimePeriod,
    _ref$helpTexts = _ref.helpTexts,
    helpTexts = _ref$helpTexts === void 0 ? {} : _ref$helpTexts,
    _ref$showWarningMessa = _ref.showWarningMessage,
    showWarningMessage = _ref$showWarningMessa === void 0 ? false : _ref$showWarningMessa,
    className = _ref.className,
    title = _ref.title,
    _ref$tooltipProps = _ref.tooltipProps,
    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var visitCount = insightsData.visitCount,
    startCount = insightsData.startCount,
    submissionCount = insightsData.submissionCount,
    completionRate = insightsData.completionRate,
    averageSubmissionTime = insightsData.averageSubmissionTime,
    devices = insightsData.devices,
    operatingSystems = insightsData.operatingSystems,
    browsers = insightsData.browsers;
  if (isLoading) {
    return /*#__PURE__*/jsx("div", {
      className: "flex h-full w-full items-center justify-center",
      children: /*#__PURE__*/jsx(Spinner, {})
    });
  }
  return /*#__PURE__*/jsxs("div", {
    className: classnames("mx-auto pt-10", className),
    "data-cy": "insights",
    "data-testid": "insights",
    children: [/*#__PURE__*/jsxs("div", {
      className: "mb-10 flex w-full items-center",
      children: [/*#__PURE__*/jsx(Typography, {
        "data-cy": "submissions-insights-title",
        style: "h2",
        children: title || t("neetoMolecules.insights.title")
      }), showWarningMessage && /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({
        content: t("neetoMolecules.insights.dataInaccuracyWarning"),
        position: "bottom",
        touch: ["hold", 500]
      }, tooltipProps), {}, {
        children: /*#__PURE__*/jsx("span", {
          className: "ms-3",
          children: /*#__PURE__*/jsx(Warning, {
            className: "neeto-ui-text-warning-500",
            "data-cy": "insights-warning",
            "data-testid": "insights-warning",
            size: 20
          })
        })
      })), /*#__PURE__*/jsx("span", {
        className: "ms-auto",
        children: /*#__PURE__*/jsx(DateRangeFilter, {
          setTimePeriod: setTimePeriod,
          timePeriod: timePeriod
        })
      })]
    }), /*#__PURE__*/jsxs("div", {
      className: "mb-6 grid grid-cols-1 gap-x-9 gap-y-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 lg:gap-0",
      children: [/*#__PURE__*/jsx(MetricItem$1, {
        helpText: helpTexts["visitCount"],
        metric: t("neetoMolecules.insights.metrics.visits"),
        value: visitCount
      }), /*#__PURE__*/jsx(MetricItem$1, {
        helpText: helpTexts["startCount"],
        metric: t("neetoMolecules.insights.metrics.starts"),
        value: startCount
      }), /*#__PURE__*/jsx(MetricItem$1, {
        helpText: helpTexts["submissions"],
        metric: t("neetoMolecules.insights.metrics.submissions"),
        value: submissionCount
      }), /*#__PURE__*/jsx(MetricItem$1, {
        isPercentage: true,
        helpText: helpTexts["completionRate"],
        metric: t("neetoMolecules.insights.metrics.completionRate"),
        value: completionRate
      }), /*#__PURE__*/jsx(MetricItem$1, {
        isTime: true,
        helpText: helpTexts["averageSubmissionTime"],
        metric: t("neetoMolecules.insights.metrics.avgTimeToComplete"),
        timeSuffix: t("neetoMolecules.insights.mins"),
        value: averageSubmissionTime
      })]
    }), /*#__PURE__*/jsxs("div", {
      className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3",
      children: [/*#__PURE__*/jsx(MetaInfo$1, {
        data: devices,
        defaultItems: DEFAULT_DEVICES,
        type: t("neetoMolecules.insights.devices")
      }), /*#__PURE__*/jsx(MetaInfo$1, {
        data: operatingSystems,
        defaultItems: DEFAULT_OS,
        type: t("neetoMolecules.insights.os")
      }), /*#__PURE__*/jsx(MetaInfo$1, {
        data: browsers,
        defaultItems: DEFAULT_BROWSERS,
        type: t("neetoMolecules.insights.browsers")
      })]
    })]
  });
};

export { Insights as default };
//# sourceMappingURL=Insights.js.map
