import React, { memo, useState, useEffect, useRef } from 'react';
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
import { AppstoreOutlined, TableOutlined } from '@ant-design/icons';
import CardList from './CardList';

const { Text } = Typography;

const TableList = memo(function TableList({
    getData,
    queryParams,
    columns,
    triger,
    mobile,
    rowSelection = null,
    header = 'name',
    showPreviewModal,
    showEditModal,
    showDeleteDialog,
    cardColor,
    fieldColor,
}) {
    const [gridLoading, setGridLoading] = useState(false);

    const [data, setData] = useState([]);

    const [pagination, setPagination] = useState({
        current_page: 1,
        current_limit: 10,
        total_limit: 0,
        total_page: 1,
    });

    const [viewMode, setViewMode] = useState('list');

    const { useBreakpoint } = Grid;

    useEffect(() => {
        filter(1, pagination.current_limit);
    }, [triger]);

    const filter = async (currentPage, pageSize) => {
        setGridLoading(true);

        const paging = {
            page: Number(currentPage),
            limit: Number(pageSize),
        };

        const param = new URLSearchParams({ ...paging, ...queryParams });
        const resData = await getData(param);

        setData(resData?.data ?? []);

        const pagingData = resData?.paging;

        if (pagingData) {
            setPagination((prev) => ({
                ...prev,
                current_page: pagingData.current_page || 1,
                current_limit: pagingData.current_limit || 10,
                total_limit: pagingData.total_limit || 0,
                total_page: pagingData.total_page || 1,
            }));
        }

        if (resData) {
            setTimeout(() => {
                setGridLoading(false);
            }, 900);
        } else {
            setGridLoading(false);
            return;
        }
    };

    const handlePaginationChange = (page, pageSize) => {
        setPagination((prev) => ({
            ...prev,
            current: page,
            limit: pageSize,
        }));
        filter(page, pageSize);
    };

    const screens = useBreakpoint();

    const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile

    return (
        <div>
            <Segmented
                options={[
                    { value: 'card', icon: <AppstoreOutlined /> },
                    { value: 'table', icon: <TableOutlined /> },
                ]}
                value={viewMode}
                onChange={setViewMode}
            />
            {(isMobile && mobile) || viewMode === 'card' ? (
                <CardList
                    cardColor={cardColor}
                    fieldColor={fieldColor}
                    data={data}
                    column={columns}
                    header={header}
                    showPreviewModal={showPreviewModal}
                    showEditModal={showEditModal}
                    showDeleteDialog={showDeleteDialog}
                />
            ) : (
                <Row gutter={24}>
                    <Table
                        rowSelection={rowSelection || null}
                        columns={columns}
                        dataSource={data.map((item, index) => ({ ...item, key: index }))}
                        pagination={false}
                        loading={gridLoading}
                        scroll={{ y: 520 }}
                    />
                </Row>
            )}
            {/* PAGINATION */}
            <Row justify="space-between" align="middle">
                <Col>
                    <div>
                        Menampilkan {pagination.current_limit} data halaman{' '}
                        {pagination.current_page} dari total {pagination.total_limit} data
                    </div>
                </Col>
                <Col>
                    <Pagination
                        showSizeChanger
                        onChange={handlePaginationChange}
                        onShowSizeChange={handlePaginationChange}
                        current={pagination.current_page}
                        pageSize={pagination.current_limit}
                        total={pagination.total_limit}
                    />
                </Col>
            </Row>
        </div>
    );
});

export default TableList;