/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * 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 i18n from 'nfvo-utils/i18n/i18n.js';
import Form from 'nfvo-components/input/validation/Form.jsx';

import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
import Input from 'nfvo-components/input/validation/Input.jsx';

class SoftwareProductComponentsNetworkView extends React.Component {
    state = {
        localFilter: ''
    };

    render() {
        let {
            dataMap,
            qgenericFieldInfo,
            onQDataChanged,
            isReadOnlyMode
        } = this.props;

        return (
            <div className="vsp-components-network">
                <div className="network-data">
                    <div>
                        {qgenericFieldInfo && (
                            <Form
                                formReady={null}
                                isValid={true}
                                onSubmit={() => this.save()}
                                isReadOnlyMode={isReadOnlyMode}
                                hasButtons={false}>
                                <h3 className="section-title">
                                    {i18n('Network Capacity')}
                                </h3>
                                <div className="rows-section">
                                    <div className="row-flex-components">
                                        <div className="single-col">
                                            <Input
                                                data-test-id="protocolWithHighestTrafficProfileAcrossAllNICs"
                                                label={i18n(
                                                    'Protocol with Highest Traffic Profile across all NICs'
                                                )}
                                                type="select"
                                                groupClassName="bootstrap-input-options"
                                                className="input-options-select"
                                                isValid={
                                                    qgenericFieldInfo[
                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
                                                    ].isValid
                                                }
                                                errorText={
                                                    qgenericFieldInfo[
                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
                                                    ].errorText
                                                }
                                                value={
                                                    dataMap[
                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
                                                    ]
                                                }
                                                onChange={e => {
                                                    const selectedIndex =
                                                        e.target.selectedIndex;
                                                    const val =
                                                        e.target.options[
                                                            selectedIndex
                                                        ].value;
                                                    onQDataChanged({
                                                        'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs': val
                                                    });
                                                }}>
                                                <option
                                                    key="placeholder"
                                                    value="">
                                                    {i18n('Select...')}
                                                </option>
                                                {qgenericFieldInfo[
                                                    'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
                                                ].enum.map(proto => (
                                                    <option
                                                        value={proto.enum}
                                                        key={proto.enum}>
                                                        {proto.title}
                                                    </option>
                                                ))}
                                            </Input>
                                        </div>
                                        <div className="single-col add-line-break">
                                            <Input
                                                data-test-id="networkTransactionsPerSecond"
                                                label={i18n(
                                                    'Network Transactions per Second'
                                                )}
                                                type="number"
                                                onChange={ntps =>
                                                    onQDataChanged({
                                                        'network/networkCapacity/networkTransactionsPerSecond': ntps
                                                    })
                                                }
                                                isValid={
                                                    qgenericFieldInfo[
                                                        'network/networkCapacity/networkTransactionsPerSecond'
                                                    ].isValid
                                                }
                                                errorText={
                                                    qgenericFieldInfo[
                                                        'network/networkCapacity/networkTransactionsPerSecond'
                                                    ].errorText
                                                }
                                                value={
                                                    dataMap[
                                                        'network/networkCapacity/networkTransactionsPerSecond'
                                                    ]
                                                }
                                            />
                                        </div>
                                        <div className="empty-two-col" />
                                    </div>
                                </div>
                            </Form>
                        )}
                    </div>
                    {this.renderNicList()}
                </div>
            </div>
        );
    }

    renderNicList() {
        const { localFilter } = this.state;
        let { isReadOnlyMode, onAddNic, isManual } = this.props;
        return (
            <ListEditorView
                title={i18n('Interfaces')}
                filterValue={localFilter}
                placeholder={i18n('Filter NICs by Name')}
                isReadOnlyMode={isReadOnlyMode}
                onFilter={value => this.setState({ localFilter: value })}
                onAdd={isManual ? onAddNic : null}
                plusButtonTitle={i18n('Add NIC')}
                twoColumns>
                {this.filterList().map(nic =>
                    this.renderNicListItem(nic, isReadOnlyMode)
                )}
            </ListEditorView>
        );
    }

    renderNicListItem(nic, isReadOnlyMode) {
        let { id, name, description, networkName = '' } = nic;
        let { onEditNicClick, version, isManual, onDeleteNic } = this.props;
        return (
            <ListEditorItemView
                key={id}
                isReadOnlyMode={isReadOnlyMode}
                onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
                onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
                <ListEditorItemViewField>
                    <div className="name">{name}</div>
                </ListEditorItemViewField>
                <ListEditorItemViewField>
                    <div className={isManual ? 'details-col' : 'details'}>
                        <div className={isManual ? 'manual-title' : 'title'}>
                            {i18n('Purpose of NIC')}
                        </div>
                        {description && (
                            <div className={isManual ? 'description' : ''}>
                                {description}
                            </div>
                        )}
                    </div>
                    {!isManual && (
                        <div className="details">
                            <div className="title">{i18n('Network')}</div>
                            <div className="artifact-name">{networkName}</div>
                        </div>
                    )}
                </ListEditorItemViewField>
            </ListEditorItemView>
        );
    }

    filterList() {
        let { nicList } = this.props;
        let { localFilter } = this.state;
        if (localFilter.trim()) {
            const filter = new RegExp(escape(localFilter), 'i');
            return nicList.filter(({ name = '', description = '' }) => {
                return (
                    escape(name).match(filter) ||
                    escape(description).match(filter)
                );
            });
        } else {
            return nicList;
        }
    }

    save() {
        let { onSubmit, qdata, version } = this.props;
        return onSubmit({ qdata, version });
    }
}

export default SoftwareProductComponentsNetworkView;