import { describe, expect, it } from "bun:test";
import { renderToString } from "react-dom/server";
import { DataTable } from ".";
import { StoreProvider, createStore } from "../../hooks/useStore";
import { FancyValueColumn, data, type Payment } from "./DataTable.stories";

describe("datatable", () => {
  it("should pass tests", () => {
    expect(true).toBe(true);
  });
  it("should work when server rendered", () => {
    const markup = renderToString(<TestTable />);
    expect(markup).toMatchInlineSnapshot(
      `"<div data-component="DataGrid$Brevity" data-id="fake"><div class="__table-container"><table class="__table-table"><thead class="__table-thead"><tr class="__table-tr"><th class="__table-th"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R6m»" data-size="md" data-variant="solid" aria-label="Select all"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></th><th class="__table-th"><button data-sortable="true" data-active="false">Status<svg data-direction="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -960 960 960"><path class="_asc" d="M600-80L400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80z"></path><path class="_desc" d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80z"></path></svg></button></th><th class="__table-th email">Email</th><th class="__table-th"><button data-sortable="true" data-active="false">Amount<svg data-direction="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -960 960 960"><path class="_asc" d="M600-80L400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80z"></path><path class="_desc" d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80z"></path></svg></button></th><th class="__table-th">Actions</th></tr></thead><tbody class="__table-tbody"><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R136»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>success</div></td><td class="__table-td email"><div>ken99@yahoo.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>316</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R156»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>success</div></td><td class="__table-td email"><div>Abe45@gmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>242</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R176»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>processing</div></td><td class="__table-td email"><div>Monserrat44@gmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>837</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R196»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>success</div></td><td class="__table-td email"><div>Silas22@gmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>874</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R1b6»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>failed</div></td><td class="__table-td email"><div>carmella@hotmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>721</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R1d6»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>success</div></td><td class="__table-td email"><div>ken99@yahoo.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>316</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R1f6»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>success</div></td><td class="__table-td email"><div>Abe45@gmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>242</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R1h6»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>processing</div></td><td class="__table-td email"><div>Monserrat44@gmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>837</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R1j6»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>success</div></td><td class="__table-td email"><div>Silas22@gmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>874</div></td><td class="__table-td"><div><button>More</button></div></td></tr><tr data-state="false" class="__table-tr"><td class="__table-td"><button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" data-component="Checkbox$Brevity" id="«R1l6»" data-size="md" data-variant="solid" aria-label="Select row"></button><input type="checkbox" aria-hidden="true" tabindex="-1" style="position:absolute;pointer-events:none;opacity:0;margin:0;transform:translateX(-100%)" value="on"/></td><td class="__table-td"><div>failed</div></td><td class="__table-td email"><div>carmella@hotmail.com</div></td><td class="__table-td"><div><svg><path d="M 0 0 L 0 100 L 100 100 L 100 0 Z"></path></svg>721</div></td><td class="__table-td"><div><button>More</button></div></td></tr></tbody></table></div><div class="__table-pagination"><div class="__table-pagination__left">0<!-- --> of<!-- --> <!-- -->14<!-- --> row(s) selected.</div><div class="__table-pagination__right"><div class="__table-pagination__controls_left"><p>Rows per page</p><div class="__table-pagination__select"><button type="button" role="combobox" aria-controls="radix-«Rja»" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="__table-pagination__select_trigger" data-component="Select$Brevity"><span style="pointer-events:none"></span><svg class="__table-pagination__select_svg" viewBox="0 0 24 24" role="presentation" focusable="false" aria-hidden="true"><path fill="currentColor" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><div class="__table-pagination__controls_middle">Page <!-- -->1<!-- --> of<!-- --> <!-- -->2</div><div class="__table-pagination__contols_right"><button class="__table-pagination__button" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -960 960 960"><path d="M440-240L200-480l240-240 56 56-183 184 183 184-56 56zm264 0L464-480l240-240 56 56-183 184 183 184-56 56z"></path></svg><span>Go to first page</span></button><button class="__table-pagination__button" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -960 960 960"><path d="M561-240L320-481l241-241 43 43-198 198 198 198-43 43z"></path></svg><span>Go to previous page</span></button><button class="__table-pagination__button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -960 960 960"><path d="M530-481L332-679l43-43 241 241-241 241-43-43 198-198z"></path></svg><span>Go to next page</span></button><button class="__table-pagination__button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -960 960 960"><path d="M383-480L200-664l56-56 240 240-240 240-56-56 183-184zm264 0L464-664l56-56 240 240-240 240-56-56 183-184z"></path></svg><span>Go to last page</span></button></div></div></div></div>"`,
    );
  });
});

const TestTable = () => {
  const useStore = createStore({});
  return (
    <StoreProvider store={useStore}>
      <DataTable data={data} data-component="DataGrid$Brevity" data-id="fake">
        <DataTable.CheckboxColumn id="select" />
        <DataTable.ValueColumn<Payment, string>
          header="Status"
          accessorFn={(row) => row.status}
        >
          {(original) => <div>{original.status}</div>}
        </DataTable.ValueColumn>
        <FancyValueColumn />
        <DataTable.ValueColumn<Payment, number>
          header="Amount"
          accessorFn={(row) => row.amount}
        >
          {(original) => (
            <div>
              <svg>
                <path d="M 0 0 L 0 100 L 100 100 L 100 0 Z" />
              </svg>
              {original.amount}
            </div>
          )}
        </DataTable.ValueColumn>
        <DataTable.DisplayColumn<Payment, string> header="Actions">
          {(original) => (
            <div>
              <button
                onClick={() => {
                  console.log(original);
                }}
              >
                More
              </button>
            </div>
          )}
        </DataTable.DisplayColumn>
      </DataTable>
    </StoreProvider>
  );
};
