import { SearchOutlined } from "@ant-design/icons";
import { Button, Input, Space, Table } from "antd";
import { Fragment, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getActivitiesForAdmin } from "../../redux/actions/activityAction";

const ActivityListing = () => {
  const dispatch = useDispatch();
  const { allActivitiesData } = useSelector(state => state.allActivitiesData);
  useEffect(() => {
    dispatch(getActivitiesForAdmin({}));
  }, []);
  console.log("allActivitiesData", allActivitiesData);
  const [showMenuIndex, setShowMenuIndex] = useState(null);
  const [data, setdata] = useState(null);

  const toggleMenu = index => {
    setShowMenuIndex(index === showMenuIndex ? null : index);
  };

  useEffect(() => {
    let allActivities = allActivitiesData && allActivitiesData.data.map(item => {
        return {
            key: item.id,
            name: item.attributes.name,
            category: "yet to map",
            pincode: item.attributes.masterPincode.data.attributes.name,
            price: item.attributes.pricePerPerson,
            activityType: item.attributes.activityType,
            gift: item.attributes.giftSomeone ? "Allowed" : "Not allowed",
            vendorWebsite: item.attributes.link
        }
    })

    setdata(allActivities)
  }, [allActivitiesData]);

  const [searchText, setSearchText] = useState("");
  const [searchedColumn, setSearchedColumn] = useState("");
  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
      )
  });
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      width: "30%",
      ...getColumnSearchProps("name")
    },
    {
      title: "Category",
      dataIndex: "category",
      key: "category",
      width: "20%",
      ...getColumnSearchProps("category")
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
      ...getColumnSearchProps("address"),
      sorter: (a, b) => a.address.length - b.address.length,
      sortDirections: ["descend", "ascend"]
    }
  ];
  return (
    <Fragment>
      <div className="row">
        <Table columns={columns} dataSource={data} />
      </div>
    </Fragment>
  );
};

export default ActivityListing;