/*!
 * Copyright © 2016-2018 European Support Limited
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

import React from 'react';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
import Tooltip from 'react-bootstrap/lib/Tooltip.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import { SVGIcon } from 'onap-ui-react';

const formatTime = time => {
    if (!time) {
        return '';
    }

    const date = new Date(time);
    const options = {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    const newDate = date.toLocaleTimeString('en-US', options);

    return newDate;
};

const DescriptionField = ({ className, text, useTooltip }) => {
    if (useTooltip) {
        return (
            <div className={className}>
                <OverlayTrigger
                    placement="bottom"
                    overlay={
                        <Tooltip
                            className="version-description-tooltip"
                            id="version-description-tooltip">
                            {text}
                        </Tooltip>
                    }>
                    <div className="description-text">{text}</div>
                </OverlayTrigger>
            </div>
        );
    }
    return <div className={className}>{text}</div>;
};

const VersionListItem = ({
    data,
    onSelectVersion,
    onNavigateToVersion,
    onCreateVersion,
    isHeader,
    isSelected,
    isCollaborator
}) => {
    let { modificationTime, name, status, description, additionalInfo } = data;
    const modificationText = !isHeader
        ? formatTime(modificationTime)
        : i18n('Last Edited On');

    return (
        <div
            data-test-id="version-item-row"
            className={`version-item-row ${
                isHeader ? 'header-row' : 'clickable'
            } ${isSelected ? 'selected' : ''}`}
            onClick={
                isHeader
                    ? null
                    : e => {
                          e.stopPropagation();
                          onSelectVersion();
                          onNavigateToVersion();
                      }
            }>
            <div
                className={`version-item-field ${
                    isHeader ? 'header-field item-version' : 'item-version'
                }`}>
                {name}
            </div>
            <div
                className={`version-item-field ${
                    isHeader ? 'header-field item-status' : 'item-status'
                }`}>
                {status}
            </div>
            <div
                className={`version-item-field ${
                    isHeader ? 'header-field' : 'item-last-edited'
                }`}>
                {modificationText}
            </div>
            <DescriptionField
                className={`version-item-field ${
                    isHeader
                        ? 'header-field header-description'
                        : 'item-description'
                }`}
                useTooltip={!isHeader && description}
                text={description}
            />

            {isHeader ? (
                <div className="version-item-field header-field actions">
                    {i18n('Actions')}
                </div>
            ) : (
                <div className="version-item-field item-actions">
                    <div className="version-item-field item-select">
                        <SVGIcon
                            name="check-circle"
                            data-test-id="versions-page-select-version"
                            onClick={e => {
                                e.stopPropagation();
                                onNavigateToVersion();
                            }}
                            label={i18n('Go to this Version')}
                            labelPosition="right"
                        />
                    </div>
                    <div className="version-item-field item-create">
                        {!isHeader &&
                            isCollaborator &&
                            additionalInfo.OptionalCreationMethods.length > 0 &&
                            onCreateVersion && (
                                <SVGIcon
                                    name="plus-circle"
                                    data-test-id="versions-page-create-version"
                                    onClick={e => {
                                        e.stopPropagation();
                                        onCreateVersion();
                                    }}
                                    label={i18n('Create New Version')}
                                    labelPosition="right"
                                    disabled={
                                        !isCollaborator || !onCreateVersion
                                    }
                                />
                            )}
                    </div>
                </div>
            )}
        </div>
    );
};

const VersionList = ({
    versions,
    onSelectVersion,
    onNavigateToVersion,
    onCreateVersion,
    selectedVersion,
    isCollaborator
}) => (
    <div className="version-list">
        <VersionListItem
            data={{
                name: i18n('Version'),
                status: i18n('Status'),
                description: i18n('Description')
            }}
            isHeader
        />
        <div className="version-list-items">
            {versions.map(version => (
                <VersionListItem
                    key={version.id}
                    data={version}
                    onSelectVersion={() => onSelectVersion({ version })}
                    onNavigateToVersion={() => onNavigateToVersion({ version })}
                    onCreateVersion={
                        onCreateVersion
                            ? () => onCreateVersion({ version })
                            : false
                    }
                    isSelected={selectedVersion === version.id}
                    isCollaborator={isCollaborator}
                />
            ))}
        </div>
    </div>
);

export default VersionList;