// @flow

import React, { Component, PropTypes } from 'react';
import type { PipelineInfo, StageInfo } from '../../services/PipelineStore';
import { isValidEnvironmentKey } from '../../services/PipelineValidator';
import idgen from '../../services/IdGenerator';
import { Dropdown } from '@jenkins-cd/design-language';
import { Split } from './Split';
import { TextInput } from '@jenkins-cd/design-language';
import { getAddIconGroup, getDeleteIconGroup } from './common';
import focusOnElement from './focusOnElement';
import InputText from './InputText';
import { ValidationMessageList } from './ValidationMessageList';
import { i18nTranslator } from '@jenkins-cd/blueocean-core-js';

const t = i18nTranslator('blueocean-pipeline-editor');

type Props = {
    node: PipelineInfo | StageInfo,
    onChange: (environment: Object[]) => any,
};

type State = {
    pristine: ?any,
};

type DefaultProps = typeof EnvironmentConfiguration.defaultProps;

const iconRadius = 10;
function addIcon() {
    return (
        <svg width={iconRadius * 2} height={iconRadius * 2}>
            <g transform={`translate(${iconRadius},${iconRadius})`}>{getAddIconGroup(iconRadius)}</g>
        </svg>
    );
}

function deleteIcon() {
    return (
        <svg width={iconRadius * 2} height={iconRadius * 2}>
            <g transform={`translate(${iconRadius},${iconRadius})`}>{getDeleteIconGroup(iconRadius)}</g>
        </svg>
    );
}

export class EnvironmentConfiguration extends Component<DefaultProps, Props, State> {
    props: Props;
    state: State;

    constructor(props: Props) {
        super(props);
        this.state = { environments: null, selectedEnvironment: props.node && props.node.environment };
    }

    componentWillMount() {}

    componentDidMount() {}

    addEnvironmentEntry() {
        const { node } = this.props;
        if (!node.environment) {
            node.environment = [];
        }
        // check for empty entries and just focus on them
        const emptyEntry = node.environment.filter(e => !e.key)[0];
        if (!emptyEntry) {
            const envEntry = {
                key: '',
                id: idgen.next(),
                value: {
                    isLiteral: true,
                    value: '',
                },
            };
            node.environment.push(envEntry);
            this.setState({ pristine: envEntry.id });
            this.props.onChange();
        }
        focusOnElement('.environment-entry:last-child .split-child:first-child input');
    }

    removeEnviromentEntry(entry, idx) {
        this.props.node.environment.splice(idx, 1);
        this.props.onChange();
    }

    render() {
        const { node } = this.props;
        const { pristine } = this.state;

        if (!node) {
            return null;
        }

        return (
            <div className="environment-select">
                <h5>{t('editor.jenkins.environment', { default: 'Environment' })}</h5>
                <Split>
                    <span>{t('editor.jenkins.environment.name', { default: 'Name' })}</span>
                    <span>{t('editor.jenkins.environment.value', { default: 'Value' })}</span>
                    <button
                        onClick={e => this.addEnvironmentEntry()}
                        title={t('editor.page.common.add', { default: 'Add' })}
                        className="environment-add-delete-icon add"
                    >
                        {addIcon()}
                    </button>
                </Split>
                {node.environment &&
                    node.environment.map((env, idx) => (
                        <div className="environment-entry" key={env.id}>
                            <ValidationMessageList node={env} />
                            <Split>
                                <InputText
                                    hasError={pristine !== env.id && !isValidEnvironmentKey(env.key)}
                                    defaultValue={env.key}
                                    className="env-key"
                                    onChange={val => {
                                        env.key = val;
                                        this.setState({ pristine: null });
                                        this.props.onChange();
                                    }}
                                    onBlur={e => this.setState({ pristine: null })}
                                />
                                <TextInput
                                    defaultValue={env.value.value}
                                    className="env-value"
                                    onChange={val => {
                                        env.value.value = val;
                                        this.props.onChange();
                                    }}
                                />
                                <button
                                    onClick={e => {
                                        this.removeEnviromentEntry(env, idx);
                                        this.props.onChange();
                                    }}
                                    title={t('editor.page.common.remove', { default: 'Remove' })}
                                    className="environment-add-delete-icon delete"
                                >
                                    {deleteIcon()}
                                </button>
                            </Split>
                        </div>
                    ))}
            </div>
        );
    }
}