/*!
 * 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 Form from 'nfvo-components/input/validation/Form.jsx';
import Input from 'nfvo-components/input/validation/Input.jsx';
import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';

class VendorSelector extends React.Component {
    static propTypes = {
        finalizedLicenseModelList: PropTypes.array,
        vendorName: PropTypes.string,
        onClose: PropTypes.func.isRequired,
        onConfirm: PropTypes.func.isRequired
    };
    constructor(props) {
        super(props);
        const selectedValue = props.finalizedLicenseModelList.length
            ? props.finalizedLicenseModelList[0].id
            : '';
        this.state = {
            selectedValue
        };
    }
    submit() {
        const vendor = this.props.finalizedLicenseModelList.find(
            item => item.id === this.state.selectedValue
        );
        this.props.onConfirm(vendor.id);
        this.props.onClose();
    }
    render() {
        const { finalizedLicenseModelList, vendorName, onClose } = this.props;
        const { selectedValue } = this.state;
        return (
            <div className="vsp-details-vendor-select">
                <Form
                    onSubmit={() => this.submit()}
                    onReset={() => onClose()}
                    isValid={!!selectedValue}
                    submitButtonText={i18n('Save')}
                    hasButtons={true}>
                    <div className="vendor-selector-modal-title">{`${i18n(
                        'The VLM'
                    )} '${vendorName}' ${i18n(
                        'assigned to this VSP is archived'
                    )}.`}</div>
                    <div className="vendor-selector-modal-additional-text">
                        {i18n(
                            'If you select a different VLM you will not be able to reselect the archived VLM.'
                        )}
                    </div>
                    <Input
                        data-test-id="vsp-vendor-name-select"
                        label={i18n('Vendor')}
                        type="select"
                        onChange={e => {
                            this.setState({
                                selectedValue:
                                    e.target.options[e.target.selectedIndex]
                                        .value
                            });
                        }}
                        value={selectedValue}>
                        <option key="emtyVendor" value="">
                            {i18n('please select...')}
                        </option>
                        {sortByStringProperty(
                            finalizedLicenseModelList,
                            'name'
                        ).map(lm => (
                            <option key={lm.id} value={lm.id}>
                                {lm.name}
                            </option>
                        ))}
                    </Input>
                </Form>
            </div>
        );
    }
}

export default VendorSelector;
