/*
 * 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 PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';

const PointerInput = ({
    label,
    value,
    onQDataChanged,
    qgenericFieldInfo,
    dataMap,
    lastColInRow
}) => {
    return (
        <GridItem lastColInRow={lastColInRow}>
            <Input
                label={i18n(label)}
                type="number"
                data-test-id={`${value}`}
                isValid={qgenericFieldInfo[value].isValid}
                errorText={qgenericFieldInfo[value].errorText}
                value={dataMap[value]}
                onChange={val => onQDataChanged({ [value]: val })}
            />
        </GridItem>
    );
};

PointerInput.propTypes = {
    label: PropTypes.string,
    value: PropTypes.string
};

const PacketsBytes = ({
    title,
    pointers = [],
    qgenericFieldInfo,
    dataMap,
    onQDataChanged
}) => {
    return (
        <GridSection title={title} hasLastColSet>
            <GridItem colSpan={2}>
                <div className="part-title-small packets">
                    {i18n('Packets')}
                </div>
            </GridItem>
            <GridItem colSpan={2} lastColInRow>
                <div className="part-title-small bytes">{i18n('Bytes')}</div>
            </GridItem>
            {pointers.map((pointer, i) => {
                return (
                    <PointerInput
                        key={i}
                        label={pointer.label}
                        value={pointer.value}
                        qgenericFieldInfo={qgenericFieldInfo}
                        onQDataChanged={onQDataChanged}
                        dataMap={dataMap}
                        lastColInRow={i === 3}
                    />
                );
            })}
        </GridSection>
    );
};

PacketsBytes.PropTypes = {
    title: PropTypes.string,
    pointers: PropTypes.array,
    onQDataChanged: PropTypes.function,
    dataMap: PropTypes.object,
    qgenericFieldInfo: PropTypes.object
};

export default PacketsBytes;
