import React from 'react'
// import tr from './img_end.jpg';


// import { Link } from 'react-router-dom';

function End() {
    let result = ''
    let scores = []
    let score = 0
    const answers = JSON.parse(localStorage.getItem('Answers'))
    const solutions = JSON.parse(localStorage.getItem('Solutions'))
    for (let i = 0; i < answers.length; i++) {

        if (answers[i] === solutions[i]) {

            scores[i] = 1

        }
        else if (answers[i] === 0) {
            scores[i] = -1
        }
        else {

            scores[i] = 0
        }
        score += scores[i]
        if (score <0){
            score =0
        }
    }

    return (
        <>
            <div className="container">
                <h2>채점표</h2>
                <table className="table table-bordered" >
                    <thead>
                        <tr>
                            <th>응시자</th>
                            <th>{localStorage.getItem('name')}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {scores.map((score, index) => {
                            
                            if (score === -1) {
                                result = <tr><td>Quiz {index + 1}</td> <td> 정답이 입력되지 않았습니다. </td></tr>
                            }
                            else if (score === 1) {
                                result = <tr><td>Quiz {index + 1}</td> <td> O </td></tr>
                            }
                            else {
                                result = <tr><td>Quiz {index + 1}</td> <td> X</td></tr>
                            }

                            return result
                        })}
                        <tr>
                            <td>총점</td>
                            <td>{score}점</td>
                        </tr>
                    </tbody>
                </table>
            </div>




        </>

    )
}

export default End;