import { shell, ipcRenderer } from '../../polyfills';
import React, { Component } from 'react';
import _ from 'lodash';
import CapabilityEditor from './CapabilityEditor';
import SavedSessions from './SavedSessions';
import AttachToSession from './AttachToSession';
import ServerTabCustom from './ServerTabCustom';
import {Tabs, Button, Spin, Segmented, Space, Tooltip} from 'antd';
import AdvancedServerParams from './AdvancedServerParams';
import SessionStyles from './Session.css';
import CloudProviders from './CloudProviders';
import CloudProviderSelector from './CloudProviderSelector';
import {FilterOutlined, LinkOutlined} from '@ant-design/icons';
import { BUTTON } from '../../../../gui-common/components/AntdTypes';
import {
  getGlobalVars,
  requestSuiteGroupList,
  SEGMENTED_EXECUTE,
  SEGMENTED_RECORD,
} from '../../actions/Session';

import ExecuteSelector from './ExecuteSelector';
import GetAppData from '../Inspector/GetAppData';
import ApiAutoInteraction from '../Inspector/ApiAutoInteraction';
import GlobalVarsEditor from './GlobalVarsEditor';
import ExecuteControl from './ExecuteControl';

const {TabPane} = Tabs;

const ADD_CLOUD_PROVIDER = 'addCloudProvider';

const ADD_GLOBAL_VARS = 'addGlobalVars'
export default class Session extends Component {

  componentDidMount () {
    const {setLocalServerParams, getGlobalVars, getSavedSessions, setSavedServerParams, setStateFromAppiumFile,
           setVisibleProviders, getRunningSessions, bindWindowClose, initFromQueryString, saveFile, switchTabs} = this.props;
    (async () => {
      try {
        bindWindowClose();
        switchTabs('new');
        await getGlobalVars();
        await getSavedSessions();
        await setSavedServerParams();
        await setLocalServerParams();
        await setVisibleProviders();
        getRunningSessions();
        await initFromQueryString();
        await setStateFromAppiumFile();
        ipcRenderer.on('open-file', (evt, filePath) => {
          setStateFromAppiumFile(filePath);
        });
        ipcRenderer.on('save-file', (evt, filePath) => {
          saveFile(filePath);
        });
      } catch (e) {
        console.error(e); // eslint-disable-line no-console
      }
    })();
  }

  async handleSelectServerTab (tab) {
    const {changeServerType, addCloudProvider} = this.props;
    if (tab === ADD_CLOUD_PROVIDER) {
      addCloudProvider();
      return;
    }
    await changeServerType(tab);
  }

  removeCloudProvider (providerName) {
    const {removeVisibleProvider} = this.props;
    removeVisibleProvider(providerName);
  }

  render () {
    const path = require('path');
    const { app } = require('electron').remote;
    const filePath = path.join(app.getPath('userData'), 'myFile.txt');
    console.log(filePath);
    const {newSessionBegan, savedSessions, tabKey, switchTabs,
           serverType, server,
           requestSaveAsModal, newSession, caps, capsUUID, saveSession,
           visibleProviders = [],
           isCapsDirty, sessionLoading, attachSessId, t, switchSegments, segmentedKey, showGlobalVarsModal, executeScript} = this.props;

    const isAttaching = tabKey === 'attach';

    return [
      <Spin spinning={!!sessionLoading} key="main">
        <div className={SessionStyles.sessionContainer}>
          <div id='serverTypeTabs' className={SessionStyles.serverTab}>
            <Tabs activeKey={serverType} onChange={(tab) => this.handleSelectServerTab(tab)} className={SessionStyles.serverTabs}>
              {[
                <TabPane tab={t('Appium Server')} key="remote">
                  <ServerTabCustom {...this.props} />
                </TabPane>,
                ..._(visibleProviders).map((providerName) => {
                  const provider = CloudProviders[providerName];
                  if (!provider) {
                    return true;
                  }
                  return <TabPane key={providerName} tab={<div>{provider.tabhead()}</div>}>
                    {provider.tab(this.props)}
                  </TabPane>;
                }),
                <TabPane tab={<span className='addCloudProviderTab'>{ t('Select Cloud Providers') }</span>} key={ADD_CLOUD_PROVIDER}></TabPane>
              ]}
            </Tabs>
            <AdvancedServerParams {...this.props} />
          </div>

          {newSessionBegan && <div>
            <p>{t('sessionInProgress')}</p>
          </div>}

          {!newSessionBegan && <Tabs activeKey={tabKey} onChange={ (tab) => {
            if (tab === ADD_GLOBAL_VARS) {
              showGlobalVarsModal(true);
            } else {
              switchTabs();
            }
          }} className={SessionStyles.scrollingTabCont}>
            <TabPane tab={t('Desired Capabilities')} key='new' className={SessionStyles.scrollingTab}>
              <CapabilityEditor {...this.props} />
            </TabPane>
            <TabPane tab={t('Saved Capability Sets', {savedSessionsCount: savedSessions.length})} key='saved' className={SessionStyles.scrollingTab} disabled={savedSessions.length === 0}>
              <SavedSessions {...this.props} />
            </TabPane>
            <TabPane tab={t('Attach to Session')} key='attach' className={SessionStyles.scrollingTab}>
              <AttachToSession {...this.props} />
            </TabPane>
            <TabPane tab={ t('Execute') } key='execute'>
              <ExecuteControl {...this.props} />
            </TabPane>
            <TabPane tab={<span className={SessionStyles.scrollingTab}>{ t('Add Global Vars') }</span>} key={ADD_GLOBAL_VARS}>
            </TabPane>
          </Tabs>}

          <div className={SessionStyles.sessionFooter}>
            <div className={SessionStyles.desiredCapsLink}>
              <Space>
                <a href="#" onClick={(e) => e.preventDefault() || shell.openExternal('http://appium.io/docs/en/writing-running-appium/caps/index.html')}>
                  <LinkOutlined />&nbsp;
                  {t('desiredCapabilitiesDocumentation')}
                </a>
                <Segmented options={[t(SEGMENTED_RECORD), t(SEGMENTED_EXECUTE)]} value={segmentedKey} onChange={ switchSegments }/>
              </Space>
            </div>
            { (!isAttaching && capsUUID) && <Button onClick={() => saveSession(server, serverType, caps, {uuid: capsUUID})} disabled={!isCapsDirty}>{t('Save')}</Button> }
            {!isAttaching && <Button onClick={requestSaveAsModal}>{t('saveAs')}</Button>}
            {!isAttaching && <Button type={BUTTON.PRIMARY} id='btnStartSession'
              onClick={() => {
                if (segmentedKey === t(SEGMENTED_RECORD)) {
                  newSession(caps)
                } else {
                  // selectExecuteScript()
                  executeScript()
                }
              }} className={SessionStyles['start-session-button']}>{t('startSession')}</Button>
            }
            {isAttaching &&
              <Button type={BUTTON.PRIMARY} disabled={!attachSessId} onClick={() => newSession(null, attachSessId)}>
                {t('attachToSession')}
              </Button>
            }
          </div>
        </div>
      </Spin>,
      <CloudProviderSelector {...this.props} key='CloudProviderSelector' />,
      <GlobalVarsEditor {...this.props} key='GlobalVarsEditor' />
      // <ExecuteSelector {...this.props} key='ExecuteSelector' />,
    ];
  }
}
