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(() => {
        otaUpdateService
            .rollbackInfo()
            .then(items => {
                const logs =
                    items.length === 0
                        ? ['No info']
                        : items.map(item => JSON.stringify(item, null, 2));
                setLogs(logs);
            })
            .catch(e => setLogs([JSON.stringify(e)]));
    }, []);

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

export default DebugOtaSyncModal;