import { Fragment, useEffect, useState } from "react";
import { Button, Image } from "react-bootstrap";
import { Dropdown, Menu, Space, Table, Tag } from "antd";
import axios from "axios";
import { DownCircleOutlined, MoreOutlined } from "@ant-design/icons";
import { getSession } from "next-auth/react";
import { toast } from "react-toastify";
const GiftcardListing = () => {
  const [session, setSession] = useState();
  const [update, setupdate] = useState(false);
  useEffect(() => {
    const fetchSession = async () => {
      setSession(await getSession());
    };
    fetchSession();
    // dispatch(getLoggedInVendor());
  }, []);
  const [giftData, setGiftData] = useState([]);
  useEffect(() => {
    axios
      .get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards`)
      .then(res => {
        let giftDatas =
          res.data &&
          res.data.data.map(data => {
            return {
              key: data.id,
              amount: data?.attributes?.amount,
              senderEmail: data?.attributes?.senderEmail,
              receiverEmail: data?.attributes?.receiverEmail,
              status: data?.attributes?.status,
              senderName: data?.attributes?.senderName,
              receiverName: data?.attributes?.receiverName
            };
          });
        setGiftData(giftDatas);
      })
      .catch(err => {
        console.log(err);
      });
  }, [update]);
  const changeStatusFn = async ({ id, data }) => {
    const config = {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${session.jwt}`
      }
    };
    const giftdata = {
      data
    };

    const response = await axios.put(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards/${id}`, giftdata, config);
    if (response.status == 200) {
      toast.success("Status changed");
      setupdate(!update);
    }
    console.log("response gift card", response);
  };
  const columns = [
    {
      title: "Sender Email Address",
      dataIndex: "senderEmail",
      key: "senderEmail",
      render: text => <a>{text}</a>
    },
    {
      title: "Sender Name",
      dataIndex: "senderName",
      key: "senderName",
      render: text => <a>{text}</a>
    },
    {
      title: "Receiver Email Address",
      dataIndex: "receiverEmail",
      key: "receiverEmail",
      render: text => <a>{text}</a>
    },
    {
      title: "Receiver Name",
      dataIndex: "receiverName",
      key: "receiverName",
      render: text => <a>{text}</a>
    },
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
      render: text => <a>{text}</a>
    }
    // {
    //   title: "Status",
    //   dataIndex: "status",
    //   key: "status",
    //   render: tag => (
    //     <span>
    //       {tag == "rejected" ? (
    //         <Tag color={"red"} key={tag}>
    //           {tag.toUpperCase()}
    //         </Tag>
    //       ) : (
    //         <Tag color={"blue"} key={tag}>
    //           {tag === "fulfilled" ? "APPROVED" : tag.toUpperCase()}
    //         </Tag>
    //       )}
    //     </span>
    //   )
    // },
    // {
    //   title: "Actions",
    //   width: 100,
    //   dataIndex: "key",
    //   key: "key",
    //   render: (_, record) => (
    //     <Space size="middle">
    //       {/* <a>Invite {record.name}</a> */}
    //       <Dropdown
    //         menu={{
    //           items: [
    //             {
    //               key: "1",
    //               label: (
    //                 <a
    //                   rel="noopener noreferrer"
    //                   onClick={async () => {
    //                     console.log("record", record);
    //                     await changeStatusFn({ id: record.key, data: { status: "fulfilled" } });
    //                     // setrejectionId(record.key);
    //                     // adminActions({ type: "reject", activityId: record.key });
    //                   }}
    //                 >
    //                   Approve
    //                 </a>
    //               )
    //             },
    //             {
    //               key: "2",
    //               label: (
    //                 <a
    //                   target="_blank"
    //                   rel="noopener noreferrer"
    //                   onClick={async () => {
    //                     console.log("record", record);
    //                     await changeStatusFn({ id: record.key, data: { status: "rejected" } });
    //                     // setrejectionId(record.key);
    //                     // adminActions({ type: "reject", activityId: record.key });
    //                   }}
    //                 >
    //                   Reject
    //                 </a>
    //               )
    //             }
    //           ]
    //         }}
    //         placement="bottomLeft"
    //         trigger={["click"]}
    //       >
    //         <button className="btn border-0">
    //           <DownCircleOutlined style={{ fontSize: "20px", color: "#08c" }} onClick={() => {}} />
    //         </button>
    //       </Dropdown>
    //     </Space>
    //   )
    // }
  ];
  console.log("giftData", giftData);
  return (
    <Fragment>
      <div className="p-5 h-100">
        <div className="d-flex align-items-center justify-content-between px-2 mb-2">
          <div>
            <h2 style={{ fontSize: 28 }}>Gift Card Requests</h2>
            <p>View all the gift cards</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={giftData} />
      </div>
    </Fragment>
  );
};

export default GiftcardListing;