import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
// import {connect} from 'react-redux'
import React, { useState } from "react";
import Image from "next/image";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { Button, Modal, Space, Tooltip } from "antd";
import { useRouter } from "next/router";
import {useDispatch} from 'react-redux';
import { fetchedAd } from "lib/redux/actions/ads-actions";

const { confirm } = Modal;

function SingleAdWithoutLink({
  ad,
  index,
  currentItem,
  deleteItemMn,
  setcurrentItem,
  isDeletingItem,
}: any) {
  const dispatch = useDispatch();

  const router = useRouter();

  const [isEditingAd, setisEditingAd] = useState(false);

  const showConfirm = () => {
    confirm({
      title: "Do you Want to delete these items?",
      icon: <ExclamationCircleOutlined />,
      content: "This action cannot be reversed",
      onOk() {
        deleteItemMn(`v1/ads/${ad.id}`);
        console.log("OK");
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  return (
    <div key={index} className="cursor-pointer border shadow-md rounded-md">
      <div className="h-40 md:h-44 lg:h-52 w-full relative">
        <Image
          layout="fill"
          src={ad?.picture}
          alt={ad?.name}
          placeholder="blur"
          blurDataURL="/assets/images/preloader/preloader-static6.png"
        />
      </div>
      <div className="p-2">
        <p className="font-normal text-gray-700 mb-2">
          {ad?.name?.slice(0, 30)}
        </p>
        <p className="font-bold text-green-500 mt-2">
          {ad?.currency} {ad?.price}
        </p>
      </div>
      <div className="p-3">
        <Button
          className=""
          danger
          loading={currentItem == ad.id && isDeletingItem}
          onClick={() => {
            setcurrentItem(ad.id);
            showConfirm();
          }}
        >
          <Tooltip title="Delete Ad">
            <DeleteOutlined />
          </Tooltip>
        </Button>
        <Button
          className="ml-2"
          type="default"
          loading={isEditingAd}
          onClick={() => {
            confirm({
              title: "Do you Want to Edit this Ad?",
              icon: <ExclamationCircleOutlined />,
              content: "This action cannot be reversed",
              onOk() {
                setisEditingAd(true);
                dispatch(fetchedAd(ad))
                router.push(`/ads/post?ad=${ad.id}`);
              },
              onCancel() {},
            });
          }}
        >
          <Tooltip title="Edit Ad">
            <EditOutlined />
          </Tooltip>
        </Button>
      </div>
    </div>
  );
}

export default SingleAdWithoutLink;