var _th, _th2, _th3, _th4, _a, _a2;
/* eslint-disable react/no-danger */
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import { useTranslate } from "../../i18n/index.js";
import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/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
}) => ({
  // Override docs/src/modules/components/MarkdownElement styles
  '&&': {
    display: 'table',
    width: '100%'
  },
  '& .type-column': {
    minWidth: '20%'
  },
  '& .default-column': {
    minWidth: '20%'
  },
  '& .MuiApi-table-item-title': {
    minWidth: '20%',
    fontFamily: theme.typography.fontFamilyCode,
    fontWeight: theme.typography.fontWeightSemiBold,
    fontSize: theme.typography.pxToRem(13),
    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
  },
  '& .MuiApi-table-item-type': {
    ...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]})`
  },
  '& .MuiApi-table-item-signature-type': {
    textDecoration: 'underline',
    textDecorationStyle: 'dotted',
    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
    fontWeight: theme.typography.fontWeightMedium,
    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
    '&:hover': {
      textDecorationColor: 'inherit'
    },
    cursor: 'help'
  },
  '& .MuiApi-table-item-default': {
    ...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: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
    backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`
  },
  '& .MuiPropTable-description-column': {
    width: '40%',
    paddingRight: 8,
    '& .prop-table-description': {
      marginBottom: 0
    },
    '& .prop-table-additional-description': {
      marginTop: 12,
      marginBottom: 0
    },
    '& .prop-table-alert': {
      '& .MuiAlert-icon': {
        margin: 0
      }
    }
  },
  '& .prop-table-signature': {
    marginTop: 12,
    marginBottom: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    '& .prop-table-title': {
      fontWeight: theme.typography.fontWeightMedium
    }
  }
}), ({
  theme
}) => ({
  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
    '& .MuiApi-table-item-title': {
      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
    },
    '& .MuiApi-table-item-type': {
      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
      backgroundColor: alpha(darkTheme.palette.primary[900], 0.3)
    },
    '& .MuiApi-table-item-signature-type': {
      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
      textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6)
    },
    '& .MuiApi-table-item-default': {
      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
      backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
    },
    '& .prop-table-signature': {
      '& .prop-table-title': {
        color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`
      }
    }
  }
}));
function PropDescription({
  description
}) {
  const isUlPresent = description.includes('<ul>');
  const ComponentToRender = isUlPresent ? 'div' : 'p';
  return /*#__PURE__*/_jsx(ComponentToRender, {
    className: "prop-table-description" // This className is used by Algolia
    ,
    dangerouslySetInnerHTML: {
      __html: description
    }
  });
}
export default function PropertiesTable(props) {
  const {
    properties
  } = props;
  const hasDefaultColumn = properties.some(item => item.propDefault !== undefined);
  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: 'Name'
          })), _th2 || (_th2 = /*#__PURE__*/_jsx("th", {
            children: 'Type'
          })), hasDefaultColumn && (_th3 || (_th3 = /*#__PURE__*/_jsx("th", {
            children: 'Default'
          }))), _th4 || (_th4 = /*#__PURE__*/_jsx("th", {
            children: 'Description'
          }))]
        })
      }), /*#__PURE__*/_jsx("tbody", {
        children: properties.map(params => {
          const {
            propName,
            description,
            seeMoreDescription,
            requiresRef,
            isOptional,
            isRequired,
            isProPlan,
            isPremiumPlan,
            isDeprecated,
            deprecationInfo,
            typeName,
            propDefault,
            additionalInfo,
            signature,
            signatureArgs,
            signatureReturnDescription,
            hash
          } = params;
          return /*#__PURE__*/_jsxs("tr", {
            id: hash,
            children: [/*#__PURE__*/_jsxs("td", {
              className: "MuiApi-table-item-title algolia-lvl3",
              children: [propName, isRequired ? '*' : '', isOptional ? '?' : '', isProPlan && (_a || (_a = /*#__PURE__*/_jsx("a", {
                href: "/x/introduction/licensing/#pro-plan",
                "aria-label": "Pro plan",
                children: /*#__PURE__*/_jsx("span", {
                  className: "plan-pro"
                })
              }))), isPremiumPlan && (_a2 || (_a2 = /*#__PURE__*/_jsx("a", {
                href: "/x/introduction/licensing/#premium-plan",
                "aria-label": "Premium plan",
                children: /*#__PURE__*/_jsx("span", {
                  className: "plan-premium"
                })
              })))]
            }), /*#__PURE__*/_jsx("td", {
              className: "type-column",
              children: /*#__PURE__*/_jsx("span", {
                className: "MuiApi-table-item-type",
                dangerouslySetInnerHTML: {
                  __html: typeName
                }
              })
            }), hasDefaultColumn && /*#__PURE__*/_jsx("td", {
              className: "default-column",
              children: propDefault ? /*#__PURE__*/_jsx("span", {
                className: "MuiApi-table-item-default",
                children: propDefault
              }) : '-'
            }), /*#__PURE__*/_jsxs("td", {
              className: "MuiPropTable-description-column algolia-content",
              children: [description && /*#__PURE__*/_jsx(PropDescription, {
                description: description
              }), seeMoreDescription && /*#__PURE__*/_jsx("p", {
                dangerouslySetInnerHTML: {
                  __html: seeMoreDescription
                },
                className: "prop-table-additional-description"
              }), additionalInfo?.map(key => /*#__PURE__*/_jsx("p", {
                className: "prop-table-additional-description",
                dangerouslySetInnerHTML: {
                  __html: t(`api-docs.additional-info.${key}`)
                }
              }, key)), requiresRef && /*#__PURE__*/_jsx(ApiWarningAlert, {
                className: "prop-table-alert",
                children: /*#__PURE__*/_jsx("div", {
                  dangerouslySetInnerHTML: {
                    __html: t('api-docs.requires-ref')
                  }
                })
              }), 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
                    }
                  })]
                })]
              }), signature && /*#__PURE__*/_jsxs("div", {
                className: "prop-table-signature",
                children: [/*#__PURE__*/_jsxs("span", {
                  className: "prop-table-title",
                  children: [t('api-docs.signature'), ":"]
                }), /*#__PURE__*/_jsx("code", {
                  children: signature
                }), signatureArgs && /*#__PURE__*/_jsx("div", {
                  children: /*#__PURE__*/_jsx("ul", {
                    children: signatureArgs.map(({
                      argName,
                      argDescription,
                      argType,
                      argTypeDescription
                    }) => /*#__PURE__*/_jsxs("li", {
                      className: "prop-signature-list",
                      children: [/*#__PURE__*/_jsxs("code", {
                        children: [argName, argType && argTypeDescription && /*#__PURE__*/_jsx(Tooltip, {
                          title: /*#__PURE__*/_jsx("span", {
                            dangerouslySetInnerHTML: {
                              __html: argTypeDescription
                            }
                          }),
                          children: /*#__PURE__*/_jsxs("span", {
                            children: [":", ' ', /*#__PURE__*/_jsx("span", {
                              className: "MuiApi-table-item-signature-type",
                              children: argType
                            })]
                          })
                        })]
                      }), ' ', argDescription && /*#__PURE__*/_jsx("span", {
                        dangerouslySetInnerHTML: {
                          __html: argDescription
                        }
                      })]
                    }, argName))
                  })
                }), signatureReturnDescription && /*#__PURE__*/_jsxs("p", {
                  children: [t('api-docs.returns'), /*#__PURE__*/_jsx("span", {
                    dangerouslySetInnerHTML: {
                      __html: signatureReturnDescription
                    }
                  })]
                })]
              })]
            })]
          }, propName);
        })
      })]
    })
  });
}