import { FunctionComponent, useContext } from 'react'
import { useTranslation } from 'react-i18next'

import { Context } from '../reducer/Store'

const ProgressBar: FunctionComponent = () => {
    // @ts-ignore
    const { state } = useContext(Context)
    const { t } = useTranslation()

    return (
        <div>
            <div className='flex mb-0.5 items-center justify-between'>
                <div>
                    <span
                        className='text-xs font-semibold inline-block py-1 px-2 uppercase text-eurosz'
                    >
                        {(() => {
                            if (state.completed === 100) {
                                return t('dlCompleted')
                            }
                            return t('dlProgress')
                        })()}
                    </span>
                </div>
                <div className='text-right'>
                    <span className='text-xs font-semibold inline-block text-eurosz'>
                        {state.completed}
                        %
                    </span>
                </div>
            </div>
            <div className='overflow-hidden h-3 mb-2 text-xs flex rounded bg-progress-gray'>
                <div
                    style={{ width: `${state.completed}%` }}
                    className='ease-in-out duration-500 shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-progress-gold'
                />
            </div>
            <div className='flex mb-0.5 items-center justify-between'>
                <div>
                    <span
                        className='text-xs font-semibold inline-block py-1 px-2 uppercase text-eurosz'
                    >
                        {(() => {
                            if (state.fileProgress === 100) {
                                return t('dlCompleted')
                            }
                            return t('dlFile', { currentFile: state.currentFile })
                        })()}
                    </span>
                </div>
                <div className='text-right'>
                    <span className='text-xs font-semibold inline-block text-eurosz'>
                        {state.fileProgress}
                        %
                    </span>
                </div>
            </div>
            <div className='overflow-hidden h-3 mb-4 text-xs flex rounded bg-progress-gray'>
                <div
                    style={{ width: `${state.fileProgress}%` }}
                    className='ease-in-out duration-500 shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-progress-gold'
                />
            </div>
        </div>
    )
}
export default ProgressBar