import { render, fireEvent } from "@testing-library/react";
import SortableTable from "./SortableTable";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";

const columns = [
  {
    field: "title",
    header: "Title",
  },
  {
    field: "score",
    header: "Score",
  },
];

const rows = [
  { title: "Post A", score: 5 },
  { title: "Post B", score: 3 },
  { title: "Post D", score: 9 },
  { title: "Post E", score: 8 },
  { title: "Post C", score: 1 },
];

test("the table headers", () => {
  render(
    <SortableTable
      rows={rows}
      columns={columns}
      defaultSort="score:desc"
      renderSortIcon={(isAscending) => {
        return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
      }}
    />
  );

  // You should have at least 2 assertions
  // Verify that the Title table header renders "Title"
  // Verify that the Score table header renders "Score (desc)"
});

test("rendering rows with a numeric field initially sorted in ascending order", () => {
  render(
    <SortableTable
      rows={rows}
      columns={columns}
      defaultSort="score:asc"
      renderSortIcon={(isAscending) => {
        return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
      }}
    />
  );

  // You should have at least 6 assertions
  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction
});

test("rendering rows with a numeric field initially sorted in descending order", () => {
  render(
    <SortableTable
      rows={rows}
      columns={columns}
      defaultSort="score:desc"
      renderSortIcon={(isAscending) => {
        return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
      }}
    />
  );

  // You should have at least 6 assertions
  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction
});

test("rendering rows with a string field initially sorted in ascending order", () => {
  render(
    <SortableTable
      rows={rows}
      columns={columns}
      defaultSort="title:asc"
      renderSortIcon={(isAscending) => {
        return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
      }}
    />
  );

  // You should have at least 6 assertions
  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction
});

test("rendering rows with a string field initially sorted in descending order", () => {
  render(
    <SortableTable
      rows={rows}
      columns={columns}
      defaultSort="title:desc"
      renderSortIcon={(isAscending) => {
        return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
      }}
    />
  );

  // You should have at least 6 assertions
  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction
});

test("clicking on a table header with the sort reverses the sort", () => {
  render(
    <SortableTable
      rows={rows}
      columns={columns}
      defaultSort="title:desc"
      renderSortIcon={(isAscending) => {
        return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
      }}
    />
  );

  // You should have at least 12 assertions

  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction

  // fire click on the title header

  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction
});

test("clicking on a table header without the sort applies an ascending sort to that column", () => {
  render(
    <SortableTable
      rows={rows}
      columns={columns}
      defaultSort="title:desc"
      renderSortIcon={(isAscending) => {
        return <FontAwesomeIcon icon={isAscending ? faArrowUp : faArrowDown} />;
      }}
    />
  );

  // You should have at least 12 assertions

  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction

  // fire click on the sort header

  // 5 assertions to verify that the table rows are rendered in the correct order
  // 1 assertion to verify that the correct table header has the correct sort direction
});