import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { toggleFilter, toggleVisibility } from '../ducks/eventLog'
import ToggleButton from './common/ToggleButton'
import EventList from './EventLog/EventList'

export class PureEventLog extends Component {

    static propTypes = {
        filters: PropTypes.object.isRequired,
        events: PropTypes.array.isRequired,
        toggleFilter: PropTypes.func.isRequired,
        close: PropTypes.func.isRequired,
        defaultHeight: PropTypes.number,
    }

    static defaultProps = {
        defaultHeight: 200,
    }

    constructor(props, context) {
        super(props, context)

        this.state = { height: this.props.defaultHeight }

        this.onDragStart = this.onDragStart.bind(this)
        this.onDragMove = this.onDragMove.bind(this)
        this.onDragStop = this.onDragStop.bind(this)
    }

    onDragStart(event) {
        event.preventDefault()
        this.dragStart = this.state.height + event.pageY
        window.addEventListener('mousemove', this.onDragMove)
        window.addEventListener('mouseup', this.onDragStop)
        window.addEventListener('dragend', this.onDragStop)
    }

    onDragMove(event) {
        event.preventDefault()
        this.setState({ height: this.dragStart - event.pageY })
    }

    onDragStop(event) {
        event.preventDefault()
        window.removeEventListener('mousemove', this.onDragMove)
    }

    render() {
        const { height } = this.state
        const { filters, events, toggleFilter, close } = this.props

        return (
            <div className="eventlog" style={{ height }}>
                <div onMouseDown={this.onDragStart}>
                    Eventlog
                    <div className="pull-right">
                        {['debug', 'info', 'web', 'warn', 'error'].map(type => (
                            <ToggleButton key={type} text={type} checked={filters[type]} onToggle={() => toggleFilter(type)}/>
                        ))}
                        <i onClick={close} className="fa fa-close"></i>
                    </div>
                </div>
                <EventList events={events} />
            </div>
        )
    }
}

export default connect(
    state => ({
        filters: state.eventLog.filters,
        events: state.eventLog.view,
    }),
    {
        close: toggleVisibility,
        toggleFilter: toggleFilter,
    }
)(PureEventLog)
ble>
<div class='path'>path: <a href='/cgit/cloud-email/mitmproxy/tree/?id=5601338a1738a45533fb138612ccde9d64cb5d0d'>root</a>/<a href='/cgit/cloud-email/mitmproxy/tree/mitmproxy?id=5601338a1738a45533fb138612ccde9d64cb5d0d'>mitmproxy</a>/<a href='/cgit/cloud-email/mitmproxy/tree/mitmproxy/utils?id=5601338a1738a45533fb138612ccde9d64cb5d0d'>utils</a>/<a href='/cgit/cloud-email/mitmproxy/tree/mitmproxy/utils/bits.py?id=5601338a1738a45533fb138612ccde9d64cb5d0d'>bits.py</a></div><div class='content'>blob: ec0d40ef02208d50813e74a8238719f4d9b61e8c (<a href='/cgit/cloud-email/mitmproxy/plain/mitmproxy/utils/bits.py?id=5601338a1738a45533fb138612ccde9d64cb5d0d'>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>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
</pre></td>
<td class='lines'><pre><code>