cod-fe/src/pages/eventAlarm/component/DetailEventAlarm.jsx

import React, { memo, useState, useEffect } from 'react';
import { Button, Row, Col, Card, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import TableList from '../../../components/Global/TableList';

// Dummy data untuk riwayat alarm
const initialAlarmsData = [
    {
        alarm_id: 1,
        tanggal: '2025-01-15 08:30:00',
        plant_sub_section: 'Plant A - Section 1',
        device: 'Device 001',
        tag: 'TEMP-001',
        engineer: 'Pras',
    },
    {
        alarm_id: 2,
        tanggal: '2025-01-15 09:15:00',
        plant_sub_section: 'Plant B - Section 2',
        device: 'Device 002',
        tag: 'PRESS-002',
        engineer: 'Bagus',
    },
    {
        alarm_id: 3,
        tanggal: '2025-01-15 10:00:00',
        plant_sub_section: 'Plant A - Section 3',
        device: 'Device 003',
        tag: 'FLOW-003',
        engineer: 'iqbal',
    },
    {
        alarm_id: 4,
        tanggal: '2025-01-15 11:45:00',
        plant_sub_section: 'Plant C - Section 1',
        device: 'Device 004',
        tag: 'LEVEL-004',
        engineer: 'riski',
    },
    {
        alarm_id: 5,
        tanggal: '2025-01-15 13:20:00',
        plant_sub_section: 'Plant B - Section 3',
        device: 'Device 005',
        tag: 'TEMP-005',
        engineer: 'anton',
    },
    {
        alarm_id: 6,
        tanggal: '2025-01-15 14:00:00',
        plant_sub_section: 'Plant A - Section 2',
        device: 'Device 006',
        tag: 'PRESS-006',
        engineer: 'kurniawan',
    },
    {
        alarm_id: 7,
        tanggal: '2025-01-15 15:30:00',
        plant_sub_section: 'Plant C - Section 2',
        device: 'Device 007',
        tag: 'FLOW-007',
        engineer: 'wawan',
    },
];

const columns = [
    {
        title: 'No',
        key: 'no',
        width: '5%',
        align: 'center',
        render: (_, __, index) => index + 1,
    },
    {
        title: 'Tanggal',
        dataIndex: 'tanggal',
        key: 'tanggal',
        width: '15%',
    },
    {
        title: 'Plant Sub Section',
        dataIndex: 'plant_sub_section',
        key: 'plant_sub_section',
        width: '20%',
    },
    {
        title: 'Device',
        dataIndex: 'device',
        key: 'device',
        width: '15%',
    },
    {
        title: 'Tag',
        dataIndex: 'tag',
        key: 'tag',
        width: '15%',
    },
    {
        title: 'Engineer',
        dataIndex: 'engineer',
        key: 'engineer',
        width: '15%',
    },
];

const ListEventAlarm = memo(function ListEventAlarm(props) {
    const [trigerFilter, setTrigerFilter] = useState(false);
    const [alarmsData] = useState(initialAlarmsData);

    const defaultFilter = { search: '' };
    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
    const [searchValue, setSearchValue] = useState('');

    const navigate = useNavigate();

    // Dummy data function to simulate API call
    const getAllEventAlarm = async (params) => {
        // Simulate API delay
        await new Promise((resolve) => setTimeout(resolve, 300));

        // Extract URLSearchParams
        const searchParam = params.get('search') || '';
        const page = parseInt(params.get('page')) || 1;
        const limit = parseInt(params.get('limit')) || 10;

        console.log('getAllEventAlarm called with:', { searchParam, page, limit });

        // Filter by search
        let filteredAlarms = alarmsData;
        if (searchParam) {
            const searchLower = searchParam.toLowerCase();
            filteredAlarms = alarmsData.filter(
                (alarm) =>
                    alarm.tanggal.toLowerCase().includes(searchLower) ||
                    alarm.plant_sub_section.toLowerCase().includes(searchLower) ||
                    alarm.device.toLowerCase().includes(searchLower) ||
                    alarm.tag.toLowerCase().includes(searchLower) ||
                    alarm.engineer.toLowerCase().includes(searchLower)
            );
        }

        // Pagination logic
        const totalData = filteredAlarms.length;
        const totalPages = Math.ceil(totalData / limit);
        const startIndex = (page - 1) * limit;
        const endIndex = startIndex + limit;
        const paginatedData = filteredAlarms.slice(startIndex, endIndex);

        return {
            status: 200,
            statusCode: 200,
            data: {
                data: paginatedData,
                total: totalData,
                paging: {
                    page: page,
                    limit: limit,
                    total: totalData,
                    page_total: totalPages,
                },
            },
        };
    };

    useEffect(() => {
        const token = localStorage.getItem('token');
        if (token) {
            if (props.actionMode == 'list') {
                setFormDataFilter(defaultFilter);
                doFilter();
            }
        } else {
            navigate('/signin');
        }
    }, [props.actionMode, alarmsData]);

    const doFilter = () => {
        setTrigerFilter((prev) => !prev);
    };

    const handleSearch = () => {
        setFormDataFilter({ search: searchValue });
        setTrigerFilter((prev) => !prev);
    };

    const handleSearchClear = () => {
        setSearchValue('');
        setFormDataFilter({ search: '' });
        setTrigerFilter((prev) => !prev);
    };

    return (
        <React.Fragment>
            <Card>
                <Row>
                    <Col xs={24}>
                        <Row justify="space-between" align="middle" gutter={[8, 8]}>
                            <Col xs={24} sm={24} md={12} lg={12}>
                                <Input.Search
                                    placeholder="Search alarm by tanggal, plant, device, tag, engineer..."
                                    value={searchValue}
                                    onChange={(e) => {
                                        const value = e.target.value;
                                        setSearchValue(value);
                                        // Auto search when clearing by backspace/delete
                                        if (value === '') {
                                            setFormDataFilter({ search: '' });
                                            setTrigerFilter((prev) => !prev);
                                        }
                                    }}
                                    onSearch={handleSearch}
                                    allowClear={{
                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
                                    }}
                                    enterButton={
                                        <Button
                                            type="primary"
                                            icon={<SearchOutlined />}
                                            style={{
                                                backgroundColor: '#23A55A',
                                                borderColor: '#23A55A',
                                            }}
                                        >
                                            Search
                                        </Button>
                                    }
                                    size="large"
                                />
                            </Col>
                        </Row>
                    </Col>
                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                        <TableList
                            getData={getAllEventAlarm}
                            queryParams={formDataFilter}
                            columns={columns}
                            triger={trigerFilter}
                        />
                    </Col>
                </Row>
            </Card>
        </React.Fragment>
    );
});

export default ListEventAlarm;