import React, { memo, useState, useEffect, useRef } from 'react';
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag } from 'antd';
import {
    PlusOutlined,
    FilterOutlined,
    EditOutlined,
    DeleteOutlined,
    EyeOutlined,
    SearchOutlined,
    FilePdfOutlined,
} from '@ant-design/icons';
import { setFilterData } from './DataFilter';

const { Text } = Typography;

const defCard = {
    r1: {
        style: { fontWeight: 'bold', fontSize: 13 },
        type: 'primary',
        color: '',
        text: 'Cold Work Permit',
        name: '',
    },
    r2: {
        style: { marginLeft: 8, fontSize: 13 },
        type: 'primary',
        color: 'success',
        text: 'Pengajuan',
        name: '',
    },
    r3: {
        style: { fontSize: 12 },
        type: 'secondary',
        color: '',
        text: 'No. IVR/20250203/XXV/III',
        name: '',
    },
    r4: {
        style: { fontSize: 12 },
        type: 'primary',
        color: '',
        text: '3 Feb 2025',
        name: '',
    },
    r5: {
        style: { fontSize: 12 },
        type: 'primary',
        color: '',
        text: 'Lokasi Gudang Robang',
        name: '',
    },
    r6: {
        style: { fontSize: 12 },
        type: 'primary',
        color: '',
        text: 'maka tambahkan user tersebut dalam user_partner dengan partner baru yang ditambahkan diatas',
        name: '',
    },
    action: (e) => {},
};

const TableList = memo(function TableList({
    getData,
    queryParams,
    columns,
    triger,
    mobile,
    rowSelection = null,
}) {
    const [gridLoading, setGridLoading] = useState(false);

    const [data, setData] = useState([]);
    const [pagingResponse, setPagingResponse] = useState({
        totalData: '',
        perPage: '',
        totalPage: '',
    });

    const [pagination, setPagination] = useState({
        current: 1,
        limit: 10,
        total: 0,
    });

    const { useBreakpoint } = Grid;

    useEffect(() => {
        filter(1, 10);
    }, [triger]);

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

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

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

        const resData = await getData(param);
        if (resData) {
            setTimeout(() => {
                setGridLoading(false);
            }, 900);
        }

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

        if (resData.status == 200) {
            setPagingResponse({
                totalData: resData.data.total,
                perPage: resData.data.paging.page_total,
                totalPage: resData.data.paging.limit,
            });

            setPagination((prev) => ({
                ...prev,
                current: resData.data.paging.page,
                limit: resData.data.paging.limit,
                total: resData.data.paging.total,
            }));
        }
    };

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

    const screens = useBreakpoint();

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

    return (
        <div>
            {isMobile && mobile ? (
                <Row gutter={24}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                        {data.map((item) => (
                            <Card
                                key={item.id}
                                title={
                                    (mobile.r1 || mobile.r2) && (
                                        <div
                                            style={{
                                                display: 'flex',
                                                justifyContent: 'space-between',
                                                alignItems: 'center',
                                            }}
                                        >
                                            {mobile.r1 && (
                                                <span style={mobile.r1.style ?? {}}>
                                                    {item[mobile.r1.name] ?? mobile.r1.text ?? ''}
                                                </span>
                                            )}
                                            {mobile.r2 && (
                                                <Tag
                                                    color={mobile.r2.color ?? ''}
                                                    style={mobile.r2.style ?? {}}
                                                >
                                                    {item[mobile.r2.name] ?? mobile.r2.text ?? ''}
                                                </Tag>
                                            )}
                                        </div>
                                    )
                                }
                                style={{ width: '100%' }}
                            >
                                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                                    {mobile.r3 && mobile.r4 && (
                                        <div
                                            style={{
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: 8,
                                                justifyContent: 'space-between',
                                            }}
                                        >
                                            <Text
                                                type={mobile.r3 ? mobile.r3.type ?? 'primary' : ''}
                                                style={mobile.r3 ? mobile.r3.style ?? {} : {}}
                                            >
                                                {item[mobile.r3 ? mobile.r3.name : ''] ?? ''}
                                            </Text>
                                            <Text style={mobile.r4 ? mobile.r4.style ?? {} : {}}>
                                                {item[mobile.r4 ? mobile.r4.name : ''] ?? ''}
                                            </Text>
                                        </div>
                                    )}
                                    {mobile.r5 && (
                                        <Text
                                            type={mobile.r5 ? mobile.r5.type ?? 'secondary' : ''}
                                            style={mobile.r5 ? mobile.r5.style ?? {} : {}}
                                        >
                                            {item[mobile.r5 ? mobile.r5.name : ''] ?? ''}
                                        </Text>
                                    )}
                                </div>
                                {mobile.r6 && (
                                    <div>
                                        <Text
                                            type={mobile.r6 ? mobile.r6.type ?? 'primary' : ''}
                                            style={mobile.r6 ? mobile.r6.style ?? {} : {}}
                                        >
                                            {item[mobile.r6 ? mobile.r6.name : ''] ?? ''}
                                        </Text>
                                    </div>
                                )}
                                <div
                                    style={{
                                        marginTop: 16,
                                        borderTop: '1px solid #f0f0f0',
                                        paddingTop: 8,
                                        textAlign: 'right',
                                    }}
                                >
                                    <Button
                                        type="primary"
                                        size="small"
                                        shape="round"
                                        icon={<EyeOutlined />}
                                        onClick={(e) => {
                                            mobile.action(item);
                                        }}
                                    >
                                        Detail
                                    </Button>
                                </div>
                            </Card>
                        ))}
                    </div>
                </Row>
            ) : (
                <Row gutter={24}>
                    {/* TABLE */}
                    <Table
                        rowSelection={rowSelection || null}
                        columns={columns}
                        dataSource={data.map((item, index) => ({ ...item, key: index }))}
                        pagination={false}
                        loading={gridLoading}
                        scroll={{
                            y: 520,
                        }}
                    />

                    {/* PAGINATION */}
                    <Col xs={24} style={{ marginTop: '16px' }}>
                        <Row justify="space-between" align="middle">
                            <Col>
                                <div>
                                    Menampilkan {pagingResponse.totalPage} Data dari{' '}
                                    {pagingResponse.perPage} Halaman
                                </div>
                            </Col>
                            <Col>
                                <Pagination
                                    showSizeChanger
                                    onChange={handlePaginationChange}
                                    onShowSizeChange={handlePaginationChange}
                                    current={pagination.current}
                                    pageSize={pagination.pageSize}
                                    total={pagination.total}
                                />
                            </Col>
                        </Row>
                    </Col>
                </Row>
            )}
        </div>
    );
});

export default TableList;
