import { Fragment, useState } from "react";
import { Button, Image, Table } from "react-bootstrap";
import VendorDetails from "./VendorDetails";

const VendorListing = () => {
    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    const [showMenuIndex, setShowMenuIndex] = useState(null);

    const toggleMenu = (index) => {
        setShowMenuIndex(index === showMenuIndex ? null : index);
    };

    const [vendorId, setVendorId] = useState(null);
    const [showVendorDetails, setShowVendorDetails] = useState(false);
    const handleShowVendorDetails = () => {
        setShowVendorDetails(true)
    }
    const handleCloseVendorDetails = () => {
        setShowVendorDetails(false)
    }

    return (
        <Fragment>
            {!showVendorDetails && (
                <div className="row">
                    <div className="col-12 col-lg-12">
                        <div className="rightContent">
                            <div className="d-flex align-items-center justify-content-between px-2 mb-2">
                                <div>
                                    <h2>Vendors</h2>
                                    <p>View all the vendors</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 responsive className="listingTable">
                                <thead>
                                    <tr>
                                        <th>
                                            <label className="check-container mb-0 ps-2" htmlFor="checkh">
                                                <input
                                                    type="checkbox"
                                                    id="checkh"
                                                    className="check-box"
                                                />
                                                <span className="checkmark"></span>
                                            </label>
                                        </th>
                                        <th>Vendor</th>
                                        <th>Vendor Id</th>
                                        <th>Contact Person</th>
                                        <th>Phone Number</th>
                                        <th>Email Address</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {array.map((data, index) => (
                                        <tr key={index}>
                                            <td>
                                                <label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
                                                    <input
                                                        type="checkbox"
                                                        id={`check${index}`}
                                                        className="check-box"
                                                    />
                                                    <span className="checkmark"></span>
                                                </label>
                                            </td>
                                            <td>
                                                <span onClick={() => {
                                                    setVendorId(1);
                                                    handleShowVendorDetails();
                                                }}>
                                                    M S Adventure
                                                </span>
                                            </td>
                                            <td>VN_ET9797</td>
                                            <td>Ridge Johnson</td>
                                            <td>+91 9865 43210</td>
                                            <td>adventuretrails@example.com</td>
                                            <td><div className={`statusDiv ${index % 2 ? "inactive" : "active"}`}>{index % 2 ? "Inactive" : "Active"}</div></td>
                                            <td>
                                                <div className="actions">
                                                    <div className="ellipse" onClick={() => toggleMenu(index)}>
                                                        <Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
                                                    </div>
                                                    {showMenuIndex === index && (
                                                        <div className="menu">
                                                            <ul>
                                                                <li>View</li>
                                                                <li>Deactivate</li>
                                                                <li>Delete</li>
                                                            </ul>
                                                        </div>
                                                    )}
                                                </div>
                                            </td>
                                        </tr>
                                    ))}
                                    <tr>
                                        <td colSpan={7}>Showing Results 10 of 1567</td>
                                    </tr>
                                </tbody>
                            </Table>
                        </div>
                    </div>
                </div>
            )}

            {vendorId && showVendorDetails && (
                <VendorDetails id={vendorId} backClick={handleCloseVendorDetails} />
            )}

        </Fragment>
    );
};

export default VendorListing;