import React, { Component, PropTypes } from 'react'
import _                               from 'lodash'
import { BuildPropType }               from './BuildHistoryItem'
import {
    TrapApiError,
    WidgetHeader,
    WidgetBody,
} from 'mozaik/ui'
import {
    ResponsiveChart as Chart,
    Scale,
    Axis,
    Grid,
    Bars,
} from 'nivo'


const margin = { top: 20, right: 20, bottom: 40, left: 40 }


export default class BuildHistogram extends Component {
    static propTypes = {
        owner:      PropTypes.string.isRequired,
        repository: PropTypes.string.isRequired,
        apiData:    PropTypes.arrayOf(BuildPropType),
        apiError:   PropTypes.object,
    }

    static contextTypes = {
        theme: PropTypes.object.isRequired,
    }

    static getApiRequest({ owner, repository }) {
        return {
            id:     `travis.buildHistory.${ owner }.${ repository }`,
            params: { owner, repository },
        }
    }

    render() {
        const { owner, repository, apiData: _builds, apiError } = this.props
        const { theme }                                         = this.context

        let body = null
        if (_builds) {
            const data = _.clone(_builds).reverse().map(build => {
                return {
                    id:       build.number,
                    duration: build.duration / 60, // converts s to mn
                    state:    build.state,
                }
            })

            body =(
                <Chart margin={margin} data={data} theme={theme.charts}>
                    <Scale id="duration" type="linear" dataKey="duration" axis="y"/>
                    <Scale id="id" type="band" dataKey="id" axis="x" padding={0.3}/>
                    <Grid yScale="duration"/>
                    <Axis scaleId="id" position="bottom" axis="x"/>
                    <Axis scaleId="duration" position="left" axis="y"/>
                    <Bars xScale="id" x="id" yScale="duration" y="duration" color="#fff"/>
                </Chart>
            )
        }

        return (
            <div>
                <WidgetHeader
                    title="build histogram"
                    subject={`${owner}/${repository}`}
                    icon="bug"
                />
                <WidgetBody style={{ overflowY: 'hidden' }}>
                    <TrapApiError error={apiError}>
                        {body}
                    </TrapApiError>
                </WidgetBody>
            </div>
        )
    }
}

@@ -384,17 +384,17 @@
 bottom: 
-4
+6
 0, left:
@@ -398,9 +398,9 @@
 ft: 
-4
+7
 0 %7D%0A
@@ -1796,120 +1796,668 @@
 Axis
- scaleId=%22id%22 position=%22bottom%22 axis=%22x%22/%3E%0A                    %3CAxis scaleId=%22duration%22 position=%22left%22 axis=%22y%22
+%0A                        scaleId=%22duration%22%0A                        position=%22left%22%0A                        tickSize=%7B0%7D%0A                        tickPadding=%7B7%7D%0A                        legend=%22duration (mn)%22%0A                        legendPosition=%22center%22%0A                        legendOffset=%7B-40%7D%0A                    /%3E%0A                    %3CAxis%0A                        scaleId=%22id%22%0A                        position=%22bottom%22%0A                        tickSize=%7B0%7D%0A                        tickPadding=%7B7%7D%0A                        legend=%22build number%22%0A                        legendPosition=%22center%22%0A                        legendOffset=%7B40%7D%0A                    
 /%3E%0A 

add axis legend to BuildHistogram