import React, { useState } from 'react';
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import { selectLogsLoading, selectLogs, requestLogsThunk } from './radioSlice';
import styles from './LogViewer.module.scss';

export function LogViewer() {
    const loading = useAppSelector(selectLogsLoading);
    const logs = useAppSelector(selectLogs);
    const [hidden, setHidden] = useState(true);

    const dispatch = useAppDispatch();

    return (
        <div className={styles.logsContainer}>
            <div className={styles.buttonContainer}>
                <button
                    className={styles.button}
                    onClick={() => dispatch(requestLogsThunk())}
                >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 >
    );
}