var _th, _th2, _th3;
/* eslint-disable react/no-danger */
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
import { useTranslate } from "../../i18n/index.js";
import { StyledTableContainer } from "./StyledTableContainer.js";
import { ApiWarningAlert } from "../ApiWarningAlert.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const StyledTable = styled('table')(({
  theme
}) => ({
  textAlign: 'left',
  // Override docs/src/modules/components/MarkdownElement styles
  '&&': {
    display: 'table',
    width: '100%'
  },
  '& .class-name': {
    flexShrink: 0,
    fontWeight: theme.typography.fontWeightSemiBold,
    fontFamily: theme.typography.fontFamilyCode,
    fontSize: theme.typography.pxToRem(13),
    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
  },
  '& .class-key': {
    ...theme.typography.caption,
    fontFamily: theme.typography.fontFamilyCode,
    fontWeight: theme.typography.fontWeightRegular,
    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
    padding: '1px 4px',
    borderRadius: 6,
    border: '1px solid',
    borderColor: alpha(darkTheme.palette.primary[100], 0.8),
    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
  }
}), ({
  theme
}) => ({
  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
    '& .class-name': {
      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
    },
    '& .class-key': {
      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
      borderColor: alpha(darkTheme.palette.primary[400], 0.1),
      backgroundColor: alpha(darkTheme.palette.primary[900], 0.4)
    }
  }
}));
export default function ClassesTable(props) {
  const {
    classes,
    displayClassKeys
  } = props;
  const t = useTranslate();
  return /*#__PURE__*/_jsx(StyledTableContainer, {
    children: /*#__PURE__*/_jsxs(StyledTable, {
      children: [/*#__PURE__*/_jsx("thead", {
        children: /*#__PURE__*/_jsxs("tr", {
          children: [_th || (_th = /*#__PURE__*/_jsx("th", {
            children: 'Class name'
          })), displayClassKeys && (_th2 || (_th2 = /*#__PURE__*/_jsx("th", {
            children: 'Rule name'
          }))), _th3 || (_th3 = /*#__PURE__*/_jsx("th", {
            children: 'Description'
          }))]
        })
      }), /*#__PURE__*/_jsx("tbody", {
        children: classes.map(params => {
          const {
            className,
            hash,
            key,
            description,
            isGlobal,
            isDeprecated,
            deprecationInfo
          } = params;
          return /*#__PURE__*/_jsxs("tr", {
            id: hash,
            children: [/*#__PURE__*/_jsx("td", {
              className: "algolia-lvl3",
              children: /*#__PURE__*/_jsxs("span", {
                className: "class-name",
                children: [".", className]
              })
            }), displayClassKeys && /*#__PURE__*/_jsx("td", {
              children: !isGlobal && /*#__PURE__*/_jsx("span", {
                className: "class-key",
                children: key
              })
            }), /*#__PURE__*/_jsxs("td", {
              className: "algolia-content",
              children: [/*#__PURE__*/_jsx("span", {
                dangerouslySetInnerHTML: {
                  __html: description || ''
                }
              }), isDeprecated && /*#__PURE__*/_jsxs(ApiWarningAlert, {
                children: [/*#__PURE__*/_jsx("b", {
                  children: t('api-docs.deprecated')
                }), deprecationInfo && /*#__PURE__*/_jsxs(React.Fragment, {
                  children: ['－', /*#__PURE__*/_jsx("span", {
                    dangerouslySetInnerHTML: {
                      __html: deprecationInfo
                    }
                  })]
                })]
              })]
            })]
          }, className);
        })
      })]
    })
  });
}