/* @flow */

import Distribution from 'Components/Distribution'
import PaySlip from 'Components/PaySlip'
import SearchButton from 'Components/SearchButton'
import React, { Component } from 'react'
import { Trans } from 'react-i18next'
import './SalaryCompactExplanation.css'

import type { Tracker } from 'Components/utils/withTracker'

type ResultView = 'distribution' | 'payslip'
type State = {
	resultView: ResultView
}
type Props = {
	tracker: Tracker,
	displayResults: boolean
}

const resultViewTitle = {
	distribution: 'Cotisations',
	payslip: 'Fiche de paie'
}

export default class SalaryCompactExplanation extends Component<Props, State> {
	state = {
		resultView: 'payslip'
	}
	handleClickOnTab = (resultView: ResultView) => () => {
		this.setState({ resultView })
		this.props.tracker.push(['trackEvent', 'results', 'selectView', resultView])
	}
	render() {
		return (
			<>
				<div className="result-view__header">
					<div className="result-view__tabs">
						{['payslip', 'distribution'].map(resultView => (
							<button
								key={resultView}
								className={
									'ui__ link-button ' +
									(this.state.resultView === resultView ? 'selected' : '')
								}
								onClick={this.handleClickOnTab(resultView)}>
								<Trans>{resultViewTitle[resultView]}</Trans>
							</button>
						))}
					</div>
					<SearchButton />
				</div>
				<div className="ui__ card result-view__body">
					{this.state.resultView === 'payslip' ? <PaySlip /> : <Distribution />}
				</div>
			</>
		)
	}
}