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

import processIcon from "@Images/img-pending.png";

import checkListIcon from "@Images/checklist.png";
import workflowIcon from "@Images/workflow2.png";
import editIcon from "@Images/edit.png";
import deactiveIcon from "@Images/deactive.png";
import fieldCCIcon from "@Images/field-cc.png";
import { X, Plus, PencilFill } from "react-bootstrap-icons";

export interface IProps {}

type SubItem = {
step?: number;
title?: string;
assignmentRule?: string;
assignedTo?: string;
};
const workflowItems = [
{
step: 1,
title: "Người lập phiếu",
assignmentRule: "Initiator",
assignedTo: "",
},
{
step: 2,
title: "Trưởng phòng ban",
assignmentRule: "Assign users from previous step",
assignedTo: "",
},
{
step: 3,
title: "Phòng HCNS (Chị Hương)",
assignmentRule: "Assign users from previous step",
assignedTo: "",
},
{
step: 4,
title: "Phê duyệt",
assignmentRule: "Assign users from previous step",
assignedTo: "",
},
];

const renderRows = () => {

return workflowItems.map((item) => (
<tr>
<td>{item.step}</td>
<td>{item.title}</td>
<td>{item.assignmentRule}</td>
<td>{item.assignedTo}</td>
<td>
<a href="javascript:void(0)">
<img src={workflowIcon} />
</a>
</td>
<td>
<a href="javascript:void(0)">
<img src={checkListIcon} />
</a>
 </td>
<td>
<span>
<a href="javascript:void(0)">
<img src={editIcon} />
</a>
</span>
<span>
<a href="javascript:void(0)">
<img src={deactiveIcon} />
</a>
</span>
<span>
<a href="javascript:void(0)">
<img src={fieldCCIcon} />
</a>
</span>
</td>
<td>
<a href="javascript:void(0)">
<Plus size={28} color="green" />
</a>
</td>
<td>
<a href="">
<PencilFill size={15} color="#0072c6" />
</a>
</td>
<td>
<a href="">
<X size={28} color="red" />
</a>
</td>
</tr>
));
};

const ProcessDesign: React.FC<IProps> = (props: IProps) => {

return (
<div className="WorkflowDiagram">
<div className="workflow-step workflows">
<div className="process">
<span className="ic-start"></span>
<div className="note-step">
<a></a>
</div>
<div className="step-process pending">
<a>
<span className="img-process">
<img src={processIcon} />
</span>
<span className="text">Người lập phiếu</span>
</a>
<div className="user-process"></div>
</div>
<div className="note-step">
<a></a>
</div>
<div className="step-process pending">
 <a>
<span className="img-process">
<img src={processIcon} />
</span>
<span className="text">Trưởng phòng ban</span>
</a>
<div className="user-process"></div>
</div>
<div className="note-step">
<a></a>
</div>
<div className="step-process pending">
<a>
<span className="img-process">
<img src={processIcon} />
</span>
<span className="text">Phòng HCNS (Chị Hương)</span>
</a>
<div className="user-process"></div>
</div>
<div className="note-step">
<a></a>
</div>
<div className="step-process pending">
<a>
<span className="img-process">
<img src={processIcon} />
</span>
<span className="text">Phê duyệt</span>
</a>
<div className="user-process"></div>
</div>
<div className="note-step">
<a></a>
</div>
<span className="ic-end"></span>
</div>
<table className="table">
<thead>
<tr>
<th>Step</th>
<th>Tiêu đề</th>
<th>Assignment Rule</th>
<th>Assigned To</th>
<th>Quy trình liên quan</th>
<th>Danh sách check list</th>
<th>Cấu hình</th>
<th>Quy định</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody className="table-body">{renderRows()}</tbody>
</table>
</div>
</div>
);
};
export default ProcessDesign;