import React, { useState } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Button } from "../ui/button";
import { Icons } from "../icons";

export const ContactInfo = ({ row, getContactDetails, open2, setOpen2 }: any) => {
    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
    const contact_info = row?.original?.contact_details;

    return (
        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
            <PopoverTrigger asChild>
                <Button
                    className="border-0 flex items-center shadow-none bg-transparent text-sm font-normal p-0"
                    onMouseEnter={() => setIsPopoverOpen(true)}
                    onMouseLeave={() => setIsPopoverOpen(false)}
                    onClick={(e) => {
                        e.stopPropagation();
                        getContactDetails(row?.original?._id);
                        setOpen2(!open2);
                    }}
                >
                    <span className="mr-2"><Icons.Eye /></span>
                    <span className="theme-color">View</span>
                </Button>
            </PopoverTrigger>
            <PopoverContent
                onMouseEnter={() => setIsPopoverOpen(true)}
                onMouseLeave={() => setIsPopoverOpen(false)}
            >
                <div className="text-sm text-gray-700">
                    <div className="space-y-3">
                        <div className="flex justify-between gap-8 items-center">
                            <span className="font-semibold theme-color text-xs">
                                {contact_info?.company_name || "N/A"}
                            </span>
                        </div>
                        <div className="flex justify-between gap-8 items-center">
                            <span className="text-gray text-xs font-normal">Contact person</span>
                            <span className="font-semibold theme-color text-xs">
                                {contact_info?.contact_person || "N/A"}
                            </span>
                        </div>
                        <div className="flex justify-between gap-8 items-center">
                            <span className="text-gray text-xs font-normal text-nowrap">Contact number</span>
                            <span className="font-semibold theme-color text-xs">
                                {contact_info?.phone_number || "N/A"}
                            </span>
                        </div>
                        <div className="flex justify-between gap-8 items-start">
                            <span className="text-gray text-xs font-normal text-nowrap">Contact email</span>
                            <span className="font-semibold theme-color text-xs break-all">
                                {contact_info?.email || "N/A"}
                            </span>
                        </div>
                    </div>
                </div>
            </PopoverContent>
        </Popover>
    );
};