import e,{useEffect as p,useState as c}from"react";import i from"styled-components";import{renderRowSubComponent as s}from"../components";import{fetchDetailedScorecard as u}from"../useDetailedScorecard.js";import{getProblemsByRule as b}from"../utils.js";const y=({row:o,slug:t})=>o.getIsExpanded()?e.createElement(x,{gridColumn:"1 / -1"},e.createElement(f,null,e.createElement(g,{row:o,slug:t}))):null,g=({row:o,slug:t})=>{const d=o.original?.link&&t,[a,l]=c(o.subRows||[]);return p(()=>{d&&u(o.original?.link).then(r=>b(r,t)).then(r=>r.map((n,m)=>({id:String(m),original:n}))).then(r=>l(r))},[d]),e.createElement(e.Fragment,null,a.map(({original:r,id:n})=>e.createElement(R,{key:n},s(r))))},x=i.div`
  width: 100%;
  grid-column: ${o=>o.gridColumn};
  margin-bottom: 8px;
  padding: 0 15px;
`,f=i.div`
  background-color: var(--bg-color-secondary);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 5px 15px;
  border-left: 4px solid var(--border-color-primary);
`,R=i.div`
  padding: 8px 0;
  width: fit-content;

  &:not(:last-child) {
    border-bottom: 1px solid var(--border-color-primary);
    padding-bottom: 16px;
    margin-bottom: 8px;
  }
`;export{y as GridExpandedRow};
