import { alpha, styled } from '@mui/material/styles';
import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
import { useTranslate } from "../../i18n/index.js";
import { ApiItemContainer, ExpandableApiItem } from "./ExpandableApiItem.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const StyledApiItem = styled(ExpandableApiItem)(({
  theme
}) => ({
  '.slot-classname, .slot-default-element': {
    marginBottom: 8,
    '& .prop-list-title': {
      ...theme.typography.body2,
      fontWeight: theme.typography.fontWeightSemiBold,
      color: (theme.vars || theme).palette.text.primary
    }
  },
  '& .default-slot-value': {
    ...theme.typography.caption,
    fontFamily: theme.typography.fontFamilyCode,
    fontWeight: theme.typography.fontWeightRegular
  },
  '& .global-class-value': {
    ...theme.typography.caption,
    fontFamily: theme.typography.fontFamilyCode,
    fontWeight: theme.typography.fontWeightRegular,
    borderColor: alpha(darkTheme.palette.primary[100], 0.5),
    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
  }
}), ({
  theme
}) => ({
  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
    '& .global-class-value': {
      borderColor: alpha(darkTheme.palette.primary[400], 0.1),
      backgroundColor: alpha(darkTheme.palette.primary[900], 0.4)
    }
  }
}));
export default function SlotsList(props) {
  const {
    slots,
    displayOption
  } = props;
  const t = useTranslate();
  return /*#__PURE__*/_jsx(ApiItemContainer, {
    className: "MuiApi-slot-list",
    children: slots.map(params => {
      const {
        description,
        className,
        name,
        defaultValue,
        hash
      } = params;
      const isExtendable = description || defaultValue || className;
      return /*#__PURE__*/_jsxs(StyledApiItem, {
        id: hash,
        title: name,
        note: "",
        type: "slots",
        isExtendable: !!isExtendable,
        displayOption: displayOption,
        children: [description && /*#__PURE__*/_jsx("p", {
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML: {
            __html: description
          }
        }), className && /*#__PURE__*/_jsxs("p", {
          className: "slot-classname",
          children: [/*#__PURE__*/_jsxs("span", {
            className: "prop-list-title",
            children: [t('api-docs.className'), ":"]
          }), ' ', /*#__PURE__*/_jsx("code", {
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML: {
              __html: `.${className}`
            },
            className: "global-class-value"
          })]
        }), defaultValue && /*#__PURE__*/_jsxs("p", {
          className: "slot-default-element",
          children: [/*#__PURE__*/_jsxs("span", {
            className: "prop-list-title",
            children: [t('api-docs.defaultComponent'), ":"]
          }), ' ', /*#__PURE__*/_jsx("code", {
            className: "default-slot-value",
            children: defaultValue
          })]
        })]
      }, name);
    })
  });
}