text: // 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 PropTypes from 'prop-types';
  
  import React from 'react';
  import Constants from '../constants';
  import Components from '../../components/react-components';
  import ReactSelect from 'react-select';
  
  const { StyledSelect } = Components;
  
  const RemoteSourceInput = ({onChange, value}) =>
    <div className="replication__section">
      <div className="replication__input-label">Database URL:</div>
      <div className="">
        <input
          type="text"
          className="replication__remote-connection-url"
          placeholder="https://"
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
      </div>
    </div>;
  
  RemoteSourceInput.propTypes = {
    value: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired
  };
  
  const LocalSourceInput = ({value, onChange, databases}) => {
    const options = databases.map(db => ({value: db, label: db}));
    return (
      <div className="replication__section">
        <div className="replication__input-label">
          Name:
        </div>
        <div className="replication__input-react-select">
          <ReactSelect
            name="source-name"
            value={value}
            placeholder="Database name"
            options={options}
            clearable={false}
            onChange={({value}) => onChange(value)} />
        </div>
      </div>
    );
  };
  
  LocalSourceInput.propTypes = {
    value: PropTypes.string.isRequired,
    databases: PropTypes.array.isRequired,
    onChange: PropTypes.func.isRequired
  };
  
  const ReplicationSourceRow = ({replicationSource, databases, localSource, remoteSource, onChangeRemote, onChangeLocal}) => {
    if (replicationSource === Constants.REPLICATION_SOURCE.LOCAL) {
      return <LocalSourceInput
        value={localSource}
        databases={databases}
        onChange={onChangeLocal}
      />;
    }
  
    return <RemoteSourceInput value={remoteSource} onChange={onChangeRemote} />;
  };
  
  ReplicationSourceRow.propTypes = {
    replicationSource: PropTypes.string.isRequired,
    databases: PropTypes.array.isRequired,
    localSource: PropTypes.string.isRequired,
    remoteSource: PropTypes.string.isRequired,
    onChangeRemote: PropTypes.func.isRequired,
    onChangeLocal: PropTypes.func.isRequired
  };
  
  const replicationSourceSelectOptions = () => {
    return [
      { value: '', label: 'Select source type' },
      { value: Constants.REPLICATION_SOURCE.LOCAL, label: 'Local database' },
      { value: Constants.REPLICATION_SOURCE.REMOTE, label: 'Remote database' }
    ].map((option) => {
      return (
        <option value={option.value} key={option.value}>{option.label}</option>
      );
    });
  };
  
  export const ReplicationSourceSelect = ({onChange, value}) => {
  
    return (
      <div className="replication__section">
        <div className="replication__input-label">
          Type:
        </div>
        <div className="replication__input-select">
          <StyledSelect
            selectContent={replicationSourceSelectOptions()}
            selectChange={(e) => onChange(e.target.value)}
            selectId="replication-source"
            selectValue={value} />
        </div>
      </div>
    );
  };
  
  ReplicationSourceSelect.propTypes = {
    value: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired
  };
  
  export class ReplicationSource extends React.Component {
  
    getReplicationSourceRow () {
      const {
        replicationSource,
        localSource,
        onLocalSourceChange,
        onRemoteSourceChange,
        remoteSource,
        databases
      } = this.props;
  
      if (!replicationSource) {
        return null;
      }
  
      return <ReplicationSourceRow
        replicationSource={replicationSource}
        databases={databases}
        localSource={localSource}
        remoteSource={remoteSource}
        onChangeLocal={onLocalSourceChange}
        onChangeRemote={onRemoteSourceChange}
      />;
    }
  
    render () {
      const {replicationSource, onSourceSelect} = this.props;
      return (
        <div>
          <h3>Source</h3>
          <ReplicationSourceSelect
            onChange={onSourceSelect}
            value={replicationSource}
          />
          {this.getReplicationSourceRow()}
        </div>
      );
    }
  }
  
  ReplicationSource.propTypes = {
    replicationSource: PropTypes.string.isRequired,
    localSource: PropTypes.string.isRequired,
    remoteSource: PropTypes.string.isRequired,
    databases: PropTypes.array.isRequired,
    onLocalSourceChange: PropTypes.func.isRequired,
    onRemoteSourceChange: PropTypes.func.isRequired
  };
  