import React, { useEffect, useRef, useState } from "react";
import { Button, Dropdown, Input, Space, Table, Tag } from "antd";
import { useDispatch, useSelector } from "react-redux";
import Highlighter from "react-highlight-words";
import { DeleteTwoTone, DownCircleOutlined, EditTwoTone, SearchOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import { getActivitiesByVendor } from "../../redux/actions/activityAction";
import { loadUser, updateActivityStatusAdmin } from "../../redux/actions/userActions";
import { Modal } from "react-bootstrap";
import { toast } from "react-toastify";

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

export const ActivityListingRBAC = ({ setactivityDetailInfo, setShowActivityDetailsModal }) => {
  const router = useRouter();
  const dispatch = useDispatch();
  // let columns = []
  // useSelectors
  const { allActivitiesData } = useSelector(state => state.allActivitiesData);
  const { loadedUser } = useSelector(state => state.loadedUser);
  const { categories } = useSelector(state => state.categories);
  const { subCategories } = useSelector(state => state.subCategories);
  // console.log("loadedUser", loadedUser);
  // useStates
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [columns, setcolumns] = useState([]);
  const [data, setdata] = useState([]);
  const [rejectPopUp, setrejectPopUp] = useState(false);
  const [searchText, setSearchText] = useState("");
  const [searchedColumn, setSearchedColumn] = useState("");
  const [rejectionReasonText, setrejectionReasonText] = useState("");
  const [rejectionId, setrejectionId] = 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
      )
  });
  let IS_ADMIN = false;
  // useEffects

  useEffect(() => {
    if (loadedUser && loadedUser.role.type == "admin") {
      IS_ADMIN = true;
    }
  }, [loadedUser]);

  useEffect(() => {
    // dispatch(loadUser());

    let initialData =
      allActivitiesData &&
      allActivitiesData.data.map((item, index) => {
        return {
          key: item.id,
          name: item.attributes.name,
          category: item.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",
          status: item.attributes.approved
        };
      });

    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);
    if (loadedUser && loadedUser.role.type == "admin") {
      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%"
        },
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          ...getColumnSearchProps("name"),
          width: "15%"
        },
        {
          title: "Location",
          dataIndex: "location",
          width: "15%"
        },
        {
          title: "Price",
          dataIndex: "price",
          width: "15%"
        },
        {
          title: "Place",
          dataIndex: "place",

          width: "15%"
        },
        {
          title: "Action",
          render: (_, record) => (
            <Space size="middle">
              {/* <a>Invite {record.name}</a> */}
              <Dropdown
                menu={{
                  items: [
                    {
                      key: "1",
                      label: (
                        <a
                          rel="noopener noreferrer"
                          onClick={() => {
                            adminActions({ type: "view", activityId: record.key });
                            // console.log(record);
                          }}
                        >
                          View Details
                        </a>
                      )
                    },
                    {
                      key: "2",
                      label: (
                        <a
                          rel="noopener noreferrer"
                          onClick={() => {
                            setrejectionId(record.key);
                            adminActions({ type: "reject", activityId: record.key });
                          }}
                        >
                          Reject
                        </a>
                      )
                    },
                    {
                      key: "3",
                      label: (
                        <a
                          target="_blank"
                          rel="noopener noreferrer"
                          onClick={() => {
                            // setrejectionId(record.key);
                            adminActions({ type: "approve", activityId: record.key });
                          }}
                        >
                          Approve
                        </a>
                      )
                    }
                  ]
                }}
                placement="bottomLeft"
              >
                <Button style={{ border: "none" }}>
                  <DownCircleOutlined style={{ fontSize: "20px", color: "#08c" }} onClick={() => {}} />
                </Button>
              </Dropdown>
            </Space>
          ),
          width: "10%"
        }
      ]);
    } else {
      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%"
        },
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          ...getColumnSearchProps("name"),
          width: "15%"
        },
        {
          title: "Location",
          dataIndex: "location",
          width: "15%"
        },
        {
          title: "Price",
          dataIndex: "price",
          width: "15%"
        },
        {
          title: "Place",
          dataIndex: "place",

          width: "12%"
        },
        {
          title: "Approved",
          key: "status",
          dataIndex: "status",
          render: (_, { status }) => (
            <>
              {status == "approved" && (
                <Tag color={"green"} key={1}>
                  Approved
                </Tag>
              )}
              {status == "pending" && (
                <Tag color={"orange"} key={1}>
                  Pending
                </Tag>
              )}
              {status == "rejected" && (
                <Tag color={"red"} key={1}>
                  Rejected
                </Tag>
              )}
            </>
          )
        },
        {
          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%"
        }
      ]);
    }
  }, [allActivitiesData, loadedUser]);

  // 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);
        }
      }
    ]
  };

  const adminActions = async ({ type, activityId }) => {
    if (type == "approve") {
      await updateActivityStatusAdmin({ status: "approved", activityId, rejectionReason: "" });
    }
    if (type == "reject") {
      setrejectPopUp(true);
    }
    if (type == "view") {
      let data = allActivitiesData.data.filter(item => item.id == activityId);
      setactivityDetailInfo(data);
      setShowActivityDetailsModal(true);
    }
  };
  return (
    <div className="p-5">
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} onChange={onChange} />
      <Modal
        show={rejectPopUp}
        onHide={() => {
          setrejectionId(null);
          setrejectPopUp(false);
        }}
      >
        <Modal.Header closeButton>Please mention reason for rejecting the activity.</Modal.Header>
        <Modal.Body>
          <div className="input-group">
            <textarea
              style={{ width: "100%" }}
              rows={4}
              className="p-2"
              placeholder="Eg: Not appropriate for this age group."
              name="comments"
              onChange={e => {
                e.preventDefault();
                setrejectionReasonText(e.target.value);
              }}
            />
          </div>
          <div className="my-4">
            <div className="d-flex justify-content-center">
              <Button
                variant=""
                className="btnAdd btnApprove m-0"
                disabled={rejectionReasonText == ""}
                onClick={async () => {
                  await updateActivityStatusAdmin({ status: "rejected", activityId: rejectionId, rejectionReason: rejectionReasonText });
                  setrejectionId(null);
                  setrejectPopUp(false);
                  toast.success("Activity rejected.");
                }}
              >
                Submit
              </Button>
            </div>
          </div>
        </Modal.Body>
      </Modal>
    </div>
  );
};

export default ActivityListingRBAC;