"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DataCard = void 0;
var _Tooltip2 = _interopRequireDefault(require("@mui/material/Tooltip"));
var _Checkbox2 = _interopRequireDefault(require("@mui/material/Checkbox"));
var _IconButton2 = _interopRequireDefault(require("@mui/material/IconButton"));
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _react = require("react");
var _Card = require("../../Card.cjs");
var _i18n = require("../../i18n.generated/i18n.cjs");
var _ChevronDown = require("../../icons.generated/ChevronDown.cjs");
var _ChevronUp = require("../../icons.generated/ChevronUp.cjs");
var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/*!
 * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */

const CheckboxContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`
}));
const AccessoryPlaceholder = (0, _styled.default)(_IconButton2.default)(() => ({
  visibility: "hidden"
}));
const DataCard = ({
  children,
  description,
  detailPanel,
  hasSelection,
  image,
  isSelected,
  onSelectionChange,
  overline,
  title,
  variant,
  menuButtonChildren
}) => {
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const {
    t
  } = (0, _i18n.useTranslation)();
  const titleId = (0, _react.useId)();
  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
  const SelectionCheckbox = (0, _react.useMemo)(() => (0, _jsxRuntime.jsx)(CheckboxContainer, {
    odysseyDesignTokens: odysseyDesignTokens,
    children: (0, _jsxRuntime.jsx)(_Checkbox2.default, {
      checked: isSelected,
      inputProps: {
        "aria-labelledby": titleId
      },
      onChange: onSelectionChange
    })
  }), [isSelected, odysseyDesignTokens, onSelectionChange, titleId]);
  const ExpansionToggle = (0, _react.useMemo)(() => {
    return detailPanel ? (0, _jsxRuntime.jsx)(_Tooltip2.default, {
      title: isExpanded ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
      children: (0, _jsxRuntime.jsx)(_IconButton2.default, {
        "aria-label": isExpanded ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
        children: isExpanded ? (0, _jsxRuntime.jsx)(_ChevronUp.ChevronUpIcon, {}) : (0, _jsxRuntime.jsx)(_ChevronDown.ChevronDownIcon, {}),
        onClick: () => setIsExpanded(!isExpanded)
      })
    }) : (0, _jsxRuntime.jsx)(AccessoryPlaceholder, {
      disabled: true,
      children: (0, _jsxRuntime.jsx)(_ChevronDown.ChevronDownIcon, {})
    });
  }, [isExpanded, detailPanel, t]);
  const Accessory = (0, _react.useMemo)(() => {
    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [hasSelection && SelectionCheckbox, ExpansionToggle]
    });
  }, [ExpansionToggle, SelectionCheckbox, hasSelection]);
  return (0, _jsxRuntime.jsx)(_Card.Card, {
    __role: "listitem",
    accessory: Accessory,
    children: children,
    description: description,
    detailPanel: isExpanded && detailPanel,
    image: image,
    menuButtonChildren: menuButtonChildren,
    overline: overline,
    title: title,
    titleId: titleId,
    variant: variant
  });
};
const MemoizedDataCard = exports.DataCard = (0, _react.memo)(DataCard);
MemoizedDataCard.displayName = "DataCard";
//# sourceMappingURL=DataCard.cjs.map