import { BrowserRouter } from "react-router";
import { useDynamicFilter } from "../hooks/useDynamicFilter";

//import { Button } from "../components/Button";

const meta = {
  title: "Hooks/useDynamicFilter",
  decorators: [
    (Story) => (
      <BrowserRouter>
        <Story />
      </BrowserRouter>
    ),
  ],
};

// type Story = StoryObj<typeof Button>;

export const Filter = {
  render: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [filters, logicalOperator, api] = useDynamicFilter("myfilter");
    return (
      <div>
        <div>
          <span>{logicalOperator}</span>
          <button
            onClick={() => {
              api.add({
                id: "1",
                field: {
                  __type: "column",
                  id: "1",
                  key: "key",
                  name: "Name",
                },
                operator: "eq",
                value: "John",
                children: [],
              });
            }}
          >
            Add
          </button>
        </div>
        {filters.map((filter) => (
          <div
            key={filter.id}
          >{`${filter.field?.name} ${filter.operator} ${filter.value}`}</div>
        ))}
      </div>
    );
  },
};

export default meta;