import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import styled,{css}from"styled-components";import{memo,useEffect,useState}from"react";import{isUndefined}from"@redocly/theme";import{cycleColorsByLevel}from"../PropertyDetails/cycleColorsByLevel";import{CircleIcon}from"../PropertyDetails/PlusCircleIcon";function ViewNestedComponent({expandByDefault:e,isExpandedFromParent:r,level:o,expandable:t=!1,expandText:s,hideText:i,hideDivider:n=!1,onChange:d,children:a}){const[l,c]=useState(e);useEffect((()=>{t&&!isUndefined(r)&&c(r)}),[r,t]);const p=l?cycleColorsByLevel(o):void 0;if(!t)return a;return _jsxs(Wrapper,{$divider:!n&&!l,className:"view-nested-wrapper",children:[_jsxs(ShowProperty,{onClick:()=>{c((e=>!e)),d&&d()},children:[_jsx(CircleIcon,{sign:l?"-":"+",color:p}),!l&&s,l&&(i||"")]}),l&&_jsx(StyledNested,{color:p,children:a})]})}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-top: var(--spacing-xxs);
  width: 100%;
`,StyledNested=styled.div`
  padding-left: var(--schema-nested-offset);
  border-left: 1px solid ${({color:e})=>e||"var(--border-color-primary)"};
  margin: -10px 0 0 9px;
  ${({color:e})=>e&&css`
      .schema-name {
        color: ${e};
      }
    `}
`,Wrapper=styled.div`
  width: 100%;
  ${({$divider:e})=>e&&css`
      border-bottom: 1px solid var(--border-color-primary);
      padding-bottom: var(--schema-property-details-spacing);
    `}
`;
//# sourceMappingURL=ViewNested.js.map