import React, { useState } from 'react';
import { requestLogs } from './radioAPI';
import styles from './LogViewer.module.scss';

export function LogViewer() {
    const [loading, setLoading] = useState(false);
    const [logs, setLogs] = useState<string[] | undefined>(undefined);
    const [hidden, setHidden] = useState(true);

    const onRequestLogsButtonClick = async () => {
        setLoading(true);
        const logs = await requestLogs();
        setLogs(logs);
        setLoading(false);
    };

    return (
        <div className={styles.logsContainer}>
            <div className={styles.buttonContainer}>
                <button
                    className={styles.button}
                    onClick={onRequestLogsButtonClick}
                >Recupera stato</button>
                <button
                    className={styles.button}
                    onClick={() => setHidden(!hidden)}
                >{hidden ? 'Mostra' : 'Nascondi'}</button>
            </div>
            <div className={styles.rowsContainer}>
                {!hidden &&
                    <div className={styles.rows}>
                        {loading ?
                            'Caricamento' :
                            logs?.map((line, i) => <div
                                className={(i % 2) ? styles.even : styles.odd}
                            >{line}</div>)}
                    </div>
                }
            </div>
        </div >
    );
}