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,
          }
        })
      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: "Receiver Email Address",
      dataIndex: "receiverEmail",
      key: "receiverEmail",
      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>
      )
    }
  ]
  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;