import PropTypes from 'prop-types';
import React from 'react';
import { inputTypes, sizes } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import FormGroup from 'Components/Form/FormGroup';
import FormLabel from 'Components/Form/FormLabel';
import FormInputGroup from 'Components/Form/FormInputGroup';

function ProxySettings(props) {
  const {
    settings,
    onInputChange
  } = props;

  const {
    proxyEnabled,
    proxyType,
    proxyHostname,
    proxyPort,
    proxyUsername,
    proxyPassword,
    proxyBypassFilter,
    proxyBypassLocalAddresses
  } = settings;

  const proxyTypeOptions = [
    { key: 'http', value: 'HTTP(S)' },
    { key: 'socks4', value: 'Socks4' },
    { key: 'socks5', value: 'Socks5 (Support TOR)' }
  ];

  return (
    <FieldSet legend="Proxy">
      <FormGroup size={sizes.MEDIUM}>
        <FormLabel>Use Proxy</FormLabel>

        <FormInputGroup
          type={inputTypes.CHECK}
          name="proxyEnabled"
          onChange={onInputChange}
          {...proxyEnabled}
        />
      </FormGroup>

      {
        proxyEnabled.value &&
        <div>
          <FormGroup>
            <FormLabel>Proxy Type</FormLabel>

            <FormInputGroup
              type={inputTypes.SELECT}
              name="proxyType"
              values={proxyTypeOptions}
              onChange={onInputChange}
              {...proxyType}
            />
          </FormGroup>

          <FormGroup>
            <FormLabel>Hostname</FormLabel>

            <FormInputGroup
              type={inputTypes.TEXT}
              name="proxyHostname"
              onChange={onInputChange}
              {...proxyHostname}
            />
          </FormGroup>

          <FormGroup>
            <FormLabel>Port</FormLabel>

            <FormInputGroup
              type={inputTypes.NUMBER}
              name="proxyPort"
              onChange={onInputChange}
              {...proxyPort}
            />
          </FormGroup>

          <FormGroup>
            <FormLabel>Username</FormLabel>

            <FormInputGroup
              type={inputTypes.TEXT}
              name="proxyUsername"
              helpText="You only need to enter a username and password if one is required. Leave them blank otherwise."
              onChange={onInputChange}
              {...proxyUsername}
            />
          </FormGroup>

          <FormGroup>
            <FormLabel>Password</FormLabel>

            <FormInputGroup
              type={inputTypes.PASSWORD}
              name="proxyPassword"
              helpText="You only need to enter a username and password if one is required. Leave them blank otherwise."
              onChange={onInputChange}
              {...proxyPassword}
            />
          </FormGroup>

          <FormGroup>
            <FormLabel>Ignored Addresses</FormLabel>

            <FormInputGroup
              type={inputTypes.TEXT}
              name="proxyBypassFilter"
              helpText="Use ',' as a separator, and '*.' as a wildcard for subdomains"
              onChange={onInputChange}
              {...proxyBypassFilter}
            />
          </FormGroup>

          <FormGroup size={sizes.MEDIUM}>
            <FormLabel>Bypass Proxy for Local Addresses</FormLabel>

            <FormInputGroup
              type={inputTypes.CHECK}
              name="proxyBypassLocalAddresses"
              onChange={onInputChange}
              {...proxyBypassLocalAddresses}
            />
          </FormGroup>
        </div>
      }
    </FieldSet>
  );
}

ProxySettings.propTypes = {
  settings: PropTypes.object.isRequired,
  onInputChange: PropTypes.func.isRequired
};

export default ProxySettings;