import React from 'react';
import PropTypes from 'prop-types';
import { Button, ControlLabel, FormControl, FormGroup, ProgressBar } from 'react-bootstrap';
import ModalWindow from '../../../ModalWindow';

const ContentNoUpgrades = ({
    noUpgradeAvailable,
}) => {
    return (
        <div>
            {noUpgradeAvailable}
        </div>
    );
};

ContentNoUpgrades.propTypes = {
    noUpgradeAvailable: PropTypes.node.isRequired,
};

const ContentUpgradeLayout = ({
    onClick,
    libraries,
    showConfirm,
    onConfirm,
    upgradeComplete,
    onToggleConfirm,
    onUndoUpgrade,
    percentProgress,
    inProgress,
    translations,
    selectedLibraryId,
}) => {
    return (
        <div className="upgradeVersionContainer">
            {(upgradeComplete !== true && inProgress !== true) && (
                <>
                    <FormGroup controlId="formControlsSelect">
                        <FormControl
                            componentClass="select"
                            onChange={onClick}
                            value={selectedLibraryId}
                        >
                            <option value="">{translations.selectVersion}</option>
                            {libraries.map((library, index) => {
                                return (
                                    <option key={index} value={library.id}>{library.version}</option>
                                );
                            })}
                        </FormControl>
                    </FormGroup>
                    <ModalWindow
                        show={showConfirm}
                        onHide={onToggleConfirm}
                        header={
                            <div>
                                {translations.confirmation}
                            </div>
                        }
                        footer={
                            <div>
                                <Button onClick={onConfirm} bsStyle="success">
                                    {translations.yes}
                                </Button>
                                <Button onClick={onToggleConfirm} bsStyle="danger">
                                    {translations.no}
                                </Button>
                            </div>
                        }
                    >
                        {translations.upgradeConfirmation}
                    </ModalWindow>
                </>
            )}
            {(inProgress === true || upgradeComplete === true) && (
                <>
                    <ControlLabel>{translations.progress}</ControlLabel>
                    <ProgressBar
                        now={percentProgress}
                        label={`${percentProgress}%`}
                    />
                </>
            )}
            {upgradeComplete === true && (
                <div className="contentupgrade-complete">
                    <div>{translations.undoTextHTML}</div>
                    <Button
                        bsStyle="danger"
                        onClick={onUndoUpgrade}
                    >
                        {translations.undo}
                    </Button>
                </div>
            )}
        </div>
    );
};

ContentUpgradeLayout.propTypes = {
    onClick: PropTypes.func.isRequired,
    libraries: PropTypes.array,
    showConfirm: PropTypes.bool,
    onConfirm: PropTypes.func,
    upgradeComplete: PropTypes.bool,
    onToggleConfirm: PropTypes.func,
    onUndoUpgrade: PropTypes.func,
    percentProgress: PropTypes.number,
    inProgress: PropTypes.bool,
    selectedLibraryId: PropTypes.string,
    translations: PropTypes.shape({
        version: PropTypes.string.isRequired,
        upgrade: PropTypes.string.isRequired,
        confirmation: PropTypes.string.isRequired,
        yes: PropTypes.string.isRequired,
        no: PropTypes.string.isRequired,
        upgradeConfirmation: PropTypes.string.isRequired,
        progress: PropTypes.string.isRequired,
        undoText: PropTypes.string.isRequired,
        undo: PropTypes.string.isRequired,
        selectVersion: PropTypes.string.isRequired,
        undoTextHTML: PropTypes.node.isRequired,
    }).isRequired,
};

ContentUpgradeLayout.defaultProps = {
    showConfirm: false,
    libraries: [],
    readyForUpgrade: false,
};

export {
    ContentUpgradeLayout as default,
    ContentNoUpgrades,
};