opengis/src/App.jsx

import Navbar from "./components/Navbar.jsx";
import Table from "./components/Table.jsx";
import ModalForm from "./components/ModalForm.jsx";
import {useEffect, useState} from "react";
import Pagination from "./components/Pagination.jsx";
import {getEmployees} from "./api/employee.js";
import {showToast} from "./utils/appUtils.js";

function App() {

    const [isOpen, setIsOpen] = useState(false);
    const [modalMode, setModalMode] = useState("add");
    const [tableData, setTableData] = useState([]);
    const [employee, setEmployee] = useState(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [page, setPage] = useState(1);
    const [limit, setLimit] = useState(2);
    const [totalPage, setTotalPage] = useState(1);
    const [allEmployeeData, setAllEmployeeData] = useState([]);

    // โหลดข้อมูลครั้งแรกครั้งเดียว ใช้ allEmployeeData เป็นแหล่งข้อมูลหลักในการแบ่งหน้าใหม่
    useEffect(() => {
        const employeeData = getEmployees();
        setAllEmployeeData(employeeData);
        setTotalPage(Math.ceil(employeeData.length / limit));
    }, []);

    // แบ่งหน้าแสดงข้อมูลใหม่ เมื่อหน้าเปลี่ยน
    useEffect(() => {
        // กรองข้อมูลตาม searchTerm จาก allEmployeeData
        const filtered = allEmployeeData.filter(employee =>
            employee.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            employee.mail.toLowerCase().includes(searchTerm.toLowerCase()) ||
            employee.job.toLowerCase().includes(searchTerm.toLowerCase()) ||
            employee.department.toLowerCase().includes(searchTerm.toLowerCase())
        );

        // คำนวณจำนวนหน้าทั้งหมดใหม่
        const newTotalPage = Math.ceil(filtered.length / limit);
        setTotalPage(newTotalPage);

        // ตรวจสอบว่าหน้าปัจจุบันยังอยู่ในช่วงที่มีข้อมูลหรือไม่
        if (page > newTotalPage && newTotalPage > 0) {
            setPage(newTotalPage);
            return; // ยกเลิกรอบนี้ก่อน รอให้ page เปลี่ยนแล้วค่อยรันใหม่
        }

        const start = (page - 1) * limit;
        const end = page * limit;
        const employeeDataPaginationArray = filtered.slice(start, end);
        setTableData(employeeDataPaginationArray);
    }, [page, allEmployeeData, searchTerm]);

    // เมื่อกดที่ปุ่มใด ๆ ก็ตาม
    const handleOpen = (mode, employee) => {
        // กำหนดค่าตัวแปรที่จำเป็นต่อการทำงานของ Modal Form
        setIsOpen(true);
        setModalMode(mode);
        setEmployee(employee);
    }
    // ตรวจสอบว่าเป็นการกดปุ่มอะไร
    const handleSubmit = (newEmployeeData)=>{
        if(modalMode === 'add'){
            // ในอนาคตจะ Update ข้อมูลด้วย Rest API
            // ปรับปรุงข้อมูลที่จะแสดงใน Table
            setAllEmployeeData((prevData) => {
                const updatedData = [...prevData, newEmployeeData];
                setTotalPage(Math.ceil(updatedData.length / limit));
                return updatedData;
            });
            showToast('เพิ่มข้อมูลเรียบร้อย', 'success');
            console.log('Add button: ', newEmployeeData);
        }
        else{
            console.log('Update button:', newEmployeeData);
            // ในอนาคตจะ Update ข้อมูลในฐานข้อมูลด้วย Rest API
            // ปรับปรุงข้อมูลที่จะแสดงใน Table
            setAllEmployeeData((prevData) => {
                const updatedData = prevData.map((emp) =>
                    emp.id === newEmployeeData.id ? newEmployeeData : emp
                );
                return updatedData;
            });
            showToast('ปรับปรุงข้อมูลเรียบร้อย', 'success');
        }
    }

    // เมื่อกดปุ่มเปลี่ยนหน้า
    const handlePageChange = (value)=>{
        console.log(value);
        if(value === "&laquo"){
            setPage(1);
        }
        else if(value === "&lsaquo"){
            if(page !== 1){
                setPage(page - 1);
            }
        }
        else if(value==="&rsaquo"){
            if(page !== totalPage){
                setPage(page + 1);
            }
        }
        else if(value==="&raquo"){
            setPage(totalPage);
        }
        else if(value === "..."){
            if(page < totalPage){
                setPage(page + 1);
            }
            else{
                setPage(page - 1);
            }
        }
        else{
            setPage(value);
        }
    }

    // ตรวจสอบกรณีที่มีการลบข้อมูลสุดท้ายในหน้า
    const handleDelete = (employeeId) =>{
        setAllEmployeeData((prevData) => {
            const updatedData = prevData.filter(emp => emp.id !== employeeId);
            const newTotalPage = Math.ceil(updatedData.length / limit);

            // ถ้าหน้าที่อยู่เกินหน้าสุดท้ายหลังลบ ให้ลดหน้าลง
            if (page > newTotalPage) {
                setPage(newTotalPage === 0 ? 1 : newTotalPage);
            }

            setTotalPage(newTotalPage);
            return updatedData;
        });
    }

  return (
    <>
        <Navbar onOpen={()=>handleOpen('add')} setSearchTerm={setSearchTerm}/>
        <Table
            handleOpen={handleOpen}
            tableData={tableData}
            onDelete={handleDelete}
        />
        <ModalForm
            isOpen={isOpen}
            onClose={()=>setIsOpen(false)}
            OnSubmit={handleSubmit}
            mode={modalMode}
            employee={employee}
        />
        <Pagination
            totalPage={totalPage}
            page={page}
            limit={limit}
            sibling={1}
            setPage={handlePageChange}
        />
    </>
  )
}

export default App