/*
 * Copyright © 2016-2017 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 Dropzone from 'react-dropzone';

import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
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 GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';

const SoftwareProductProcessEditorPropType = PropTypes.shape({
    id: PropTypes.string,
    name: PropTypes.string,
    description: PropTypes.string,
    artifactName: PropTypes.string,
    type: PropTypes.string
});

class SoftwareProductProcessesEditorForm extends React.Component {
    static propTypes = {
        data: SoftwareProductProcessEditorPropType,
        previousData: SoftwareProductProcessEditorPropType,
        isReadOnlyMode: PropTypes.bool,
        onDataChanged: PropTypes.func,
        onSubmit: PropTypes.func,
        onCancel: PropTypes.func
    };
    state = {
        dragging: false,
        files: []
    };

    render() {
        let {
            data = {},
            isReadOnlyMode,
            onDataChanged,
            onCancel,
            genericFieldInfo,
            optionsInputValues
        } = this.props;
        let { name, description, artifactName, type } = data;

        return (
            <div>
                {genericFieldInfo && (
                    <Form
                        ref="validationForm"
                        hasButtons={true}
                        labledButtons={true}
                        isReadOnlyMode={isReadOnlyMode}
                        onSubmit={() => this.submit()}
                        onReset={() => onCancel()}
                        isValid={this.props.isFormValid}
                        formReady={this.props.formReady}
                        onValidateForm={() => this.props.onValidateForm()}
                        className="vsp-processes-editor">
                        <div
                            className={`vsp-processes-editor-data${
                                isReadOnlyMode ? ' disabled' : ''
                            }`}>
                            <Dropzone
                                className={`vsp-process-dropzone-view ${
                                    this.state.dragging ? 'active-dragging' : ''
                                }`}
                                onDrop={(acceptedFiles, rejectedFiles) =>
                                    this.handleImportSubmit(
                                        acceptedFiles,
                                        rejectedFiles
                                    )
                                }
                                onDragEnter={() =>
                                    this.setState({ dragging: true })
                                }
                                onDragLeave={() =>
                                    this.setState({ dragging: false })
                                }
                                multiple={false}
                                disableClick={true}
                                ref="processEditorFileInput"
                                name="processEditorFileInput">
                                <GridSection hasLastColSet={true}>
                                    <GridItem colSpan={2}>
                                        <Input
                                            onChange={name =>
                                                onDataChanged({ name })
                                            }
                                            isValid={
                                                genericFieldInfo.name.isValid
                                            }
                                            isRequired={true}
                                            data-test-id="name"
                                            errorText={
                                                genericFieldInfo.name.errorText
                                            }
                                            label={i18n('Name')}
                                            value={name}
                                            type="text"
                                        />
                                    </GridItem>
                                    <GridItem colSpan={2} lastColInRow={true}>
                                        <label>&nbsp;</label>
                                        <DraggableUploadFileBox
                                            className="process-editor-file-box"
                                            isReadOnlyMode={isReadOnlyMode}
                                            onClick={() =>
                                                this.refs.processEditorFileInput.open()
                                            }
                                        />
                                    </GridItem>
                                </GridSection>
                                <GridSection hasLastColSet={true}>
                                    <GridItem colSpan={2}>
                                        <Input
                                            name="vsp-process-description"
                                            groupClassName="vsp-process-description"
                                            onChange={description =>
                                                onDataChanged({ description })
                                            }
                                            isValid={
                                                genericFieldInfo.description
                                                    .isValid
                                            }
                                            errorText={
                                                genericFieldInfo.description
                                                    .errorText
                                            }
                                            label={i18n('Notes')}
                                            value={description}
                                            data-test-id="vsp-process-description"
                                            type="textarea"
                                        />
                                    </GridItem>
                                    <GridItem colSpan={2} lastColInRow={true}>
                                        <Input
                                            label={i18n('Artifacts')}
                                            value={artifactName}
                                            type="text"
                                            disabled
                                        />
                                        <Input
                                            onChange={e => {
                                                // setting the unit to the correct value
                                                const selectedIndex =
                                                    e.target.selectedIndex;
                                                const val =
                                                    e.target.options[
                                                        selectedIndex
                                                    ].value;
                                                onDataChanged({ type: val });
                                            }}
                                            value={type}
                                            label={i18n('Process Type')}
                                            className="process-type"
                                            data-test-id="process-type"
                                            isValid={
                                                genericFieldInfo.type.isValid
                                            }
                                            errorText={
                                                genericFieldInfo.type.errorText
                                            }
                                            type="select">
                                            {optionsInputValues.PROCESS_TYPE.map(
                                                mtype => (
                                                    <option
                                                        key={mtype.enum}
                                                        value={mtype.enum}>{`${
                                                        mtype.title
                                                    }`}</option>
                                                )
                                            )}
                                        </Input>
                                    </GridItem>
                                </GridSection>
                            </Dropzone>
                        </div>
                    </Form>
                )}
            </div>
        );
    }

    submit() {
        const { data: process, previousData: previousProcess } = this.props;
        let { files } = this.state;
        let formData = false;
        if (files.length) {
            let file = files[0];
            formData = new FormData();
            formData.append('upload', file);
        }

        let updatedProcess = {
            ...process,
            formData
        };
        this.props.onSubmit({ process: updatedProcess, previousProcess });
    }

    handleImportSubmit(files, rejectedFiles) {
        if (files.length > 0) {
            let { onDataChanged } = this.props;
            this.setState({
                dragging: false,
                complete: '0',
                files
            });
            onDataChanged({ artifactName: files[0].name });
        } else if (rejectedFiles.length > 0) {
            this.setState({
                dragging: false
            });
            if (DEBUG) {
                console.log('file was rejected.' + rejectedFiles[0].name);
            }
        }
    }
}

export default SoftwareProductProcessesEditorForm;