import React from "react";
import { Meta } from "@storybook/react";
import { PageChangeEvent, PagerProps } from "./PagerProps";
import Filter from "../Filter/Filter";
import Pager from "./Pager";
import products from "../Filter/mockData/products.json";

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 { FilterChangeEvent } from "../Filter/FilterProps";

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

export default {
  title: "Design System/Data Tools/Pager",
  component: Pager,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Pager provides options for splitting content into pages. \n\n```javascript\nimport { Pager } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    buttonCount: {
      control: { type: "number" },
      description:
        "Sets the maximum numeric buttons count before the buttons are collapsed.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional classes to the Pager.",
    },
    dir: {
      control: { type: "text" },
      description: "Sets the direction of the component.",
    },
    info: {
      control: { type: "boolean" },
      description:
        "Toggles the information about the current page and the total number of records.",
    },
    onPageChange: {
      control: { type: "object" },
      description: "Fires when the page of the Pager is changed.",
    },
    pageSizes: {
      control: { type: "object" },
      description: "Displays a menu for selecting the page size.",
    },
    pageSizeValue: {
      control: { type: "text" },
      description: "Sets the selected value of the page size Dropdownlist.",
    },
    previousNext: {
      control: { type: "boolean" },
      description: "Toggles the Previous and Next buttons.",
    },
    responsive: {
      control: { type: "boolean" },
      description: "Defines if the pager will be responsive.",
    },
    size: {
      control: { type: "text" },
      description: "Configures the size of the Pager.",
    },
    skip: {
      control: { type: "number" },
      description: "The number of records that will be skipped.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the Pager.",
    },
    take: {
      control: { type: "number" },
      description: "The number of records that will be taken.",
    },
    total: {
      control: { type: "number" },
      description: "The total number of records.",
    },
    type: {
      control: { type: "text" },
      description: "Defines the type of the pager.",
    },
    messagesMap: {
      control: { type: "object" },
      description: "Useful for modifying the Pager messages.",
    },
  },
} as Meta;

export const Default = (args: PagerProps): JSX.Element => {
  const [filter, setFilter] = React.useState(initialFilter);
  const [skip, setSkip] = React.useState(0);
  const [take, setTake] = React.useState(5);

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

  const handlePageChange = (event: PageChangeEvent) => {
    setSkip(event.skip);
    setTake(event.take);
  };

  let filterData = KendoFilterBy(products, filter);

  return (
    <>
      <Filter
        value={filter}
        onChange={handleFilterChange}
        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,
          },
        ]}
      />
      <hr />
      <KendoGrid
        style={{
          maxHeight: "400px",
        }}
        data={filterData.slice(skip, skip + take)}
      >
        <KendoGridColumn field="ProductName" title="Name" width="300px" />
        <KendoGridColumn field="UnitPrice" title="Price" />
        <KendoGridColumn field="Discontinued" title="Discontinued" />
      </KendoGrid>
      <hr />
      <Pager
        skip={skip}
        take={take}
        type="input"
        previousNext={true}
        total={filterData.length}
        onPageChange={handlePageChange}
      />
    </>
  );
};