import React, { useState ,useEffect } from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
import { fetchalldevices ,handleDeleteDevice ,ConnectDisconnectDevice} from
'../../../../services/api/integrationapi';
import ConfigModal from './ConfigModal';
import DeleteModal from './DeleteModal';
import { tokens } from
"../../../../nct_frontend_common_components/src/theme/Theme";
import { useTheme } from '@mui/material';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

const AllDevices = () => {

const theme = useTheme();
const colors = tokens(theme.palette.mode);
const isLightMode = theme.palette.mode === 'light';
const [dropdown, setDropdown] = useState(null);
const [isOpen, setIsOpen] = useState(false);
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [currentIndex, setCurrentIndex] = useState(0);
const [devices, setDevices] = useState([]);
const [deviceToDelete, setDeviceToDelete] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchDevices = async () => {
try {
const allDevices = await fetchalldevices();
console.log("API response of BARCODE READER", allDevices.data.Data.data);

setDevices(allDevices.data.Data.data);
console.log("this is the all devices",allDevices.data.Data.data);
} catch (error) {
console.error("Failed to fetch devices:", error);
setDevices([]);
}
};

fetchDevices();
}, []);

const handlePrevious = () => {

if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1);
}
};

const handleNext = () => {

if (currentIndex + 4 < scanners.length) {
setCurrentIndex(currentIndex + 1);
}
};

const toggleDropdown = (index) => {

setDropdown(index === dropdown ? null : index);
};
 const HandleModalopen = () => {
setIsOpen(true);
};
const HandleModalclose = () => {
setIsOpen(false);
};
const deletemodalopen = (deviceId) => {
setDeviceToDelete(deviceId);
setDeleteModalOpen(true);
};
const deletemodalclose = () => {
setDeleteModalOpen(false);
};

const handleConnectDisconnect = async (deviceId) => {

try {
await ConnectDisconnectDevice(deviceId);
console.log(`Device ${deviceId} connected/disconnected successfully.`);
} catch (error) {
console.error(`Error connecting/disconnecting device ${deviceId}:`, error);
}
};
// Filter devices based on type
const scanners = devices.filter(device => device.Type === 'SCANNER');
console.log("Scanner device found:", scanners);
const printers = devices.filter(device => device.Type === 'PRINTER');
const rfidDevices = devices.filter(device => device.Type === 'RFID DEVICE');
const barcodeReaders = devices.filter(device => device.Type === 'BARCODE
READER');

return (
<div className="all-devices-container" style={{height:'70vh',
overflowY:'scroll',padding:'20px'}}>
{/* Scanner Section */}
<div className="device-section">
<h2
style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>Scanners</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}

<div className="device-cards flex space-x-3">
{scanners
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div
 className="dots absolute"
style={{
position: 'absolute',
top: '10px', // Position dots at the top of the card
right: '10px', // Align dots to the right side
cursor: 'pointer', // Change the cursor to pointer for interactivity
fontSize: '1.5em', // Adjust the size of the icon
zIndex: 10, // Ensure the icon is above other content
}}
onClick={() => toggleDropdown(index)}
>
<FontAwesomeIcon icon={faEllipsisV} />
</div>

<div className="device-image">
<img src={device.imageUrl} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === 'ERROR' && '⚠️'}
</span>
</h3>
</div>

{/* Dropdown Menu */}

{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
 <button
type="button"
onClick={deletemodalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}

{currentIndex + 4 < scanners.length && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= scanners.length}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

{/* Printer Section */}

<div className="device-section">
<h2
style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>Printers</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}

<div className="device-cards flex space-x-2">
{printers
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div className="dots absolute" onClick={() =>
toggleDropdown(index)}>
<FontAwesomeIcon icon={faEllipsisV} />
</div>
<div className="device-image">
 <img src={device.imageUrl} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === 'ERROR' && '⚠️'}
</span>
</h3>
</div>

{/* Dropdown Menu */}

{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={deletemodalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}

 {currentIndex + 4 < printers.length && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= printers.length}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

<div className="device-section">
<h2 style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>RFID
Devices</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}

<div className="device-cards flex space-x-2">
{rfidDevices
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div className="dots absolute" onClick={() =>
toggleDropdown(index)}>
<FontAwesomeIcon icon={faEllipsisV} />
</div>
<div className="device-image">
<img src={device.imageUrl} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === 'ERROR' && '⚠️'}
</span>
</h3>
</div>
 {/* Dropdown Menu */}
{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={deletemodalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}

{currentIndex + 4 < rfidDevices.length && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= rfidDevices.length}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

<div className="device-section">
 <h2
style={{fontSize:'1.5rem',marginBottom:'10px',marginTop:'10px'}}>Barcode
Reader</h2>
<div className="relative flex items-center">
{/* Backward Button */}
{currentIndex > 0 && (
<button
type="button"
onClick={handlePrevious}
className="px-3 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex === 0}
>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
)}

{/* Device Cards Container */}

<div className="device-cards flex space-x-2">
{barcodeReaders
.slice(currentIndex, currentIndex + 4)
.map((device, index) => (
<div key={index} className="device-card p-4 bg-white shadow-md
rounded-lg">
<div className="dots absolute" onClick={() =>
toggleDropdown(index)}>
<FontAwesomeIcon icon={faEllipsisV} />
</div>
<div className="device-image">
<img src={device.imageUrl} alt={device.device_Name}
className="w-full h-auto" />
</div>
<div className="device-details">
<h3 className="font-semibold text-lg">{device.device_Name}</h3>
<h3><strong>Device Type:</strong> {device.device_Type}</h3>
<h3>
<strong>Status:</strong>
<span className={`status ${device.Status.toLowerCase()}`}>
{device.status === 'ONLINE' && '✔️'}
{device.status === 'OFFLINE' && '❌'}
{device.status === 'ERROR' && '⚠️'}
</span>
</h3>
</div>

{/* Dropdown Menu */}

{dropdown === index && (
<div className="dropdown-menu absolute bg-white shadow-lg
rounded-md p-2 z-10">
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Connect
</button>
<button
type="button"
 onClick={HandleModalopen}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Config
</button>
<button
type="button"
onClick={() => handleConnectDisconnect(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Disconnect
</button>
<button
type="button"
onClick={() => deletemodalopen(device.id)}
className="block px-2 py-1 rounded-md hover:bg-gray-500
hover:text-white"
>
Remove
</button>
</div>
)}
</div>
))}
</div>

{/* Forward Button */}

{currentIndex + 4 < barcodeReaders.length && (
<button
type="button"
onClick={handleNext}
className="px-4 py-2 rounded-full transition duration-300 hover:bg-
gray-300 disabled:opacity-50"
disabled={currentIndex + 4 >= barcodeReaders.length}
>
<FontAwesomeIcon icon={faChevronRight} />
</button>
)}
</div>
</div>

{/* Modal Components */}

<ConfigModal open={isOpen} onClose={HandleModalclose} />
<DeleteModal
isOpen={deleteModalOpen}
deletemodalclose={deletemodalclose}
onDelete={() => handleDeleteDevice(deviceToDelete, setDevices,
deletemodalclose)} // Use the delete function here
/>
</div>
);
};

export default AllDevices;