import React from 'react';
import { translate } from 'react-i18next';
import {
  Checkbox,
  InputField,
  Subtitle,
  AddEntryToTableField,
} from '@scm-manager/ui-components';
import ProxyExcludesTable from '../table/ProxyExcludesTable';

type Props = {
  proxyPassword: string;
  proxyPort: number;
  proxyServer: string;
  proxyUser: string;
  enableProxy: boolean;
  proxyExcludes: string[];
  t: (p: string) => string;
  onChange: (p1: boolean, p2: any, p3: string) => void;
  hasUpdatePermission: boolean;
};

class ProxySettings extends React.Component<Props> {
  render() {
    const {
      t,
      proxyPassword,
      proxyPort,
      proxyServer,
      proxyUser,
      enableProxy,
      proxyExcludes,
      hasUpdatePermission,
    } = this.props;

    return (
      <div>
        <Subtitle subtitle={t('proxy-settings.name')} />
        <div className="columns">
          <div className="column is-full">
            <Checkbox
              checked={enableProxy}
              label={t('proxy-settings.enable-proxy')}
              onChange={this.handleEnableProxyChange}
              disabled={!hasUpdatePermission}
              helpText={t('help.enableProxyHelpText')}
            />
          </div>
        </div>
        <div className="columns">
          <div className="column is-half">
            <InputField
              label={t('proxy-settings.proxy-password')}
              onChange={this.handleProxyPasswordChange}
              value={proxyPassword}
              type="password"
              disabled={!enableProxy || !hasUpdatePermission}
              helpText={t('help.proxyPasswordHelpText')}
            />
          </div>
          <div className="column is-half">
            <InputField
              label={t('proxy-settings.proxy-port')}
              value={proxyPort}
              onChange={this.handleProxyPortChange}
              disabled={!enableProxy || !hasUpdatePermission}
              helpText={t('help.proxyPortHelpText')}
            />
          </div>
        </div>
        <div className="columns">
          <div className="column is-half">
            <InputField
              label={t('proxy-settings.proxy-server')}
              value={proxyServer}
              onChange={this.handleProxyServerChange}
              disabled={!enableProxy || !hasUpdatePermission}
              helpText={t('help.proxyServerHelpText')}
            />
          </div>
          <div className="column is-half">
            <InputField
              label={t('proxy-settings.proxy-user')}
              value={proxyUser}
              onChange={this.handleProxyUserChange}
              disabled={!enableProxy || !hasUpdatePermission}
              helpText={t('help.proxyUserHelpText')}
            />
          </div>
        </div>
        <div className="columns">
          <div className="column is-full">
            <ProxyExcludesTable
              proxyExcludes={proxyExcludes}
              onChange={(isValid, changedValue, name) =>
                this.props.onChange(isValid, changedValue, name)
              }
              disabled={!enableProxy || !hasUpdatePermission}
            />
            <AddEntryToTableField
              addEntry={this.addProxyExclude}
              disabled={!enableProxy || !hasUpdatePermission}
              buttonLabel={t('proxy-settings.add-proxy-exclude-button')}
              fieldLabel={t('proxy-settings.add-proxy-exclude-textfield')}
              errorMessage={t('proxy-settings.add-proxy-exclude-error')}
            />
          </div>
        </div>
      </div>
    );
  }

  handleProxyPasswordChange = (value: string) => {
    this.props.onChange(true, value, 'proxyPassword');
  };
  handleProxyPortChange = (value: string) => {
    this.props.onChange(true, value, 'proxyPort');
  };
  handleProxyServerChange = (value: string) => {
    this.props.onChange(true, value, 'proxyServer');
  };
  handleProxyUserChange = (value: string) => {
    this.props.onChange(true, value, 'proxyUser');
  };
  handleEnableProxyChange = (value: string) => {
    this.props.onChange(true, value, 'enableProxy');
  };

  addProxyExclude = (proxyExcludeName: string) => {
    if (this.isProxyExcludeMember(proxyExcludeName)) {
      return;
    }
    this.props.onChange(
      true,
      [...this.props.proxyExcludes, proxyExcludeName],
      'proxyExcludes',
    );
  };

  isProxyExcludeMember = (proxyExcludeName: string) => {
    return this.props.proxyExcludes.includes(proxyExcludeName);
  };
}

export default translate('config')(ProxySettings);