import React from 'react';
import PropTypes from 'prop-types';
import './styles/UpgradeModal.scss';
import PreviewModal from '../../atoms/selection-preview/modal/PreviewModal';

import { createNamespace } from '../../tools/namingTools';

const n = createNamespace('upgradeModal');

const UpgradeModal = ({ upgrades, handleClose }) => (
    <PreviewModal
        show
        title={upgrades.title}
        onClose={() => handleClose()}
    >
        <h5 {...n('upgrade-title').props}>{upgrades.text}</h5>

        <div {...n('table-container').props}>
            <table {...n('table-content').props}>
                <thead>
                    <tr>
                        <th {...n('application-title').props}>
                            {upgrades.i18n.application}
                        </th>

                        <th {...n('edition-title').props}>
                            {upgrades.i18n.edition}
                        </th>

                        <th {...n('action-title centered-content').props}>
                            {upgrades.i18n.actions}
                        </th>
                    </tr>
                </thead>

                <tbody>
                    {upgrades.items && upgrades.items.map(upgrade => (
                        <tr key={upgrade.id}>
                            <td {...n('application-name').props}>
                                {upgrade.fromApplicationName}
                            </td>
                            <td {...n('edition-name').props}>
                                {upgrade.fromEditionName}
                            </td>

                            <td {...n('action-button centered-content').props}>
                                <a href={upgrade.url} {...n('button_item button_item--primary button_item--small button_item--button').props} aria-label="select">
                                    <span>{ upgrades.i18n.select }</span>
                                </a>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    </PreviewModal>
);

UpgradeModal.propTypes = {
    upgrades: PropTypes.any.isRequired,
    handleClose: PropTypes.func.isRequired
};

export default UpgradeModal;
