import { EyeTwoTone } from "@ant-design/icons";
import { Space, Table, Tag } from "antd";
import React, { useEffect, useState } from "react";
import { Modal } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { getEnquiriesByAdmin } from "../../redux/actions/enquiryAction";
import EnquiryDetailModal from "./EnquiryDetailModal";

const Enquiries = () => {
  const { enquiriesByAdmin } = useSelector(state => state.enquiriesByAdmin);
  const dispatch = useDispatch();
  const [data, setdata] = useState();
  const [columns, setcolumns] = useState();
  const [details, setdetails] = useState();
  const [detailsModal, setdetailsModal] = useState(false);
  useEffect(() => {
    dispatch(getEnquiriesByAdmin());
  }, []);

  useEffect(() => {
    setcolumns([
      {
        title: "Name",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "Date",
        dataIndex: "date",
        key: "date"
      },
      {
        title: "Quantity",
        dataIndex: "quantity",
        key: "quantity"
      },
      {
        title: "Status",
        dataIndex: "status",
        key: "status",
        render: tag => (
          <span>
            {tag == "pending" ? (
              <Tag color={"red"} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            ) : (
              <Tag color={"blue"} key={tag}>
                {tag === "closed" ? "closed" : tag.toUpperCase()}
              </Tag>
            )}
          </span>
        )
      },
      {
        title: "Activity Name",
        dataIndex: "experienceName",
        key: "experienceName"
      },
      {
        title: "Vendor name",
        dataIndex: "vendorName",
        key: "vendorName"
      },
      {
        title: "See details",
        render: (_, record) => (
          <Space size="middle">
            {/* <a>Invite {record.name}</a> */}
            <EyeTwoTone
              style={{ fontSize: "22px" }}
              onClick={() => {
                setdetailsModal(true);
                // setactivityId(record.key);
                setdetails({ experience: record.experience, vendor: record.vendor, endUser: record.endUser });
                // router.push(`/vendor/activities/${record.key}`);
                // console.log(record);
              }}
            />
          </Space>
        ),
        width: "10%"
      }
    ]);
    if (enquiriesByAdmin && enquiriesByAdmin.data.length > 0) {
      setdata(
        enquiriesByAdmin.data.map(item => {
          return {
            key: item.id,
            date: item.attributes.date,
            quantity: item.attributes.quantity,
            status: item.attributes.status,
            endUser: item.attributes.end_user,
            experience: item.attributes.experience,
            name: item.attributes.end_user.data.attributes.name,
            experienceName: item.attributes.experience.data?.attributes.name,
            vendorName: item.attributes.vendor.data.attributes.name,
            vendor: item.attributes.vendor
          };
        })
      );
    }
    // const dataSource = [
    //   {
    //     key: "1",
    //     name: "Mike",
    //     age: 32,
    //     address: "10 Downing Street"
    //   },
    //   {
    //     key: "2",
    //     name: "John",
    //     age: 42,
    //     address: "10 Downing Street"
    //   }
    // ];

    // const columns = [
    //   {
    //     title: "Name",
    //     dataIndex: "name",
    //     key: "name"
    //   },
    //   {
    //     title: "Age",
    //     dataIndex: "age",
    //     key: "age"
    //   },
    //   {
    //     title: "Address",
    //     dataIndex: "address",
    //     key: "address"
    //   }
    // ];
  }, [enquiriesByAdmin]);

  console.log("enquiriesByAdmin", enquiriesByAdmin);
  console.log("data", details)
  return (
    <div>
      <Table dataSource={data} columns={columns} />
      <Modal show={detailsModal} onHide={() => setdetailsModal(false)}>
        <Modal.Header>Enquiry details</Modal.Header>
        <Modal.Body>
          <EnquiryDetailModal data={details} setdetailsModal={setdetailsModal} />
        </Modal.Body>
      </Modal>
    </div>
  );
};

export default Enquiries;