Untitled

import React from 'react';
import { connect } from 'react-redux';
import { changeSystemState, fetchChamDiemHistory } from '../redux';
import { submitDiem, getUserAll } from 'modules/_default/fwUser/redux';
import lodash from 'lodash';
import moment from 'moment';
import teamData from '../controller/teamData';
class RoundScreen extends React.Component {
    state = { lockTick: 0, selectedPoint: null, roundMasterTime: 0, isSubmitting: false };
    clock = null;

    componentDidMount() {
        T.ready(() => {
            this.props.getUserAll();
            const { roundNumber } = this.props.system;
            const roundTeamKey = `round${roundNumber}Team`;
            T.socket.on(`round${roundNumber}UpdateTeam`, teamData => this.props.changeSystemState({ [roundTeamKey]: teamData }));
            const setRoundTime = (roundTimeNumber) => this.setState({
                roundMasterTime: roundTimeNumber ? new Date().getTime() + roundTimeNumber * 1000 : 0
            });
            this.clock = setInterval(() => this.setState({ lockTick: this.state.lockTick + 1 }), 1000);
            if (this.props.system) {
                // const { roundNumber } = this.props.system;
                const roundTime = this.props.system[`round${roundNumber}TimeMasterNumber`];
                roundTime && setRoundTime(roundTime);
            }

            this.props.fetchChamDiemHistory();
        });
    }

    componentWillUnmount() {
        this.clock && clearInterval(this.clock);
    }

    renderTime = (time = 0) => {
        time = Math.abs(time);
        const minute = ('0' + Math.floor(time / 60)).slice(-2);
        const second = ('0' + (time % 60)).slice(-2);
        return `${minute}:${second}`;
    };

    handlePointClick = (point) => {
        this.setState({ selectedPoint: point });
    };

    submitDiemHandler = () => {
        const { selectedPoint, isSubmitting } = this.state;
        const { roundNumber } = this.props.system;

        if (isSubmitting || selectedPoint === null) return;

        const roundTeam = this.props.system[`round${roundNumber}Team`];
        const teamInfo = this.props.user?.list?.find(team => team._id === roundTeam);
        const teamName = teamInfo ? `${teamInfo.lastname} ${teamInfo.firstname}` : '';

        T.confirm(`Xác nhận bạn muốn chấm ${selectedPoint} điểm cho đội ${teamName} không?`,
            '',
            true,
            (confirmed) => {
                if (confirmed) {
                    this.setState({ isSubmitting: true });

                    this.props.submitDiem({
                        teamId: roundTeam,
                        point: selectedPoint,
                        roundNumber: roundNumber,
                        teamName: teamName
                    }, () => {
                        this.setState({
                            selectedPoint: null,
                            isSubmitting: false
                        });
                    });
                }
            }
        );
    };

    renderHistory = () => {
        const { chamDiemHistory } = this.props.system;

        if (!chamDiemHistory || chamDiemHistory.length === 0) {
            return (
                <div className="alert alert-info">
                    <i className="fa fa-info-circle mr-2"></i>
                    Chưa có lịch sử chấm điểm
                </div>
            );
        }

        return (
            <div className="table-responsive">
                <table className="table table-sm table-striped">
                    <thead className="thead-dark">
                        <tr>
                            <th>Thời gian</th>
                            <th>Đội thi</th>
                            <th>Điểm</th>
                        </tr>
                    </thead>
                    <tbody>
                        {chamDiemHistory.slice(0, 10).map((item) => (
                            <tr key={item.id}>
                                <td>
                                    <small className="text-muted">
                                        {moment(item.timestamp).format('HH:mm:ss')}
                                    </small>
                                </td>
                                <td>
                                    <span className="badge badge-info">
                                        {item.teamName}
                                    </span>
                                </td>
                                <td>
                                    <span className="badge badge-success font-weight-bold">
                                        {item.point}
                                    </span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        );
    };

    render() {
        const { roundNumber, chamDiemHistory } = this.props.system;
        const roundTeam = this.props.system[`round${roundNumber}Team`];
        const canMaster = this.props.system[`round${roundNumber}CanMaster`];
        const lockSupporter = this.props.system[`round${roundNumber}LockSupporter`];
        const screenState = this.props.system[`round${roundNumber}ScreenState`];

        const mapperDiemRange = {
            1: Array.from({ length: 20 - 10 }, (_, i) => i + 11),
            2: [],
            3: [],
            4: [],
            7: Array.from({ length: 20 - 10 + 1 }, (_, i) => i + 10),
        };

        const diemRange = mapperDiemRange[roundNumber] || Array.from({ length: 11 }, (_, i) => i + 10);
        const diemGroup = lodash.chunk(diemRange, 6);
        const { selectedPoint, isSubmitting } = this.state;

        const currentTeam = this.props.user?.list?.find(team => team._id === roundTeam);
        const teamName = currentTeam ? `${currentTeam.lastname} ${currentTeam.firstname}` : '';

        return (
            <div className="container-fluid p-3">
                {chamDiemHistory && chamDiemHistory.length > 0 && (
                    <div className="card mb-3">
                        <div className="card-header bg-info text-white">
                            <h6 className="mb-0">
                                <i className="fa fa-history mr-2"></i>
                                Lịch sử chấm điểm ({chamDiemHistory.length})
                            </h6>
                        </div>
                        <div className="card-body p-2">
                            {this.renderHistory()}
                        </div>
                    </div>
                )}

                <div className="mb-2 font-weight-bold">Chọn điểm của bạn:</div>
                <div className="d-flex justify-content-start flex-wrap">
                    {diemGroup.map((group, groupIndex) => (
                        <div key={groupIndex} className="btn-group d-block mb-2" style={{ width: '100%' }}>
                            {group.map((item, index) => (
                                <button
                                    key={index}
                                    className={`btn ${selectedPoint == item ? 'btn-success' : 'btn-secondary'}`}
                                    type="button"
                                    style={{
                                        minWidth: '2em',
                                        margin: '2px',
                                        fontSize: '1.2rem',
                                        fontWeight: 'bold',
                                        padding: '10px 15px',
                                        borderRadius: '8px',
                                    }}
                                    onClick={(e) => {
                                        e.preventDefault();
                                        this.handlePointClick(item);
                                    }}
                                    disabled={isSubmitting}
                                >
                                    {item}
                                </button>
                            ))}
                        </div>
                    ))}
                </div>

                {selectedPoint !== null && (
                    <div className="mt-3 text-center">
                        <h5>Điểm đã chọn: <span className="text-success">{selectedPoint}</span></h5>
                        {roundTeam && (
                            <h6>Cho đội: <span className="text-primary">{teamName}</span></h6>
                        )}

                        <button
                            className="btn btn-success btn-lg mt-2"
                            onClick={this.submitDiemHandler}
                            disabled={isSubmitting}
                        >
                            {isSubmitting ? (
                                <>
                                    <i className="fa fa-spinner fa-spin mr-2"></i>
                                    Đang gửi...
                                </>
                            ) : (
                                'Gửi điểm'
                            )}
                        </button>
                    </div>
                )}
            </div>
        );
    }
}

const mapStateToProps = state => ({ system: state.system, user: state.framework.user });
const mapActionsToProps = { changeSystemState, submitDiem, getUserAll, fetchChamDiemHistory };
export default connect(mapStateToProps, mapActionsToProps)(RoundScreen);