// 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 FauxtonAPI from '../../core/api';
import React from 'react';
import Helpers from '../../helpers';
import Components from '../components/react-components';
import NewReplication from './components/newreplication';
import Activity from './components/activity';
import {checkReplicationDocID} from './api';
import {OnePane, OnePaneHeader, OnePaneContent} from '../components/layouts';
import {TabElementWrapper, TabElement} from '../components/components/tabelement';
import ReplicateActivity from './components/replicate-activity';

const {LoadLines, Polling, RefreshBtn} = Components;

export default class ReplicationController extends React.Component {

  loadReplicationInfo (props, oldProps) {
    this.props.initReplicator(props.routeLocalSource, props.localSource);
    this.getAllActivity();
    this.loadReplicationStateFrom(props, oldProps);
  }

  loadReplicationStateFrom (props, oldProps) {
    if (props.replicationId && props.replicationId !== oldProps.replicationId) {
      this.props.clearReplicationForm();
      this.props.getReplicationStateFrom(props.replicationId);
    }
  }

  getAllActivity () {
    this.props.getReplicationActivity();
    this.props.getReplicateActivity();
  }

  componentDidMount () {
    this.props.checkForNewApi();
    this.props.getDatabasesList();
    this.loadReplicationInfo(this.props, {});
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    this.loadReplicationStateFrom(nextProps, this.props);
    if (this.props.tabSection !== 'new replication' && nextProps.tabSection === 'new replication') {
      this.props.clearReplicationForm();
    }
  }

  componentWillUnmount () {
    this.props.clearReplicationForm();
  }

  showSection () {
    const {
      replicationSource, replicationTarget, replicationType, replicationDocName,
      databases, localSource, remoteSource, remoteTarget,
      localTarget, statusDocs, statusFilter, loading, allDocsSelected,
      someDocsSelected, showConflictModal, localSourceKnown, localTargetKnown, updateFormField,
      authenticated, activityLoading, submittedNoChange, activitySort, tabSection,
      replicateInfo, replicateLoading, replicateFilter, allReplicateSelected, someReplicateSelected,
      hideConflictModal, isConflictModalVisible, filterDocs,
      filterReplicate, replicate, clearReplicationForm, selectAllDocs, changeActivitySort, selectDoc,
      deleteDocs, deleteReplicates, selectAllReplicates, selectReplicate,
      sourceAuthType, sourceAuth, targetAuthType, targetAuth, targetDatabasePartitioned, allowNewPartitionedLocalDbs
    } = this.props;

    if (tabSection === 'new replication') {
      if (loading) {
        return <LoadLines/>;
      }

      return <NewReplication
        docs={statusDocs}
        localTargetKnown={localTargetKnown}
        localSourceKnown={localSourceKnown}
        clearReplicationForm={clearReplicationForm}
        replicate={replicate}
        replicationSource={replicationSource}
        replicationTarget={replicationTarget}
        replicationType={replicationType}
        replicationDocName={replicationDocName}
        databases={databases}
        localSource={localSource}
        remoteSource={remoteSource}
        remoteTarget={remoteTarget}
        localTarget={localTarget}
        sourceAuthType={sourceAuthType}
        sourceAuth={sourceAuth}
        targetAuthType={targetAuthType}
        targetAuth={targetAuth}
        targetDatabasePartitioned={targetDatabasePartitioned}
        allowNewPartitionedLocalDbs={allowNewPartitionedLocalDbs}
        updateFormField={updateFormField}
        conflictModalVisible={isConflictModalVisible}
        hideConflictModal={hideConflictModal}
        showConflictModal={showConflictModal}
        checkReplicationDocID={checkReplicationDocID}
        authenticated={authenticated}
        submittedNoChange={submittedNoChange}
      />;
    }

    if (tabSection === '_replicate') {
      if (replicateLoading) {
        return <LoadLines />;
      }

      return <ReplicateActivity
        docs={replicateInfo}
        filter={replicateFilter}
        onFilterChange={filterReplicate}
        selectDoc={selectReplicate}
        selectAllDocs={selectAllReplicates}
        allDocsSelected={allReplicateSelected}
        someDocsSelected={someReplicateSelected}
        activitySort={activitySort}
        changeActivitySort={changeActivitySort}
        deleteDocs={deleteReplicates}
      />;
    }

    if (activityLoading) {
      return <LoadLines/>;
    }

    return <Activity
      docs={statusDocs}
      filter={statusFilter}
      onFilterChange={filterDocs}
      selectAllDocs={selectAllDocs}
      selectDoc={selectDoc}
      allDocsSelected={allDocsSelected}
      someDocsSelected={someDocsSelected}
      deleteDocs={deleteDocs}
      activitySort={activitySort}
      changeActivitySort={changeActivitySort}
    />;
  }

  getHeaderComponents () {
    if (this.props.tabSection === 'new replication') {
      return null;
    }
    let rightHeaderclass = "right-header-flex";
    if (Helpers.isIE1X()) {
      rightHeaderclass += " " + rightHeaderclass + "--ie1X";
    }

    return (
      <div className={rightHeaderclass}>
        <Polling
          min={60}
          max={600}
          startValue={300}
          stepSize={60}
          onPoll={this.getAllActivity.bind(this)}
        />
        <RefreshBtn
          refresh={this.getAllActivity.bind(this)}
        />
      </div>
    );
  }

  getTabElements () {
    const {tabSection} = this.props;
    const elements = [
      <TabElement
        key={1}
        selected={tabSection === 'activity'}
        text={"Replicator DB Activity"}
        onChange={this.onTabChange.bind(this, 'activity', '#/replication')}
      />
    ];

    if (this.props.supportNewApi) {
      elements.push(
        <TabElement
          key={2}
          selected={tabSection === '_replicate'}
          text={"_replicate Activity"}
          onChange={this.onTabChange.bind(this, '_replicate', '#/replication/_replicate')}
        />
      );
    }

    return elements;
  }

  onTabChange (section, url) {
    // this.props.changeTabSection(section, url);
    FauxtonAPI.navigate(url);
  }

  getCrumbs () {
    if (this.props.tabSection === 'new replication') {
      return [{'name': 'Job Configuration'}];
    }
    return [{'name': 'Replication'}];
  }

  getTabs () {
    if (this.props.tabSection === 'new replication') {
      return null;
    }

    return (
      <TabElementWrapper>
        {this.getTabElements()}
      </TabElementWrapper>
    );
  }

  render () {
    const { checkingAPI } = this.props;

    if (checkingAPI) {
      return <LoadLines />;
    }

    return (
      <OnePane>
        <OnePaneHeader crumbs={this.getCrumbs()}>
          {this.getHeaderComponents()}
        </OnePaneHeader>
        <OnePaneContent>
          <div className="template-content flex-body flex-layout flex-col">
            {this.getTabs()}
            <div className="replication__page flex-layout flex-col">
              {this.showSection()}
            </div>
          </div>
        </OnePaneContent>
      </OnePane>
    );
  }
}