import React from 'react'
import _ from 'lodash'
import { formatTimeStamp, formatTimeDelta } from '../../utils.js'

export function TimeStamp({ t, deltaTo, title }) {
    return t ? (
        <tr>
            <td>{title}:</td>
            <td>
                {formatTimeStamp(t)}
                {deltaTo && (
                    <span className="text-muted">
                        ({formatTimeDelta(1000 * (t - deltaTo))})
                    </span>
                )}
            </td>
        </tr>
    ) : (
        <tr></tr>
    )
}

export function ConnectionInfo({ conn }) {
    return (
        <table className="connection-table">
            <tbody>
                <tr key="address">
                    <td>Address:</td>
                    <td>{conn.address.join(':')}</td>
                </tr>
                {conn.sni && (
                    <tr key="sni">
                        <td><abbr title="TLS Server Name Indication">TLS SNI:</abbr></td>
                        <td>{conn.sni}</td>
                    </tr>
                )}
            </tbody>
        </table>
    )
}

export function CertificateInfo({ flow }) {
    // @todo We should fetch human-readable certificate representation from the server
    return (
        <div>
            {flow.client_conn.cert && [
                <h4 key="name">Client Certificate</h4>,
                <pre key="value" style={{ maxHeight: 100 }}>{flow.client_conn.cert}</pre>
            ]}

            {flow.server_conn.cert && [
                <h4 key="name">Server Certificate</h4>,
                <pre key="value" style={{ maxHeight: 100 }}>{flow.server_conn.cert}</pre>
            ]}
        </div>
    )
}

export function Timing({ flow }) {
    const { server_conn: sc, client_conn: cc, request: req, response: res } = flow

    const timestamps = [
        {
            title: "Server conn. initiated",
            t: sc.timestamp_start,
            deltaTo: req.timestamp_start
        }, {
            title: "Server conn. TCP handshake",
            t: sc.timestamp_tcp_setup,
            deltaTo: req.timestamp_start
        }, {
            title: "Server conn. SSL handshake",
            t: sc.timestamp_ssl_setup,
            deltaTo: req.timestamp_start
        }, {
            title: "Client conn. established",
            t: cc.timestamp_start,
            deltaTo: req.timestamp_start
        }, {
            title: "Client conn. SSL handshake",
            t: cc.timestamp_ssl_setup,
            deltaTo: req.timestamp_start
        }, {
            title: "First request byte",
            t: req.timestamp_start,
        }, {
            title: "Request complete",
            t: req.timestamp_end,
            deltaTo: req.timestamp_start
        }, res && {
            title: "First response byte",
            t: res.timestamp_start,
            deltaTo: req.timestamp_start
        }, res && {
            title: "Response complete",
            t: res.timestamp_end,
            deltaTo: req.timestamp_start
        }
    ]

    return (
        <div>
            <h4>Timing</h4>
            <table className="timing-table">
                <tbody>
                    {timestamps.filter(v => v).sort((a, b) => a.t - b.t).map(item => (
                        <TimeStamp key={item.title} {...item}/>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

export default function Details({ flow }) {
    return (
        <section className="detail">
            <h4>Client Connection</h4>
            <ConnectionInfo conn={flow.client_conn}/>

            <h4>Server Connection</h4>
            <ConnectionInfo conn={flow.server_conn}/>

            <CertificateInfo flow={flow}/>

            <Timing flow={flow}/>
        </section>
    )
}
' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
<a id='n27' href='#n27'>27</a>
<a id='n28' href='#n28'>28</a>
<a id='n29' href='#n29'>29</a>
<a id='n30' href='#n30'>30</a>
<a id='n31' href='#n31'>31</a>
<a id='n32' href='#n32'>32</a>
<a id='n33' href='#n33'>33</a>
<a id='n34' href='#n34'>34</a>
<a id='n35' href='#n35'>35</a>
<a id='n36' href='#n36'>36</a>
<a id='n37' href='#n37'>37</a>
<a id='n38' href='#n38'>38</a>
<a id='n39' href='#n39'>39</a>
<a id='n40' href='#n40'>40</a>
<a id='n41' href='#n41'>41</a>
<a id='n42' href='#n42'>42</a>
<a id='n43' href='#n43'>43</a>
<a id='n44' href='#n44'>44</a>
<a id='n45' href='#n45'>45</a>
<a id='n46' href='#n46'>46</a>
<a id='n47' href='#n47'>47</a>
<a id='n48' href='#n48'>48</a>
<a id='n49' href='#n49'>49</a>
<a id='n50' href='#n50'>50</a>
<a id='n51' href='#n51'>51</a>
<a id='n52' href='#n52'>52</a>
<a id='n53' href='#n53'>53</a>
<a id='n54' href='#n54'>54</a>
<a id='n55' href='#n55'>55</a>
<a id='n56' href='#n56'>56</a>
<a id='n57' href='#n57'>57</a>
<a id='n58' href='#n58'>58</a>
<a id='n59' href='#n59'>59</a>
</pre></td>
<td class='lines'><pre><code>