import type { Meta, StoryObj } from "@storybook/react";
import * as React from "react";
import { DataTable } from ".";

export const data: Payment[] = [
  {
    id: "m5gr84i9",
    amount: 316,
    status: "success",
    email: "ken99@yahoo.com",
  },
  {
    id: "3u1reuv4",
    amount: 242,
    status: "success",
    email: "Abe45@gmail.com",
  },
  {
    id: "derv1ws0",
    amount: 837,
    status: "processing",
    email: "Monserrat44@gmail.com",
  },
  {
    id: "5kma53ae",
    amount: 874,
    status: "success",
    email: "Silas22@gmail.com",
  },
  {
    id: "bhqecj4p",
    amount: 721,
    status: "failed",
    email: "carmella@hotmail.com",
  },
  {
    id: "m5gr84i9",
    amount: 316,
    status: "success",
    email: "ken99@yahoo.com",
  },
  {
    id: "3u1reuv4",
    amount: 242,
    status: "success",
    email: "Abe45@gmail.com",
  },
  {
    id: "derv1ws0",
    amount: 837,
    status: "processing",
    email: "Monserrat44@gmail.com",
  },
  {
    id: "5kma53ae",
    amount: 874,
    status: "success",
    email: "Silas22@gmail.com",
  },
  {
    id: "bhqecj4p",
    amount: 721,
    status: "failed",
    email: "carmella@hotmail.com",
  },
  {
    id: "3u1reuv4",
    amount: 242,
    status: "success",
    email: "Abe45@gmail.com",
  },
  {
    id: "derv1ws0",
    amount: 837,
    status: "processing",
    email: "Monserrat44@gmail.com",
  },
  {
    id: "5kma53ae",
    amount: 874,
    status: "success",
    email: "Silas22@gmail.com",
  },
  {
    id: "bhqecj4p",
    amount: 721,
    status: "failed",
    email: "carmella@hotmail.com",
  },
];

export type Payment = {
  id: string;
  amount: number;
  status: "pending" | "processing" | "success" | "failed";
  email: string;
};

const meta: Meta<typeof DataTable> = {
  title: "Example/DataTable",
  component: DataTable,
};

type Story = StoryObj<typeof DataTable>;

export function Primary() {
  const [loaded, setLoaded] = React.useState(false);
  const [searchTerm, setSearchTerm] = React.useState("");
  return (
    <>
      <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <DataTable
        data={data}
        data-component="DataGrid$Brevity"
        data-id="fake"
        searchTerm={searchTerm}
      >
        <DataTable.CheckboxColumn id="select" />
        <DataTable.ValueColumn<Payment, string>
          header="Status"
          accessorFn={(row) => row.status}
          className="status"
        >
          {(o) => <div>{o.status}</div>}
        </DataTable.ValueColumn>
        <FancyValueColumn />
        <DataTable.ValueColumn<Payment, number>
          header="Amount"
          accessorFn={(row) => row.amount}
          className="amount"
        >
          {(o) => <div>{o.amount}</div>}
        </DataTable.ValueColumn>
        <DataTable.DisplayColumn<Payment, string> header="Actions">
          {(o) => (
            <div>
              <button
                onClick={() => {
                  console.log(o);
                }}
              >
                More
              </button>
            </div>
          )}
        </DataTable.DisplayColumn>
      </DataTable>
      <button onClick={() => setLoaded((v) => !v)}>Click me</button>
      {loaded && <div>Loaded</div>}
    </>
  );
}

export function FancyValueColumn() {
  return (
    <DataTable.ValueColumn<Payment, string>
      id="email"
      header="Email"
      accessorFn={(row) => row.email}
      enableSorting={false}
      className="email"
    >
      {(origional) => <div>{origional.email}</div>}
    </DataTable.ValueColumn>
  );
}

export default meta;