import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useState, Fragment, useEffect } from 'react';
import classnames from 'classnames';
import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
import Collapse from '@bigbinary/neeto-icons/Collapse';
import Button from '@bigbinary/neetoui/Button';
import Typography from '@bigbinary/neetoui/Typography';
import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
import { isNotEmpty } from '@bigbinary/neeto-cist';
import Down from '@bigbinary/neeto-icons/Down';
import Up from '@bigbinary/neeto-icons/Up';
import { useTranslation } from 'react-i18next';
import { n } from './inject-css-C2dztUxs.js';

var Block = function Block(_ref) {
  var title = _ref.title,
    actionBlock = _ref.actionBlock,
    children = _ref.children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className;
  return /*#__PURE__*/jsxs("div", {
    className: "neeto-molecules-metadata__block neeto-ui-border-gray-200 mb-4 w-full border-b pb-4",
    "data-cy": "neeto-molecules-metadata-block",
    "data-testid": "metadata-block",
    children: [(title || actionBlock) && /*#__PURE__*/jsxs("div", {
      className: "mb-2 flex w-full items-center justify-between gap-2",
      children: [title && /*#__PURE__*/jsx("div", {
        className: "flex w-60 items-center gap-2 break-all",
        children: /*#__PURE__*/jsx(Typography, {
          className: "neeto-ui-text-gray-700",
          "data-testid": "metadata-block-title",
          style: "h5",
          textTransform: "uppercase",
          weight: "bold",
          children: title
        })
      }), actionBlock && /*#__PURE__*/jsx("div", {
        className: "ml-auto",
        children: actionBlock
      })]
    }), !!children && /*#__PURE__*/jsx("div", {
      "data-testid": "metadata-card",
      className: classnames("neeto-ui-bg-white neeto-molecules-metadata__card", className),
      children: children
    })]
  });
};

var STYLES = {
  inline: "inline",
  multiline: "multiline"
};
var SIZES = {
  small: "small",
  medium: "medium"
};
var DEFAULT_TRUNCATE_AT = 3;

var DetailsBlock = function DetailsBlock(_ref) {
  var title = _ref.title,
    actionBlock = _ref.actionBlock,
    _ref$details = _ref.details,
    details = _ref$details === void 0 ? [] : _ref$details,
    className = _ref.className,
    _ref$style = _ref.style,
    style = _ref$style === void 0 ? STYLES.inline : _ref$style,
    _ref$truncate = _ref.truncate,
    truncate = _ref$truncate === void 0 ? false : _ref$truncate,
    _ref$truncateAt = _ref.truncateAt,
    truncateAt = _ref$truncateAt === void 0 ? DEFAULT_TRUNCATE_AT : _ref$truncateAt,
    children = _ref.children;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showTruncated = _useState2[0],
    setShowTruncated = _useState2[1];
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _ref2 = truncate ? [details.slice(0, truncateAt), details.slice(truncateAt)] : [details],
    _ref3 = _slicedToArray(_ref2, 2),
    visibleDetails = _ref3[0],
    truncatedDetails = _ref3[1];
  var renderDetailsValue = function renderDetailsValue(value) {
    if (typeof value === "string") {
      return /*#__PURE__*/jsx(Typography, {
        className: "break-anywhere",
        style: "body2",
        children: value
      });
    }
    return /*#__PURE__*/jsx("span", {
      className: "min-w-0 flex-grow",
      children: value
    });
  };
  return /*#__PURE__*/jsx(Block, {
    actionBlock: actionBlock,
    className: className,
    title: title !== null && title !== void 0 ? title : t("neetoMolecules.metadata.detailsTitle"),
    children: /*#__PURE__*/jsxs("div", {
      className: "flex flex-col gap-y-3",
      "data-cy": "neeto-molecules-metadata-details-block",
      children: [visibleDetails.map(function (_ref4, index) {
        var label = _ref4.label,
          value = _ref4.value,
          type = _ref4.type;
        return /*#__PURE__*/jsx(Fragment, {
          children: type === "divider" ? /*#__PURE__*/jsx("hr", {
            className: "neeto-ui-border-gray-200"
          }) : /*#__PURE__*/jsxs("div", {
            "data-testid": "details-card-detail-wrapper",
            className: classnames("flex", {
              "items-center gap-x-4": style === STYLES.inline,
              "flex-col": style === STYLES.multiline
            }),
            children: [/*#__PURE__*/jsx(Typography, {
              className: "neeto-ui-text-gray-600",
              style: "body2",
              children: label
            }), renderDetailsValue(value)]
          })
        }, index);
      }), !truncate && children, showTruncated && /*#__PURE__*/jsxs(Fragment$1, {
        children: [truncatedDetails.map(function (_ref5, index) {
          var label = _ref5.label,
            value = _ref5.value,
            type = _ref5.type;
          return /*#__PURE__*/jsx(Fragment, {
            children: type === "divider" ? /*#__PURE__*/jsx("hr", {
              className: "neeto-ui-border-gray-200"
            }) : /*#__PURE__*/jsxs("div", {
              className: classnames("flex", {
                "gap-x-4": style === STYLES.inline,
                "flex-col": style === STYLES.multiline
              }),
              children: [/*#__PURE__*/jsx(Typography, {
                className: "neeto-ui-text-gray-600",
                style: "body2",
                children: label
              }), renderDetailsValue(value)]
            })
          }, index);
        }), children]
      }), truncate && isNotEmpty(truncatedDetails) && /*#__PURE__*/jsx(Button, {
        "data-testid": "expand-button",
        icon: showTruncated ? Up : Down,
        style: "link",
        label: showTruncated ? t("neetoMolecules.metadata.card.viewLess") : t("neetoMolecules.metadata.card.viewMore"),
        onClick: function onClick() {
          return setShowTruncated(function (showTruncated) {
            return !showTruncated;
          });
        }
      })]
    })
  });
};

var css = ":root{--neeto-molecule-metadata-sidebar-width:384px}.neeto-molecules-metadata-list-panel__wrapper{height:100%;min-width:384px;min-width:var(--neeto-molecule-metadata-sidebar-width);position:relative;transition:all .15s;width:384px;width:var(--neeto-molecule-metadata-sidebar-width);z-index:51}@media screen and (min-width:1024px) and (max-width:1200px){.neeto-molecules-metadata-list-panel__wrapper{--neeto-molecule-metadata-sidebar-width:300px}}@media screen and (max-width:1024px){.neeto-molecules-metadata-list-panel__wrapper{position:fixed;right:0;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-metadata-list-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-metadata-list-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-metadata-list-panel__wrapper--collapsed .neeto-molecules-metadata-list-panel__toggler{transform:scale(-1)}@media screen and (max-width:576px){.neeto-molecules-metadata-list-panel__wrapper--collapsed .neeto-molecules-metadata-list-panel__toggler{left:auto;right:8px}}.neeto-molecules-metadata-list-panel__container{display:flex;height:100%;justify-content:flex-end;overflow:hidden;width:100%}.neeto-molecules-metadata{min-width:384px;min-width:var(--neeto-molecule-metadata-sidebar-width);padding:24px;width:384px;width:var(--neeto-molecule-metadata-sidebar-width)}.neeto-molecules-metadata--size-small{--neeto-molecule-metadata-sidebar-width:340px}.neeto-molecules-metadata__card{width:100%}@media screen and (min-width:1024px) and (max-width:1200px){.neeto-molecules-metadata{--neeto-molecule-metadata-sidebar-width:300px}}@media screen and (max-width:576px){.neeto-molecules-metadata{padding-top:48px}}.neeto-molecules-metadata-list-panel__toggler{display:none!important;flex-shrink:0;position:absolute;right:calc(100% + 8px);top:8px}.neeto-molecules-metadata-list-panel__toggler .neeto-ui-btn__icon{transform:rotate(180deg)}@media screen and (max-width:1024px){.neeto-molecules-metadata-list-panel__toggler{display:inline-flex!important}}@media screen and (max-width:576px){.neeto-molecules-metadata-list-panel__toggler{right:8px}}.neeto-molecules-metadata-panel__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:51}@media screen and (min-width:576px) and (max-width:1024px){.neeto-molecules-metadata-panel__backdrop{display:block;visibility:visible}}@media screen and (min-width:576px) and (max-width:1200px){.neeto-molecules-metadata-panel__backdrop--extended{display:block;visibility:visible}}.break-anywhere{overflow-wrap:anywhere}";
n(css,{});

var Metadata = function Metadata(_ref) {
  var headerBlock = _ref.headerBlock,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? SIZES.medium : _ref$size,
    children = _ref.children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className;
  var _useBreakpoints = useBreakpoints(),
    isSize = _useBreakpoints.isSize;
  var isLargerScreen = isSize("desktop") || isSize("largeDesktop");
  var _useState = useState(!isLargerScreen),
    _useState2 = _slicedToArray(_useState, 2),
    isElementsPanelCollapsed = _useState2[0],
    setIsElementsPanelCollapsed = _useState2[1];
  useEffect(function () {
    setIsElementsPanelCollapsed(!isLargerScreen);
  }, [isLargerScreen]);
  return /*#__PURE__*/jsxs(Fragment$1, {
    children: [!isElementsPanelCollapsed && /*#__PURE__*/jsx("div", {
      className: "neeto-molecules-metadata-panel__backdrop",
      onClick: function onClick() {
        setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
      }
    }), /*#__PURE__*/jsxs("div", {
      className: classnames("neeto-molecules-metadata-list-panel__wrapper", {
        "neeto-molecules-metadata-list-panel__wrapper--collapsed": isElementsPanelCollapsed
      }),
      children: [/*#__PURE__*/jsx("div", {
        className: "neeto-molecules-metadata-list-panel__container",
        children: /*#__PURE__*/jsxs("div", {
          "data-cy": "neeto-molecules-metadata-wrapper",
          "data-testid": "metadata-wrapper",
          className: classnames("neeto-ui-bg-white neeto-molecules-metadata neeto-ui-border-gray-200 h-dvh flex-shrink-0 overflow-y-auto overflow-x-hidden border-l", {
            "neeto-molecules-metadata--size-large": size === SIZES.medium,
            "neeto-molecules-metadata--size-small": size === SIZES.small
          }, className),
          children: [headerBlock && /*#__PURE__*/jsx("div", {
            className: "neeto-molecules-metadata__header mb-5 flex w-full justify-center",
            "data-cy": "neeto-molecules-metadata-header",
            "data-testid": "metadata-header",
            children: headerBlock
          }), children]
        })
      }), /*#__PURE__*/jsx(Button, {
        className: "neeto-molecules-metadata-list-panel__toggler",
        icon: Collapse,
        style: "secondary",
        onClick: function onClick() {
          setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
        }
      })]
    })]
  });
};
Metadata.Block = Block;
Metadata.DetailsBlock = DetailsBlock;

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