import React, { useState } from 'react'
import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
import NavigateCatagory from '../NavigateCatagory'

const Hrm = () => {
    const [selectedCard, setSelectedCard] = useState(0);

    const employee_details = [
        {
            "employee": {
                image: "",
                "name": "John Doe",
                "employee_id": "HR-204",
                "status": "Active",

            },
            "task": {
                "status": "Ongoing",
                "title": "Inspecting Machine X",
                "location": {
                    "floor": 4,
                    "zone": "B"
                },
                "planned_time_hours": 6,
                "time_spent_hours": 2,
                "total_tasks": 12,
                "completed_tasks": 3
            },
            "actions": [
                "Assign Task",
                "Reassign Task",
                "Pause",
                "Emergency Stop"
            ],
            "location": "Floor 4 . Zone B"
        },
        {
            "employee": {
                image: "",
                "name": "Alice Smith",
                "employee_id": "HR-205",
                "status": "Active",

            },
            "task": {
                "status": "Ongoing",
                "title": "Calibrating Sensor Y",
                "location": {
                    "floor": 2,
                    "zone": "A"
                },
                "planned_time_hours": 4,
                "time_spent_hours": 1.5,
                "total_tasks": 10,
                "completed_tasks": 2
            },
            "actions": [
                "Assign Task",
                "Reassign Task",
                "Pause",
                "Emergency Stop"
            ],
            "location": "Floor 4 . Zone B"
        },
        {
            "employee": {
                image: "",
                "name": "Michael Lee",
                "employee_id": "HR-206",
                "status": "Active",

            },
            "task": {
                "status": "Ongoing",
                "title": "Testing Conveyor Belt Z",
                "location": {
                    "floor": 5,
                    "zone": "C"
                },
                "planned_time_hours": 5,
                "time_spent_hours": 3,
                "total_tasks": 8,
                "completed_tasks": 5
            },
            "actions": [
                "Assign Task",
                "Reassign Task",
                "Pause",
                "Emergency Stop"
            ],
            "location": "Floor 4 . Zone B"
        },
    ]

    return (
        <>
            {/* <NavigateCatagory
                category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
                selectedCategory={selectedCategory}
                setSelectedCategory={setSelectedCategory}
            /> */}

            <div className='hrm-container assetManagement-wrapper'>
                {employee_details.map((employee, index) => (
                    <div
                        className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
                        onClick={() => setSelectedCard(index)}
                    >
                        <header>
                            <div className="user-details">
                                <div className="user-image-wrapper">
                                    <img className='user-image' src={employee.employee.image} alt="" />
                                    <div className={`status ${employee.employee.status}`}></div>
                                </div>
                                <div className="details">
                                    <div className="employee-name">{employee.employee.name}</div>
                                    <div className="employee-id">{employee.employee.employee_id}</div>
                                </div>
                            </div>

                            <div className="see-more">View more</div>
                        </header>

                        <div className="content">
                            {/* <div className="task-info">
                                <div className="task-wrapper">
                                    <div className="task-label">
                                        <span className='label-icon'><ListTaskIcon /></span>
                                        <span className='label-text'>Ongoing Task:</span>
                                    </div>
                                    <div className="task-title">{employee.task.title}</div>
                                </div>


                                <div className="task-wrapper">
                                    <div className="task-label">
                                        <span className='label-icon'><LocationPinIcon /></span>
                                        <span className='label-text'>Location:</span>
                                    </div>
                                    <div className="task-title">
                                        Floor {employee.task.location.floor}. Zone {employee.task.location.zone}
                                    </div>
                                </div>
                            </div> */}

                            <div className="task-stats">
                                <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><ClockThreeIcon /></span>
                                        <span>Planned time:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.planned_time_hours} hr</span>
                                </div>
                                {/* <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><SlectedTickIcon /></span>
                                        <span>Total Tasks:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.total_tasks}</span>
                                </div>
                                <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><HourGlassIcon /></span>
                                        <span>Time Spent:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.time_spent_hours} hr</span>
                                </div> */}
                                <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><TargetIcon /></span>
                                        <span>Cost per hr:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.completed_tasks}</span>
                                </div>
                            </div>

                            <div className="location-wrapper">
                                <div className="location-header">
                                    <div className="icon">
                                        <LocationPinIcon />
                                    </div>
                                    <div className="header">Location:</div>
                                </div>
                                <div className="location-value">{employee.location}</div>
                            </div>
                            <div className="task-actions">
                                {/* <button className="btn btn-default">Assign Task</button>
                                <button className="btn btn-default">Reassign Task</button> */}
                                <button className="btn btn-default">Pause</button>
                                <button className="btn btn-danger">Emergency Stop</button>
                            </div>
                        </div>

                    </div>
                ))}
            </div>
        </>
    )
}

export default Hrm