import React, { useEffect, useState } from 'react';
import { layout } from '../../styles';
import Modal from '../Modal';
import * as otaUpdateService from '../../services/otaUpdate/otaUpdate.service';
import DebugSection from '../../components/Debug/Section/DebugSection';

const DebugOtaSyncModal = () => {
    const [logs, setLogs] = useState<string[]>([]);

    useEffect(() => {
        const addLog = (log: string) => {
            setLogs(prevLogs => [...prevLogs, log]);
        };
        otaUpdateService
            .sync(status => addLog(status))
            .catch(error => addLog(`error: ${error}`))
            .finally(() => addLog('done'));
    }, []);

    return (
        <Modal
            style={layout.fill}
            headerText="Debug Ota Sync"
            isLoading={false}
        >
            <DebugSection name={'Logs'} items={logs} />
        </Modal>
    );
};

export default DebugOtaSyncModal;