import UiPageNations from "@common/business_components/ui/table/uiPageNations";
import { Table, TableBody, TableCell, TableRow } from "@common/components";
import { useEffect, useState } from "react";

type UiTableProps = {
    headName: React.ReactNode | undefined;
    tableData: { [key: string]: string | number | boolean | object }[];
    headlist: UiHeadProps[];
    pageSize: number;
    total: number;
    children: Record<string, React.ReactNode> | undefined;
    cellClick: ((index: number | undefined, headId: string) => void) | undefined;
    onPageChange: (page: number) => void;
    className?: string;
    resetPageNo?: boolean;
    isEditable?: boolean;
};

type UiHeadProps = {
    id: string;
    title: string;
    align?: string;
    type?: string;
    options?: string[];
};

export function VerticalTable({
    tableData,
    headlist,
    pageSize,
    total,
    children,
    headName,
    cellClick,
    onPageChange,
    className = "",
    resetPageNo = false,
    isEditable = false,
}: UiTableProps) {
    const [cur, setCur] = useState<number>(1);
    const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({});
    useEffect(() => {
        if (resetPageNo) {
            setCur(1);
            onPageChange(1);
        }
    }, [onPageChange, resetPageNo]);

    useEffect(() => {
        if (tableData.length > 0 && tableData[0]) {
            setFormData(tableData[0] as { [key: string]: string | number | boolean });
        }
    }, [tableData]);

    const handleInputChange = (id: string, value: string | number | boolean) => {
        setFormData((prev) => ({
            ...prev,
            [id]: value,
        }));
    };

    const handlePageChange = (page: number) => {
        setCur(page);
        onPageChange(page);
    };

    return (
        <>
            {headName ? (
                <div className="card-header">
                    <h3 className="text-2xl mx-3 font-medium text-label">{headName}</h3>
                </div>
            ) : null}
            <div className={`card !m-[1.2rem] !p-0r ${className}`}>
                <Table variant="secondary">
                    <TableBody className="text-center">
                        {headlist?.map((head) => (
                            <TableRow key={head.id}>
                                {/* 컬럼 제목 */}
                                <TableCell className="font-bold bg-blue-100 text-xs">
                                    {head.title}
                                </TableCell>
                                {/* 데이터 값 또는 입력 필드 */}
                                <TableCell className="text-xs">
                                    {children && children[head.id] ? children[head.id] : isEditable ? (
                                        head.type === "select" ? (
                                            <select
                                                id={head.id}
                                                value={formData[head.id] ?? "-"}
                                                onChange={(e) => handleInputChange(head.id, e.target.value)}
                                                className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0"
                                            >
                                                {head.options?.map((option) => (
                                                    <option key={option} value={option}>
                                                        {option}
                                                    </option>
                                                ))}
                                            </select>
                                        ) : head.type === "input" ? (
                                            <input
                                                id={head.id}
                                                type="text"
                                                value={formData[head.id] ?? ""}
                                                onChange={(e) => handleInputChange(head.id, e.target.value)}
                                                className="w-full text-xl border-radius-0 border border-gray-300 rounded-sm px-2 py-1"
                                            />
                                        ) : (
                                            <span>{formData[head.id] ?? "-"}</span>
                                        )
                                    ) : (
                                        <span>{formData[head.id] ?? "-"}</span>
                                    )}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
                {total > 0 && (
                    <UiPageNations
                        total={total}
                        cur={cur}
                        pageSize={pageSize}
                        onPageChange={handlePageChange}
                    />
                )}
            </div>
        </>
    );
}