import approx from 'approximate-number'
import classNames from 'classnames'
import React from 'react'
import { convertSecondsToFormattedTime } from '../../../../util/date-time'

const TaskComponent = ({ task, flopsLeft }) => {
    let icon
    let progressBarContent
    let percent
    let infoTitle

    if (flopsLeft === task.totalFlopCount) {
        icon = 'hourglass-half'
        progressBarContent = ''
        percent = 0
        infoTitle = 'Not submitted yet'
    } else if (flopsLeft > 0) {
        icon = 'refresh'
        progressBarContent = approx(task.totalFlopCount - flopsLeft) + ' FLOP'
        percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount
        infoTitle =
            progressBarContent + ' (' + Math.round(percent * 10) / 10 + '%)'
    } else {
        icon = 'check'
        progressBarContent = 'Completed'
        percent = 100
        infoTitle = 'Completed'
    }

    return (
        <li className="list-group-item flex-column align-items-start">
            <div className="d-flex w-100 justify-content-between">
                <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
                <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
            </div>
            <div title={infoTitle} style={{ display: 'flex' }}>
        <span
            className={classNames('fa', 'fa-' + icon)}
            style={{ width: '20px' }}
        />
                <div className="progress" style={{ flexGrow: 1 }}>
                    <div
                        className="progress-bar"
                        role="progressbar"
                        aria-valuenow={percent}
                        aria-valuemin="0"
                        aria-valuemax="100"
                        style={{ width: percent + '%' }}
                    >
                        {progressBarContent}
                    </div>
                </div>
            </div>
        </li>
    )
}

export default TaskComponent