import React, { useEffect, useState } from "react";
import { Table } from "antd";
import { useSelector } from "react-redux";

const onChange = (pagination, filters, sorter, extra) => {
  console.log("params", pagination, filters, sorter, extra);
};

export const ActivityListingRBAC = () => {
  // let columns = []
  // useSelectors
  const { allActivitiesData } = useSelector(state => state.allActivitiesData);
  const { categories } = useSelector(state => state.categories);
  const { subCategories } = useSelector(state => state.subCategories);

  // useStates
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [columns, setcolumns] = useState([]);
  const [data, setdata] = useState([]);

  // functions
  const onSelectChange = newSelectedRowKeys => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // useEffects
  useEffect(() => {
    let initialData = allActivitiesData.data.map((item, index) => {
      return {
        key: item.id,
        name: item.attributes.name,
        category: item.attributes.subCategory.data.attributes.category.data.attributes.name,
        subCategory: item.attributes.subCategory.data.attributes.name,
        location: item.attributes.masterPincode.data.attributes.name,
        price: item.attributes.pricePerPerson,
        place: item.attributes.activityType,
        gift: item.attributes.giftSomeone ? "Yes" : "No"
      };
    });

    const categoryFilterArray = categories.data.map((item, index) => {
      return { text: item.attributes.name, value: item.attributes.name };
    });
    const subCategoryFilterArray = subCategories.data.map((item, index) => {
      return { text: item.attributes.name, value: item.attributes.name };
    });
    setdata(initialData);
    setcolumns([
      {
        title: "Category",
        dataIndex: "category",
        filters: categoryFilterArray,
        filterMode: "tree",
        filterSearch: true,
        onFilter: (value, record) => record.category.startsWith(value),
        width: "15%"
      },
      {
        title: "Sub-category",
        dataIndex: "subCategory",
        filters: subCategoryFilterArray,
        filterSearch: true,
        onFilter: (value, record) => record.subCategory.startsWith(value),
        width: "15%"

        // sorter: (a, b) => a.age - b.age
      },
      {
        title: "Name",
        dataIndex: "name",
        filters: allActivitiesData.data.map((item) => {
          return {text: item.attributes.name, value: item.attributes.name}
        }),
        onFilter: (value, record) => record.address.startsWith(value),
        filterSearch: true,
        width: "15%"
      },
      {
        title: "Location",
        dataIndex: "location",
        // filters: [
        //   {
        //     text: "London",
        //     value: "London"
        //   },
        //   {
        //     text: "New York",
        //     value: "New York"
        //   }
        // ],
        // onFilter: (value, record) => record.address.startsWith(value),
        // filterSearch: true,
        width: "15%"
      },
      {
        title: "Price",
        dataIndex: "price",
        // filters: [
        //   {
        //     text: "London",
        //     value: "London"
        //   },
        //   {
        //     text: "New York",
        //     value: "New York"
        //   }
        // ],
        // onFilter: (value, record) => record.address.startsWith(value),
        // filterSearch: true,
        width: "15%"
      },
      {
        title: "Place",
        dataIndex: "place",
        // filters: [
        //   {
        //     text: "London",
        //     value: "London"
        //   },
        //   {
        //     text: "New York",
        //     value: "New York"
        //   }
        // ],
        // onFilter: (value, record) => record.address.startsWith(value),
        // filterSearch: true,
        width: "15%"
      },
      {
        title: "Gift",
        dataIndex: "gift",
        // filters: [
        //   {
        //     text: "London",
        //     value: "London"
        //   },
        //   {
        //     text: "New York",
        //     value: "New York"
        //   }
        // ],
        // onFilter: (value, record) => record.address.startsWith(value),
        // filterSearch: true,
        width: "10%"
      }
    ]);
  }, []);

  console.log("allActivitiesData", allActivitiesData);

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: "odd",
        text: "Select Odd Row",
        onSelect: changeableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        }
      },
      {
        key: "even",
        text: "Select Even Row",
        onSelect: changeableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        }
      }
    ]
  };
  return (
    <div>
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} onChange={onChange} />;
    </div>
  );
};

export default ActivityListingRBAC;