import React from "react";
import { Meta } from "@storybook/react";
import { FilterChangeEvent, FilterProps } from "./FilterProps";
import Filter from "./Filter";

import {
  Operators as KendoOperators,
  TextFilter as KendoTextFilter,
  NumericFilter as KendoNumericFilter,
  BooleanFilter as KendoBooleanFilter,
} from "@progress/kendo-react-data-tools";

import {
  filterBy as KendoFilterBy,
  CompositeFilterDescriptor as KendoCompositeFilterDescriptor,
} from "@progress/kendo-data-query";
import {
  Grid as KendoGrid,
  GridColumn as KendoGridColumn,
} from "@progress/kendo-react-grid";
import products from "./mockData/products.json";

const initialFilter: KendoCompositeFilterDescriptor = {
  logic: "and",
  filters: [
    { field: "UnitPrice", operator: "gt", value: 20 },
    { field: "UnitPrice", operator: "lt", value: 50 },
    { field: "Discontinued", operator: "eq", value: false },
    {
      logic: "or",
      filters: [
        { field: "ProductName", operator: "contains", value: "organic" },
        { field: "ProductName", operator: "contains", value: "cranberry" },
      ],
    },
  ],
};

export default {
  title: "Design System/Data Tools/Filter",
  component: Filter,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Filter provides options for building and editing a CompositeFilterDescriptor object. \n\n```javascript\nimport { Filter } "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    ariaLabel: {
      control: { type: "text" },
      description: "Aria label for the Filter container",
    },
    ariaLabelExpression: {
      control: { type: "text" },
      description: "Aria label for the underlying Expression component",
    },
    ariaLabelGroup: {
      control: { type: "text" },
      description: "Aria label for the underlying Group component",
    },
    className: {
      control: { type: "text" },
      description: "Additional classes for the Filter",
    },
    defaultGroupFilter: {
      control: { type: "object" },
      description: "Initial composite filter descriptor for new groups",
    },
    fields: {
      control: { type: "array" },
      description: "Field settings for the Filter",
    },
    style: {
      control: { type: "object" },
      description: "Styles applied to the Filter",
    },
    value: {
      control: { type: "object" },
      description: "Composite filter descriptor value",
    },
    onChange: {
      control: { type: "function" },
      description: "Filter onChange event",
    },
  },
} as Meta;

export const Default = (args: FilterProps): JSX.Element => {
  const [filter, setFilter] = React.useState(initialFilter);

  const onFilterChange = (event: FilterChangeEvent) => {
    setFilter(event.filter);
  };

  return (
    <>
      <Filter
        {...args}
        value={filter}
        onChange={onFilterChange}
        fields={[
          {
            name: "ProductName",
            label: "Name",
            filter: KendoTextFilter,
            operators: KendoOperators.text,
          },
          {
            name: "UnitPrice",
            label: "Price",
            filter: KendoNumericFilter,
            operators: KendoOperators.numeric,
          },
          {
            name: "Discontinued",
            label: "Discontinued",
            filter: KendoBooleanFilter,
            operators: KendoOperators.boolean,
          },
        ]}
      />
      <KendoGrid
        style={{ maxHeight: "400px" }}
        data={KendoFilterBy(products, filter)}
      >
        <KendoGridColumn field="ProductName" title="Name" width="300px" />
        <KendoGridColumn field="UnitPrice" title="Price" />
        <KendoGridColumn field="Discontinued" title="Discontinued" />
      </KendoGrid>
    </>
  );
};

Default.args = {
  dataTestId: "filter-data-testid",
};