import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { css } from 'styled-components';
import { memo, useEffect, useState } from 'react';
import { isUndefined } from '@redocly/theme/core/openapi';
import { cycleColorsByLevel } from '../PropertyDetails/cycleColorsByLevel.js';
import { CircleIcon } from '../PropertyDetails/PlusCircleIcon.js';
import { LabelValue } from '../common/styled.js';
import { styled } from '../../styled-components.js';
function ViewNestedComponent({ expandByDefault, level, expandable = false, expandText, hideText, hideDivider = false, children, expandedAll, isNestedArray, }) {
    const [expanded, setExpanded] = useState((expandByDefault || isNestedArray) ?? false);
    useEffect(() => {
        if (!isUndefined(expandedAll)) {
            setExpanded(expandedAll);
        }
    }, [expandedAll]);
    const color = expanded ? cycleColorsByLevel(level) : undefined;
    if (!expandable)
        return children;
    const handleToggle = () => {
        setExpanded((prev) => !prev);
    };
    if (isNestedArray) {
        return (_jsxs(_Fragment, { children: [_jsx(LabelValue, { children: "Array [" }), _jsx(Wrapper, { "$isArrayInsideArray": isNestedArray, className: "view-nested-wrapper", children: _jsx(StyledNested, { color: color, children: children }) })] }));
    }
    return (_jsx(_Fragment, { children: _jsxs(Wrapper, { "$divider": !hideDivider && !expanded, className: "view-nested-wrapper", children: [_jsxs(ShowProperty, { onClick: handleToggle, children: [_jsx(CircleIcon, { sign: expanded ? '-' : '+', color: color }), !expanded && expandText, expanded && (hideText || '')] }), expanded && _jsx(StyledNested, { color: color, children: children })] }) }));
}
export const ViewNested = memo(ViewNestedComponent);
const ShowProperty = styled.button `
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  gap: var(--spacing-xxs);
  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  margin: var(--spacing-xxs) 0 var(--spacing-xs);
  width: 100%;
`;
const StyledNested = styled.div `
  padding-left: var(--schema-nested-offset);
  border-left: 1px solid ${({ color }) => color || 'var(--border-color-primary)'};
  margin: -10px 0 0 9px;
  ${({ color }) => color &&
    css `
      .schema-name {
        color: ${color};
      }
    `}
`;
const Wrapper = styled.div `
  width: 100%;
  ${({ $isArrayInsideArray }) => $isArrayInsideArray &&
    css `
      padding-top: var(--schema-property-details-spacing);
    `}

  ${({ $divider }) => $divider &&
    css `
      border-bottom: 1px solid var(--border-color-primary);
      padding-bottom: var(--schema-property-details-spacing);
    `}
`;
//# sourceMappingURL=ViewNested.js.map