var _a, _a2;
/* eslint-disable react/no-danger */
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
import { useTranslate } from "../../i18n/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
}) => ({
  '& .prop-list-description': {
    marginBottom: 10
  },
  '& .prop-list-additional-info': {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    '& > p': {
      margin: 0
    },
    '& .prop-list-title': {
      ...theme.typography.body2,
      fontWeight: theme.typography.fontWeightSemiBold,
      color: (theme.vars || theme).palette.text.primary,
      paddingRight: 5,
      whiteSpace: 'nowrap',
      margin: 0
    },
    '& .default-value': {
      fontSize: theme.typography.pxToRem(12)
    }
  },
  '&.prop-list-deprecated-item': {
    '& .MuiApi-item-note': {
      color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`
    }
  },
  '& .prop-list-alert': {
    marginBottom: 16,
    '& .MuiAlert-icon': {
      margin: 0
    }
  },
  '& .prop-list-default-props': {
    ...theme.typography.body2,
    fontWeight: theme.typography.fontWeightSemiBold
  },
  '& .prop-list-signature': {
    p: {
      ...theme.typography.body2,
      fontWeight: theme.typography.fontWeightSemiBold,
      marginBottom: 8
    },
    ul: {
      paddingLeft: 24,
      marginTop: 2,
      marginBottom: 0
    },
    '& > code': {
      borderRadius: 8,
      padding: 12,
      width: '100%',
      marginBottom: 8,
      color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[50]})`,
      border: '1px solid',
      borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
      backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`
    }
  }
}), ({
  theme
}) => ({
  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
    '& .prop-list-additional-info': {
      '& .prop-list-title': {
        p: {
          color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`
        }
      }
    },
    '& .prop-list-default-props': {
      color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`
    },
    '&.prop-list-deprecated-item': {
      '& .MuiApi-item-note': {
        color: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`
      }
    }
  }
}));
function PropDescription(props) {
  const {
    description
  } = props;
  const isUlPresent = description.includes('<ul>');
  const ComponentToRender = isUlPresent ? 'div' : 'p';
  return /*#__PURE__*/_jsx(ComponentToRender, {
    className: "prop-list-description algolia-content" // This className is used by Algolia
    ,
    dangerouslySetInnerHTML: {
      __html: description
    }
  });
}
export default function PropertiesList(props) {
  const {
    properties,
    displayOption
  } = props;
  const t = useTranslate();
  return /*#__PURE__*/_jsx(ApiItemContainer, {
    children: properties.map(params => {
      const {
        propName,
        seeMoreDescription,
        description,
        requiresRef,
        isOptional,
        isRequired,
        isDeprecated,
        isProPlan,
        isPremiumPlan,
        deprecationInfo,
        typeName,
        propDefault,
        additionalInfo,
        signature,
        signatureArgs,
        signatureReturnDescription,
        hash
      } = params;
      let note = isOptional && t('api-docs.optional') || isRequired && t('api-docs.required') || '';
      if (isDeprecated) {
        note = [note, t('api-docs.deprecated')].filter(Boolean).join(' - ');
      }
      return /*#__PURE__*/_jsxs(StyledApiItem, {
        id: hash,
        title: /*#__PURE__*/_jsxs(React.Fragment, {
          children: [propName, 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"
            })
          })))]
        }),
        note: note,
        type: "props",
        displayOption: displayOption,
        className: isDeprecated ? 'prop-list-deprecated-item' : '',
        children: [description && /*#__PURE__*/_jsx(PropDescription, {
          description: description
        }), seeMoreDescription && /*#__PURE__*/_jsx("p", {
          dangerouslySetInnerHTML: {
            __html: seeMoreDescription
          }
        }), requiresRef && /*#__PURE__*/_jsx(ApiWarningAlert, {
          className: "MuiApi-collapsible prop-list-alert",
          children: /*#__PURE__*/_jsx("div", {
            dangerouslySetInnerHTML: {
              __html: t('api-docs.requires-ref')
            }
          })
        }), additionalInfo?.map(key => /*#__PURE__*/_jsx("p", {
          className: "prop-list-additional-description  MuiApi-collapsible",
          dangerouslySetInnerHTML: {
            __html: t(`api-docs.additional-info.${key}`)
          }
        }, key)), /*#__PURE__*/_jsxs("div", {
          className: "prop-list-additional-info",
          children: [typeName && /*#__PURE__*/_jsxs("p", {
            className: "prop-list-type MuiApi-collapsible",
            children: [/*#__PURE__*/_jsxs("span", {
              className: "prop-list-title",
              children: [t('api-docs.type'), ":"]
            }), /*#__PURE__*/_jsx("code", {
              className: "Api-code",
              dangerouslySetInnerHTML: {
                __html: typeName
              }
            })]
          }), propDefault && /*#__PURE__*/_jsxs("p", {
            className: "prop-list-default-props MuiApi-collapsible",
            children: [/*#__PURE__*/_jsxs("span", {
              className: "prop-list-title",
              children: [t('api-docs.default'), ":"]
            }), /*#__PURE__*/_jsx("code", {
              className: "default-value",
              children: propDefault
            })]
          }), signature && /*#__PURE__*/_jsxs("div", {
            className: "prop-list-signature MuiApi-collapsible",
            children: [/*#__PURE__*/_jsxs("span", {
              className: "prop-list-title",
              children: [t('api-docs.signature'), ":"]
            }), /*#__PURE__*/_jsxs("div", {
              className: "prop-list-content",
              children: [/*#__PURE__*/_jsx("code", {
                dangerouslySetInnerHTML: {
                  __html: signature
                }
              }), signatureArgs && /*#__PURE__*/_jsx("div", {
                children: /*#__PURE__*/_jsx("ul", {
                  children: signatureArgs.map(({
                    argName,
                    argDescription,
                    argType,
                    argTypeDescription
                  }) => /*#__PURE__*/_jsxs("li", {
                    children: [/*#__PURE__*/_jsxs("code", {
                      children: [argName, argType && argTypeDescription && /*#__PURE__*/_jsxs("span", {
                        children: [":", ' ', /*#__PURE__*/_jsx(Tooltip, {
                          title: /*#__PURE__*/_jsx("span", {
                            dangerouslySetInnerHTML: {
                              __html: argTypeDescription
                            }
                          }),
                          children: /*#__PURE__*/_jsx("span", {
                            className: "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
                  }
                })]
              })]
            })]
          })]
        }), 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
              }
            })]
          })]
        })]
      }, propName);
    })
  });
}