var _br;
/* eslint-disable react/no-danger */
import * as React from 'react';
import Box from '@mui/material/Box';
import { SectionTitle } from "../../SectionTitle/index.js";
import { useTranslate } from "../../i18n/index.js";
import { ToggleDisplayOption, useApiPageOption } from "./ToggleDisplayOption.js";
import { getClassApiDefinitions } from "../definitions/classes.js";
import ClassesTable from "../table/ClassesTable.js";
import ClassesList from "../list/ClassesList.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function ClassesSection(props) {
  const {
    classes,
    componentClasses,
    classDescriptions,
    componentName,
    spreadHint,
    title = 'api-docs.classes',
    titleHash = 'classes',
    level = 'h2',
    displayClassKeys,
    styleOverridesLink,
    defaultLayout,
    layoutStorageKey
  } = props;
  const t = useTranslate();
  const [displayOption, setDisplayOption] = useApiPageOption(layoutStorageKey, defaultLayout);
  const formattedClasses = classes || getClassApiDefinitions({
    componentClasses,
    classDescriptions,
    componentName
  });
  if (!formattedClasses || formattedClasses.length === 0) {
    return null;
  }
  return /*#__PURE__*/_jsxs(React.Fragment, {
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        alignItems: 'baseline',
        mb: 1
      },
      children: [/*#__PURE__*/_jsx(SectionTitle, {
        title: t(title),
        hash: titleHash,
        level: level
      }), /*#__PURE__*/_jsx(ToggleDisplayOption, {
        displayOption: displayOption,
        setDisplayOption: setDisplayOption,
        sectionType: "classes"
      })]
    }), spreadHint && /*#__PURE__*/_jsx("p", {
      dangerouslySetInnerHTML: {
        __html: spreadHint
      }
    }), displayOption === 'table' ? /*#__PURE__*/_jsx(ClassesTable, {
      classes: formattedClasses,
      displayClassKeys: displayClassKeys
    }) : /*#__PURE__*/_jsx(ClassesList, {
      classes: formattedClasses,
      displayOption: displayOption,
      displayClassKeys: displayClassKeys
    }), styleOverridesLink && /*#__PURE__*/_jsxs(React.Fragment, {
      children: [_br || (_br = /*#__PURE__*/_jsx("br", {})), /*#__PURE__*/_jsx("p", {
        dangerouslySetInnerHTML: {
          __html: t('api-docs.overrideStyles')
        }
      }), /*#__PURE__*/_jsx("div", {
        dangerouslySetInnerHTML: {
          __html: t('api-docs.overrideStylesStyledComponent').replace(/{{styleOverridesLink}}/, styleOverridesLink)
        }
      })]
    })]
  });
}