"use client"

import { useState, useEffect } from "react";
import Swal from "sweetalert2";

interface ClearAuthModalProps {
    chargepoint_id: string;
    token: string;
    onClose: () => void;
}

interface LocalVersionResponse { 
    list_version: number
}

export default function GetLocalVersionModal({
    chargepoint_id, onClose, token,
} : ClearAuthModalProps) {
    const [listVersion, setListVersion] = useState<number | null>(null);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const loadChargerDetail = async () => {
            Swal.fire({
                title: "Processing Get Local Version...",
                text: "Please wait",
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                },
            });
            try {
                setLoading(true);
                const fd = new FormData();
                fd.append("charge_point_id", chargepoint_id);
                fd.append("token", token); 

                const response = await fetch("/api/ocpp/version", {
                    method: "POST",
                    body: fd,
                });

                if (!response.ok) {
                    onClose();
                    Swal.fire({
                        icon: "error",
                        title: "Failed",
                        text: "Something went wrong",
                        allowOutsideClick: false,
                    });
                    return;
                }

                Swal.close();
                const result = await response.json();
                if (!result.result) {
                    onClose();
                    Swal.fire({
                        icon: "error",
                        title: "Failed",
                        text: result.msg || "Something went wrong",
                        allowOutsideClick: false,
                    });
                    return;
                }
                const version = result.data?.list_version ?? 0;
                setListVersion(version);
            } catch (err) {
                onClose();
                Swal.close();
                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: "Something went wrong...",
                    allowOutsideClick: false,
                });
                return;;
            } finally {
                setLoading(false);
            }
        };

        loadChargerDetail();
    }, [token])
    return (
        <>
            <div className="modal modal-blur fade show d-block" tabIndex={-1} role="dialog" style={{ backgroundColor: "rgba(0, 0, 0, 0.4)" }}>
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">Get Local Version Chargepoint - {chargepoint_id}</h5>
                            <button type="button" className="btn-close" onClick={onClose}></button>
                        </div>

                        <div className="modal-body">
                            <table className="table table-sm table-borderless">
                                <tbody>
                                    <tr>
                                        <td>Version Chargepoint</td>
                                        <td className="text-secondary text-end">{listVersion}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div className="modal-footer">
                            <button type="button" className="btn btn-danger btn-outline" onClick={onClose}>Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}