import React, { useEffect, useRef, useState } from "react";
import { Button, Input, Space, Table } from "antd";
import { useSelector } from "react-redux";
import Highlighter from "react-highlight-words";
import { DeleteTwoTone, EditTwoTone, SearchOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";

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

export const ActivityListingRBAC = () => {
  const router = useRouter()
  // 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([]);

  const [searchText, setSearchText] = useState("");
  const [searchedColumn, setSearchedColumn] = useState("");

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

  const searchInput = useRef(null);
  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };
  const handleReset = clearFilters => {
    clearFilters();
    setSearchText("");
  };
  const getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
      <div
        style={{
          padding: 8
        }}
        onKeyDown={e => e.stopPropagation()}
      >
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{
            marginBottom: 8,
            display: "block"
          }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{
              width: 90
            }}
          >
            Search
          </Button>
          <Button
            onClick={() => clearFilters && handleReset(clearFilters)}
            size="small"
            style={{
              width: 90
            }}
          >
            Reset
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({
                closeDropdown: false
              });
              setSearchText(selectedKeys[0]);
              setSearchedColumn(dataIndex);
            }}
          >
            Filter
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              close();
            }}
          >
            close
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => (
      <SearchOutlined
        style={{
          color: filtered ? "#1677ff" : undefined
        }}
      />
    ),
    onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownOpenChange: visible => {
      if (visible) {
        setTimeout(() => searchInput.current?.select(), 100);
      }
    },
    render: text =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{
            backgroundColor: "#ffc069",
            padding: 0
          }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ""}
        />
      ) : (
        text
      )
  });

  // 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",
        key: "name",
        ...getColumnSearchProps("name"),
        width: "15%"
      },
      {
        title: "Location",
        dataIndex: "location",
        // key: "location",
        // ...getColumnSearchProps('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%"
      // },
      {
        title: "Edit record",
        render: (_, record) => (
          <Space size="middle">
            {/* <a>Invite {record.name}</a> */}
            <EditTwoTone style={{ fontSize: "22px" }}
              onClick={() => {
                router.push(`/vendor/activities/${record.key}`)
                console.log(record);
              }}/>
            {/* <DeleteTwoTone
              twoToneColor="#FF0000"
              style={{ fontSize: "22px" }}
              onClick={() => {
                console.log(record);
              }}
            /> */}
          </Space>
        ),
        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;