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

const Reviews = ({ isVendor }) => {
  const dispatch = useDispatch();
  const searchInput = useRef(null);
  const [searchText, setSearchText] = useState("");
  const [searchedColumn, setSearchedColumn] = useState("");
  const [columns, setcolumns] = useState([]);
  const [data, setdata] = useState([]);
  const [showReviews, setshowReviews] = useState(false);
  const [activityId, setactivityId] = useState();
  const { reviews } = useSelector(state => state.reviews);
  const handleReset = clearFilters => {
    clearFilters();
    setSearchText("");
  };
  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };
  const { allActivitiesData } = useSelector(state => state.allActivitiesData);
  console.log("allActivitiesData", allActivitiesData);
  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
      )
  });
  useEffect(() => {
    setdata(
      allActivitiesData &&
        allActivitiesData.data.length > 0 &&
        allActivitiesData.data.map(item => {
          return {
            key: item.id,
            name: item.attributes.name,
            reviewsCount: item.attributes.reviews?.data.length
            // tags: ["nice", "developer"]
          };
        })
    );

    setcolumns([
      {
        title: "Activities",
        dataIndex: "name",
        key: "name",
        ...getColumnSearchProps("name"),
        render: text => <a>{text}</a>
      },
      {
        title: "Reviews count",
        dataIndex: "reviewsCount",
        key: "reviewsCount"
      },
      {
        title: "See reviews",
        render: (_, record) => (
          <Space size="middle">
            {/* <a>Invite {record.name}</a> */}
            <EyeTwoTone
              style={{ fontSize: "22px" }}
              onClick={() => {
                setshowReviews(true);
                setactivityId(record.key);
                // router.push(`/vendor/activities/${record.key}`);
                // console.log(record);
              }}
            />
          </Space>
        ),
        width: "10%"
      }
    ]);
  }, [allActivitiesData]);
  useEffect(() => {
    setdata(
      allActivitiesData &&
        allActivitiesData.data.length > 0 &&
        allActivitiesData.data.map(item => {
          return {
            key: item.id,
            name: item.attributes.name,
            reviewsCount: item.attributes.reviews?.data.length
            // tags: ["nice", "developer"]
          };
        })
    );
    // dispatch(getActivitiesByFilters({}));
  }, [reviews]);

  return (
    <Fragment>
      <div className="p-5">
        {!showReviews ? <Table columns={columns} dataSource={data} /> : <ReviewsListing setshowReviews={setshowReviews} activityId={activityId} isVendor={isVendor} />}
      </div>
    </Fragment>
  );
};

export default Reviews;