/* eslint-disable @next/next/no-img-element */
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @typescript-eslint/no-explicit-any */
import Link from 'next/link';
import React from 'react'
import { dateFormaShipmentCard, formatDate, getSettlementServiceType, getShipmentStatusInfo, returnShipmentDetails, shipmentModeOfTransportIconsById, truncateWithTooltip } from '../../../../lib/Helper';
import { ShipmentStatus } from '@/Constant/enums';

const ShipmentCard = ({ shipments = [], handleEdit, handleView, handlePrint }: any) => {
    const [showDropdown, setShowDropdown] = React.useState<string | null>(null);
    const dropdownContainerRefs = React.useRef<
        Record<string, HTMLDivElement | null>
    >({});

    React.useEffect(() => {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const handleClickOutside = (event: MouseEvent) => {
            const isClickInside = Object.values(dropdownContainerRefs.current).some(
                (ref) => ref && ref.contains(event.target as Node)
            );
            if (!isClickInside) {
                setShowDropdown(null);
            }
        };
    })
    React.useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            const isClickInside = Object.values(dropdownContainerRefs.current).some(
                (ref) => ref && ref.contains(event.target as Node)
            );
            if (!isClickInside) {
                setShowDropdown(null);
            }
        };

        // Attach listener
        document.addEventListener("mousedown", handleClickOutside);

        // Cleanup
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    const toggleDropdown = (id: string) => {
        setShowDropdown(showDropdown === id ? null : id);
    };

    return (
        <>
            <style>
                {
                    `
                    .dropdown-menu.show {
                        font-size: 12px;
                        background: #f7deff;
                        border-color: #dedbdb;
                    }
                    .noCargoImg {
                        object-fit: initial;
                    }
                `
                }
            </style>
            {shipments?.map((shipment: any, index: any) => (
                <div key={index} className="col-lg-3 order-list-box">
                    <div className="card card-style mb-3 mx-0 order-list-heightSame">
                        <div className="content">
                            <div className="maindiv">
                                <div className="w-100">
                                    <div
                                        className="position-relative d-float-center justify-between mb-2 align-items-start w-100"
                                        ref={(el) => {
                                            dropdownContainerRefs.current[shipment?.id] = el;
                                        }}
                                    >
                                        <div className="d-float-center gap-2" style={{ width: '19%' }}>
                                            <div className="box-service-provider shipment-service-img">
                                                <img className={`img-fluid img-service-provider ${returnShipmentDetails(shipment)?._logo === "/images/international/no-image.jpg" ? 'noCargoImg' : ''}`} src={returnShipmentDetails(shipment)?._logo} />
                                            </div>
                                        </div>
                                        <div className="ps-0" style={{ width: '79%' }}>
                                            <div className="d-float-center justify-content-between">
                                                <div className="d-float-center justify-content-start">
                                                    <span className={`badge ${getShipmentStatusInfo(shipment?.status?.id, shipment)?.color} rounded-xl font-12 px-2`}>
                                                        {shipment?.status?.name}
                                                    </span>
                                                    <span className={`badge ${getSettlementServiceType(shipment?.shipmentTypeForCustomer?.id, shipment)?.color} rounded-xl font-12 px-2 ms-1`}>
                                                        {getSettlementServiceType(shipment?.shipmentTypeForCustomer?.id, shipment)?.text}{" "}
                                                    </span>
                                                    <span className="ms-1">
                                                        {shipmentModeOfTransportIconsById(shipment?.mode?.id || null)}
                                                    </span>
                                                </div>
                                                <a
                                                    href="#"
                                                    onClick={(e) => {
                                                        e.preventDefault();
                                                        toggleDropdown(shipment?.id);
                                                    }}
                                                    className="ms-auto"
                                                >
                                                    <i className="fa icon-30 text-end fa fa-ellipsis-v font-12 color-primary" />
                                                </a>
                                                {showDropdown === shipment?.id && (
                                                    <div
                                                        className="dropdown-menu show position-absolute end-0 mt-2"
                                                        style={{
                                                            zIndex: 9999,
                                                            right: 0,
                                                            minWidth: "120px",
                                                        }}
                                                        onClick={(e) => e.stopPropagation()}
                                                    >
                                                        {shipment?.status?.id === ShipmentStatus?.Created ? (
                                                            <button
                                                                type="button"
                                                                className="dropdown-item d-flex align-items-center gap-2"
                                                                style={{ cursor: "pointer" }}
                                                                onClick={(e) => {
                                                                    e.preventDefault();
                                                                    e.stopPropagation();
                                                                    handleEdit(shipment);
                                                                }}
                                                            >
                                                                <i className="fa fa-edit"></i> Edit
                                                            </button>
                                                        ) : ''}
                                                        <button
                                                            type="button"
                                                            className="dropdown-item d-flex align-items-center gap-2"
                                                            style={{ cursor: "pointer" }}
                                                            onClick={(e) => {
                                                                e.preventDefault();
                                                                e.stopPropagation();
                                                                handleView(shipment)
                                                            }}
                                                        >
                                                            <i className="fa fa-eye"></i>{" "}
                                                            View
                                                        </button>
                                                        {false && (
                                                            <button
                                                                className="dropdown-item d-flex align-items-center gap-2"
                                                                onClick={() => handlePrint(shipment)}
                                                            >
                                                                <i className="fa fa-print"></i> Print
                                                            </button>
                                                        )}
                                                    </div>
                                                )}
                                            </div>
                                            <div className="d-float-center justify-content-start mt-1">
                                                <Link href="#" onClick={(e) => {
                                                    e.preventDefault();
                                                    e.stopPropagation();
                                                    handleView(shipment)
                                                }} className="font-500 font-14 mb-0">
                                                    <span className="font-700 font-15">
                                                        {shipment?.shipmentId}
                                                    </span>
                                                </Link>
                                                <p className='mb-0 text-black font-600' title="Shipment Number">{shipment?.shipmentNumber ? ` - ${truncateWithTooltip(shipment?.shipmentNumber)?.text}` : ''}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="">
                                        <div className='d-float-center justify-content-start mb-1'>
                                            <h4 className="color-black provider-title mb-0 mt-0">{returnShipmentDetails(shipment)?._name}</h4>
                                            <h6 className="font-400 font-13 opacity-60 mb-0" title="Shipment Number">
                                                <span className="box font-600">
                                                    {shipment?.vesselName ? `(${shipment?.vesselName})` : ''}
                                                </span>
                                            </h6>
                                        </div>
                                        {/* <p className='mb-0'>Vessael Name: <span className="color-theme font-500">Maersk Mc-Kinney Miller</span></p>                                         */}
                                        <p className='mb-0'>{returnShipmentDetails(shipment)?._address ?? ''}</p>
                                    </div>
                                    {/* <div className="d-float-center justify-content-between mb-2">
                                        <p className="mb-0 font-13 font-400">
                                            <span className="badge card-status rounded-xl font-12 px-2">
                                            {shipment?.shipmentTypeForCustomer?.name}{" "}
                                            </span>
                                        </p>
                                    </div> */}
                                    <hr className='mt-2'></hr>
                                    <div className="d-float-center justify-content-between mb-0">
                                        <h4 className="provider-title mb-0 font-600" style={{ lineHeight: "18px" }}>
                                            <span className="color-purple font-18">{dateFormaShipmentCard(shipment?.shipmentDate)}</span><br />
                                            <span className="font-12 font-400 color-dark">Shipment Date</span>
                                        </h4>
                                        <h4 className="provider-title mb-0 font-600 text-end" style={{ lineHeight: "18px" }}>
                                            <span className="color-red-dark font-18">{dateFormaShipmentCard(shipment?.etaDate)}</span><br />
                                            <span className="font-12 font-400 color-dark">ETA Date</span>
                                        </h4>
                                    </div>
                                    <div className="order-info-icons justify-content-between d-none">
                                        <div className="d-float-center gap-15">
                                            {/* <p className="mb-0 font-13 font-400">
                                            <span className="badge card-status rounded-xl font-12 px-2">
                                                {shipment?.status?.name}{" "}
                                            </span>
                                            </p> */}
                                            <p className="mb-0 font-13 font-400">
                                                <span className="badge card-status rounded-xl font-12 px-2">
                                                    <i className="ri-calendar-line align-middle me-1" />{formatDate(shipment?.shipmentDate || "")}{" "}
                                                </span>
                                            </p>
                                            {/* <div className="d-float-center box">
                                            <i className="ri-calendar-check-line align-middle me-1" />
                                                <h6 className="font-13 font-400 mb-0">
                                                <span className="">
                                                {formatDate(shipment?.shipmentDate || "")}
                                                </span>{" "}
                                                </h6>
                                            </div> */}
                                            <div className="d-float-center weight">
                                                <i className="ri-calendar-line align-middle me-1" />
                                                <h6 className="font-13 font-400 mb-0">
                                                    <span className="">
                                                        {formatDate(shipment?.shipmentDate || "")}
                                                    </span>{" "}
                                                </h6>
                                            </div>
                                        </div>
                                        {/* <div className="d-float-center wallet">
                                        <i className="ri-calendar-line align-middle me-1" />
                                            <h6 className="font-13 font-700 mb-0">
                                            <span className="color-red-dark">
                                                200
                                            </span>
                                            </h6>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </>
    )
}

export default ShipmentCard