import React from "react";
import { DisplayItems } from "./";
import {
  DisplayItemsFieldDataType,
  DisplayItemsPropsType,
} from "./components/types";
import {
  withKnobs,
  text,
  object,
  boolean,
  select,
} from "@storybook/addon-knobs";
export default {
  title: "Modules|CRUD/DisplayItems/DisplayAllItems",
  component: DisplayItems,
  decorators: [
    (story) => <div style={{ padding: 24, margin: "4rem" }}>{story()}</div>,
    withKnobs,
  ],
  excludeStories: /.*Data$/,
};

export const sampleData = [
  {
    firstName: "Kyle",
    lastName: "Graham",
    email: "kjgraham@gmail.com",
    age: 37,
    createdAt: new Date(),
  },
  {
    firstName: "Linda",
    lastName: "Graham",
    email: "tari777@gmail.com",
    age: 36,
    createdAt: new Date(),
  },
  {
    firstName: "Mikel",
    lastName: "Graham",
    email: "mikag666@gmail.com",
    age: 10,
    createdAt: new Date(),
  },
  {
    firstName: "Nevaeh",
    lastName: "Graham",
    email: "misha7717@gmail.com",
    age: 7,
    createdAt: new Date(),
  },
];

export const sampleFieldData = [
  {
    name: "firstName",
    label: "First Name",
    type: DisplayItemsFieldDataType.STRING,
  },
  {
    name: "lastName",
    label: "Last Name",
    type: DisplayItemsFieldDataType.STRING,
  },
  { name: "email", label: "Email", type: DisplayItemsFieldDataType.EMAIL },
  { name: "age", label: "Age", type: DisplayItemsFieldDataType.NUMBER },
  {
    name: "createdAt",
    label: "First Appeared",
    type: DisplayItemsFieldDataType.DATE,
  },
];

export const savedFilterData = ["Filter 1", "Filter 2", "Filter 3"];

export const sampleDisplayItemData = {
  name: "SampleList",
  data: object("Display Data", sampleData),
  fields: sampleFieldData,
  title: "Sample List of Items",
  onFilterChange: (e) => console.log("changed filter", e),
  bulkActions: [],
  dataItemActions: [],
  tags: savedFilterData,
  paginationSettings: {},
};

export const DefaultComponent = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} />
);
export const WithCustomFilterComponent = (props) => (
  <DisplayItems
    {...sampleDisplayItemData}
    filterComponent={(filters) => <div>Custom Filters Component</div>}
    {...props}
  />
);
export const WithCustomRowComponent = (props) => (
  <DisplayItems
    {...sampleDisplayItemData}
    dataItemComponent={(item) => (
      <div>
        Custom Component - {item.firstName} {item.lastName}
      </div>
    )}
    {...props}
  />
);
export const WithFilters = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} showFilterControls />
);
export const WithAlphabetControls = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} showAlphabetFilter />
);
export const WithCheckboxes = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} showCheckboxes />
);
export const WithBulkSelectedActions = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} showCheckboxes />
);
export const WithCustomBulkSelectedActionsComponent = (props) => (
  <DisplayItems
    {...sampleDisplayItemData}
    showCheckboxes
    bulkActionsComponent={(data) => (
      <div>Custom Bulk Selected Actions Component</div>
    )}
    {...props}
  />
);
export const WithTags = (props) => (
  <DisplayItems {...sampleDisplayItemData} showTags {...props} />
);
export const EmptyState = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} data={[]} />
);
export const CustomEmptyState = (props) => (
  <DisplayItems
    {...sampleDisplayItemData}
    {...props}
    data={[]}
    emptyStateComponent={<div>Custom Empty State Component</div>}
  />
);
export const LoadingState = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} loading />
);
export const CustomLoadingState = (props) => (
  <DisplayItems
    {...sampleDisplayItemData}
    {...props}
    loading
    loadingComponent={<div>Custom Loading Component</div>}
  />
);
export const WithPagination = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} showPagination />
);
export const CardsView = (props) => (
  <DisplayItems
    {...sampleDisplayItemData}
    {...props}
    type={DisplayItemsPropsType.CARDS}
  />
);
export const TableView = (props) => (
  <DisplayItems
    {...sampleDisplayItemData}
    {...props}
    type={DisplayItemsPropsType.TABLE}
    showCheckboxes
  />
);
export const WithSorting = (props) => (
  <DisplayItems {...sampleDisplayItemData} {...props} enableSorting />
);

// export const WithBulkActions = props => <DisplayItems {...sampleDisplayItemData} {...props} />