import React, { Component } from 'react'
import { connect } from 'react-redux'
import _ from 'lodash'

import Nav from './FlowView/Nav'
import { Request, Response, ErrorView as Error } from './FlowView/Messages'
import Details from './FlowView/Details'
import Prompt from './Prompt'

import { selectTab } from '../ducks/ui/flow'

class FlowView extends Component {

    static allTabs = { Request, Response, Error, Details }

    constructor(props, context) {
        super(props, context)
        this.onPromptFinish = this.onPromptFinish.bind(this)
    }

    onPromptFinish(edit) {
        this.props.setPrompt(false)
        if (edit && this.tabComponent) {
            this.tabComponent.edit(edit)
        }
    }

    getPromptOptions() {
        switch (this.props.tab) {

            case 'request':
                return [
                    'method',
                    'url',
                    { text: 'http version', key: 'v' },
                    'header'
                ]
                break

            case 'response':
                return [
                    { text: 'http version', key: 'v' },
                    'code',
                    'message',
                    'header'
                ]
                break

            case 'details':
                return

            default:
                throw 'Unknown tab for edit: ' + this.props.tab
        }
    }

    render() {
        let { flow, tab: active, updateFlow } = this.props
        const tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details'])

        if (tabs.indexOf(active) < 0) {
            if (active === 'response' && flow.error) {
                active = 'error'
            } else if (active === 'error' && flow.response) {
                active = 'response'
            } else {
                active = tabs[0]
            }
        }

        const Tab = FlowView.allTabs[_.capitalize(active)]

        return (
            <div className="flow-detail">
                <Nav
                    flow={flow}
                    tabs={tabs}
                    active={active}
                    onSelectTab={this.props.selectTab}
                />
                <Tab ref={ tab => this.tabComponent = tab } flow={flow} updateFlow={updateFlow} />
                {this.props.promptOpen && (
                    <Prompt options={this.getPromptOptions()} done={this.onPromptFinish} />
                )}
            </div>
        )
    }
}

export default connect(
    state => ({
        promptOpen: state.ui.promptOpen,
        tab: state.ui.flow.tab
    }),
    {
        selectTab,
    }
)(FlowView)
mproxy/tree/?id=7e9a5e66fef6fcd3bda5c245be4c9b7d62daf2d6'>root</a>/<a href='/cgit.cgi/cloud-email/mitmproxy/tree/doc-src?id=7e9a5e66fef6fcd3bda5c245be4c9b7d62daf2d6'>doc-src</a>/<a href='/cgit.cgi/cloud-email/mitmproxy/tree/doc-src/dev?id=7e9a5e66fef6fcd3bda5c245be4c9b7d62daf2d6'>dev</a>/<a href='/cgit.cgi/cloud-email/mitmproxy/tree/doc-src/dev/sslkeylogfile.html?id=7e9a5e66fef6fcd3bda5c245be4c9b7d62daf2d6'>sslkeylogfile.html</a></div><div class='content'>blob: 1826fc2ef8d6dea3fcb619c9fedfd0f0997a331c (<a href='/cgit.cgi/cloud-email/mitmproxy/plain/doc-src/dev/sslkeylogfile.html?id=7e9a5e66fef6fcd3bda5c245be4c9b7d62daf2d6'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
</pre></td>
<td class='lines'><pre><code>