import _Tooltip from "@mui/material/Tooltip";
import _Checkbox from "@mui/material/Checkbox";
import _IconButton from "@mui/material/IconButton";
/*!
 * 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.
 */

import styled from "@emotion/styled";
import { memo, useId, useMemo, useState } from "react";
import { Card } from "../../Card.js";
import { useTranslation } from "../../i18n.generated/i18n.js";
import { ChevronDownIcon } from "../../icons.generated/ChevronDown.js";
import { ChevronUpIcon } from "../../icons.generated/ChevronUp.js";
import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const CheckboxContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  marginBlockStart: `-${odysseyDesignTokens.Spacing1}`
}));
const AccessoryPlaceholder = styled(_IconButton)(() => ({
  visibility: "hidden"
}));
const DataCard = ({
  children,
  description,
  detailPanel,
  hasSelection,
  image,
  isSelected,
  onSelectionChange,
  overline,
  title,
  variant,
  menuButtonChildren
}) => {
  const odysseyDesignTokens = useOdysseyDesignTokens();
  const {
    t
  } = useTranslation();
  const titleId = useId();
  const [isExpanded, setIsExpanded] = useState(false);
  const SelectionCheckbox = useMemo(() => _jsx(CheckboxContainer, {
    odysseyDesignTokens: odysseyDesignTokens,
    children: _jsx(_Checkbox, {
      checked: isSelected,
      inputProps: {
        "aria-labelledby": titleId
      },
      onChange: onSelectionChange
    })
  }), [isSelected, odysseyDesignTokens, onSelectionChange, titleId]);
  const ExpansionToggle = useMemo(() => {
    return detailPanel ? _jsx(_Tooltip, {
      title: isExpanded ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
      children: _jsx(_IconButton, {
        "aria-label": isExpanded ? t("table.rowexpansion.collapse") : t("table.rowexpansion.expand"),
        children: isExpanded ? _jsx(ChevronUpIcon, {}) : _jsx(ChevronDownIcon, {}),
        onClick: () => setIsExpanded(!isExpanded)
      })
    }) : _jsx(AccessoryPlaceholder, {
      disabled: true,
      children: _jsx(ChevronDownIcon, {})
    });
  }, [isExpanded, detailPanel, t]);
  const Accessory = useMemo(() => {
    return _jsxs(_Fragment, {
      children: [hasSelection && SelectionCheckbox, ExpansionToggle]
    });
  }, [ExpansionToggle, SelectionCheckbox, hasSelection]);
  return _jsx(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 = memo(DataCard);
MemoizedDataCard.displayName = "DataCard";
export { MemoizedDataCard as DataCard };
//# sourceMappingURL=DataCard.js.map