var _span;
import * as React from 'react';
import { styled } from '@mui/material/styles';
import { useTranslate } from "../../i18n/index.js";
import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
import { ApiItemContainer, ExpandableApiItem } from "./ExpandableApiItem.js";
import { ApiWarningAlert } from "../ApiWarningAlert.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const StyledApiItem = styled(ExpandableApiItem)(({
  theme
}) => ({
  '& p': {
    margin: 0
  },
  '& .prop-list-title': {
    ...theme.typography.body2,
    fontWeight: theme.typography.fontWeightSemiBold,
    color: theme.palette.text.primary,
    paddingRight: 5,
    whiteSpace: 'nowrap',
    margin: 0
  },
  '& .prop-list-class': {
    margin: 0
  },
  '&.classes-list-deprecated-item': {
    '& .MuiApi-item-note': {
      color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`
    }
  }
}), ({
  theme
}) => ({
  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
    '& .prop-list-title': {
      color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`
    },
    '&.classes-list-deprecated-item': {
      '& .MuiApi-item-note': {
        color: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`
      }
    }
  }
}));
export default function ClassesList(props) {
  const {
    classes,
    displayOption,
    displayClassKeys
  } = props;
  const t = useTranslate();
  return /*#__PURE__*/_jsx(ApiItemContainer, {
    children: classes.map(classDefinition => {
      const {
        hash,
        className,
        key,
        description,
        isGlobal,
        isDeprecated,
        deprecationInfo
      } = classDefinition;
      let note = isGlobal ? t('api-docs.state') : '';
      if (isDeprecated) {
        note = [note, t('api-docs.deprecated')].filter(Boolean).join(' - ');
      }
      return /*#__PURE__*/_jsxs(StyledApiItem, {
        id: hash,
        note: note,
        title: `.${className}`,
        type: "classes",
        displayOption: displayOption,
        isExtendable: !!description,
        className: isDeprecated ? 'classes-list-deprecated-item' : '',
        children: [description && /*#__PURE__*/_jsx("p", {
          dangerouslySetInnerHTML: {
            __html: description
          }
        }), displayClassKeys && !isGlobal && /*#__PURE__*/_jsxs("p", {
          className: "prop-list-class",
          children: [_span || (_span = /*#__PURE__*/_jsxs("span", {
            className: "prop-list-title",
            children: ['Rule name', ":"]
          })), /*#__PURE__*/_jsx("code", {
            className: "Api-code",
            children: key
          })]
        }), isDeprecated && /*#__PURE__*/_jsxs(ApiWarningAlert, {
          children: [/*#__PURE__*/_jsx("b", {
            children: t('api-docs.deprecated')
          }), deprecationInfo && /*#__PURE__*/_jsxs(React.Fragment, {
            children: ['－', /*#__PURE__*/_jsx("span", {
              /* eslint-disable-next-line react/no-danger */
              dangerouslySetInnerHTML: {
                __html: deprecationInfo
              }
            })]
          })]
        })]
      }, key);
    })
  });
}