import { EyeOutlined, EyeTwoTone } from "@ant-design/icons";
import { Space, Table, Tag } from "antd";
import { Fragment, useEffect, useState } from "react";
import { Button, Image, Modal } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { toast } from "react-toastify";
import { getActivitiesByVendor } from "../../redux/actions/activityAction";
import { changeEnquiryStatus, getEnquiriesByVendor } from "../../redux/actions/enquiryAction";

const OrderListing = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getEnquiriesByVendor());
    dispatch(getActivitiesByVendor());
  }, []);
  const { enquiriesByVendor } = useSelector(state => state.enquiriesByVendor);
  const { allActivitiesData } = useSelector(state => state.allActivitiesData);
  const [data, setData] = useState();
  const [activityFilters, setactivityFilters] = useState();
  const [enquiryDetails, setenquiryDetails] = useState();
  const [showEnquiryModal, setshowEnquiryModal] = useState(false);
  console.log("enquiriesByVendor", enquiriesByVendor);
  const columns = [
    {
      title: "Activity name",
      dataIndex: "activityName",
      filters: activityFilters,
      //   filterMode: "tree",
      filterSearch: true,
      onFilter: (value, record) => {
        console.log("value", value, record.name.startsWith(value));
        return record.activityName.startsWith(value);
      },
      width: "25%"
    },
    {
      title: "Name",
      dataIndex: "name",
      sorter: (a, b) => a.age - b.age,
      width: "25%"
    },
    {
      title: "Status",
      dataIndex: "status",
      filters: [
        {
          text: "pending",
          value: "pending"
        },
        {
          text: "closed",
          value: "closed"
        }
      ],
      onFilter: (value, record) => record.status.startsWith(value),
      filterSearch: true,
      width: "25%",
      render: tag => (
        <span>
          {tag == "pending" ? (
            <Tag color={"red"} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          ) : (
            <Tag color={"blue"} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          )}
        </span>
      )
    },
    {
      title: "Quantity",
      dataIndex: "quantity",
      //   filters: [
      //     {
      //       text: "London",
      //       value: "London"
      //     },
      //     {
      //       text: "New York",
      //       value: "New York"
      //     }
      //   ],
      //   onFilter: (value, record) => record.address.startsWith(value),
      //   filterSearch: true,
      width: "15%"
    },
    {
      title: "Action",
      width: "25%",
      render: (_, record) => (
        <Space size="middle">
          <EyeTwoTone
            onClick={() => {
              setshowEnquiryModal(true);
              console.log(record);
              setenquiryDetails(enquiriesByVendor.filter(item => item.id == record.key));
            }}
            style={{ fontSize: "22px" }}
          />
          {/* <a>Delete</a> */}
        </Space>
      )
    }
  ];

  useEffect(() => {
    let rawData =
      enquiriesByVendor &&
      enquiriesByVendor.map(item => {
        return {
          key: item.id,
          name: item.attributes.end_user.data.attributes.name,
          quantity: item.attributes.quantity,
          status: item.attributes.status,
          activityName: item?.attributes?.experience?.data?.attributes?.name
        };
      });

    setData(rawData);
  }, [enquiriesByVendor]);

  useEffect(() => {
    const activityFiltersRaw =
      allActivitiesData &&
      allActivitiesData.data.map(item => {
        return {
          text: item.attributes.name,
          value: item.attributes.name
        };
      });
    setactivityFilters(activityFiltersRaw);
  }, [allActivitiesData]);

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

  return (
    <Fragment>
      {/* <div className="row">
        <div className="col-12 col-lg-12">
          <div className="rightContent">
            <div className="d-flex align-items-center justify-content-between px-2 mb-2"> */}
      <div className="mb-3 d-flex align-items-center justify-content-between">
        <h2 style={{ fontSize: 28 }}>Orders</h2>
        <p><a href="">View all the orders</a></p>
      </div>
      {/* <div>
                <Button type="button" variant="" className="btnAdd m-0">
                  <Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
                </Button>
              </div>
            </div> */}
      <Table columns={columns} dataSource={data} onChange={onChange} />
      {/* </div>
        </div>
      </div> */}
      <Modal
        show={showEnquiryModal}
        onHide={() => {
          setshowEnquiryModal(false);
        }}
      >
        {console.log("enquiryDetails", enquiryDetails)}
        <Modal.Header>Enquiry Details</Modal.Header>
        <Modal.Body>
          {enquiryDetails && enquiryDetails.length > 0 && (
            <>
              <div className="p-2">Name: {enquiryDetails[0].attributes.end_user.data.attributes.name}</div>
              <div className="p-2">Phone number: {enquiryDetails[0].attributes.end_user.data.attributes.phone}</div>
              <div className="p-2">Email: {enquiryDetails[0].attributes.end_user.data.attributes.email}</div>
              <div className="p-2">
                Status: <Tag color={enquiryDetails[0].attributes.status == "pending" ? "red" : "blue"}>{enquiryDetails[0].attributes.status.toUpperCase()}</Tag>
              </div>
              <Button
                onClick={async () => {
                  if (enquiryDetails[0].attributes.status == "pending") {
                    let res = await changeEnquiryStatus({ status: "closed", id: enquiryDetails[0].id });
                    console.log("res", res);
                  } else {
                    let res = await changeEnquiryStatus({ status: "pending", id: enquiryDetails[0].id });
                    console.log("res", res);
                  }
                  await dispatch(getEnquiriesByVendor());
                  toast.success("Status changed");
                  setshowEnquiryModal(false);
                }}
              >
                Change Status
              </Button>
            </>
          )}
        </Modal.Body>
      </Modal>
    </Fragment>
  );
};

export default OrderListing;