import i from"react";import{flexRender as m}from"@tanstack/react-table";import l from"styled-components";import{GridExpandedRow as u}from"./GridExpandedRow";const w=e=>{const{variant:c,gridTemplateColumns:d}=e;switch(c){case"virtualized":{const{virtualRow:r,virtualizer:o,row:t,slug:g}=e;return i.createElement(x,{ref:o.measureElement,"data-index":r.index,style:{transform:`translateY(${r.start}px)`},gridTemplateColumns:d,isExpandable:t.getCanExpand(),role:"row"},t.getVisibleCells().map((a,n)=>i.createElement(p,{key:a.id,gridColumn:n+1,isFirstColumn:n===0,isExpandable:n===0&&t.getCanExpand(),role:"cell"},m(a.column.columnDef.cell,a.getContext()))),i.createElement(u,{row:t,slug:g}))}case"ssr":{const{row:r}=e;return i.createElement(s,{gridTemplateColumns:d,isExpandable:r.getCanExpand()},r.getVisibleCells().map((o,t)=>i.createElement(p,{key:o.id,gridColumn:t+1,isFirstColumn:t===0,isExpandable:t===0&&r.getCanExpand(),role:"cell"},m(o.column.columnDef.cell,o.getContext()))))}case"noData":{const{empty:r,gridTemplateColumns:o}=e;return i.createElement(s,{gridTemplateColumns:o,isExpandable:!1},i.createElement(C,{gridColumn:"1 / -1"},r||"No results to show"))}}},x=l.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 775px;
  contain: layout;
  will-change: transform;
  border-bottom: 1px solid var(--border-color-primary);
  border-left: 1px solid var(--border-color-primary);
  border-right: 1px solid var(--border-color-primary);
  display: grid;
  grid-template-columns: ${e=>e.gridTemplateColumns};
  align-items: center;
`,s=l.div`
  width: 100%;
  min-width: 775px;
  border-bottom: 1px solid var(--border-color-primary);
  border-left: 1px solid var(--border-color-primary);
  border-right: 1px solid var(--border-color-primary);
  display: grid;
  grid-template-columns: ${e=>e.gridTemplateColumns};
  align-items: center;
`,p=l.div`
  padding: 5px 15px;
  text-align: left;
  grid-column: ${e=>e.gridColumn};

  ${e=>e.isFirstColumn&&e.isExpandable&&`
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    & > div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
    }
  `}
`,C=l.div`
  text-align: center !important;
  padding: 32px;
  grid-column: ${e=>e.gridColumn};
`;export{w as GridRow};
