/* sample-checkbox.js */

/** External Module Dependencies **/
import React, {Component} from 'react'
import cn from 'classnames'
import Divider from 'material-ui/Divider'
import TextField from 'material-ui/TextField'
import Checkbox from 'material-ui/Checkbox';

/** Internal Module Dependencies **/
import * as style from '../styles/style.css'

export default class SampleCheckbox extends Component {
    constructor(props) {
        super(props)

        this.state = {
            selectedIndex: 0,
            paymentMethods: {},
        }

        this.updateSelectedPaymentMethods = this.updateSelectedPaymentMethods.bind(this)
    }

    componentWillMount() {
        this.props.getAppliedPayments(this.props.invoiceOrder)
    }

    componentWillUpdate(nextProps, nextState) {
        this.props.getAppliedPayments(this.props.invoiceOrder)
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (JSON.stringify(nextProps) == JSON.stringify(this.props) &&
            JSON.stringify(nextState) == JSON.stringify(this.state)) {
            return false
        }
        else {
            return true
        }
    }

    updateSelectedPaymentMethods(event, isInputChecked) {
        var paymentMethods = this.state.paymentMethods

        paymentMethods[event.target.value] = isInputChecked
        this.setState({ paymentMethods: paymentMethods })
    }

    select = (index) => this.setState({selectedIndex: index})

    render() {
	return (
            <div className={cn(style.reviewPanel)}>
                <div className={cn(style.paymentTotalRow)}>
                    <div className={cn(style.selectPaymentMethodContainer)}>
                        <label style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: '12px', lineHeight: '22px', marginTop: '14px' }}>Payment Methods</label>
                        <div className={cn(style.paymentMethods)}>
                            <Checkbox
                                className={cn(style.paymentMethod)}
                                value='bank_transfer'
                                iconStyle={{marginRight: '8px'}}
                                label='Bank Transfer'
                                labelStyle={{width: 'auto'}}
                                style={{padding: '5px 2px', margin: '0 20px 0 0', width: 'auto'}}
                                onCheck={this.updateSelectedPaymentMethods} />
                            <Checkbox
                                className={cn(style.paymentMethod)}
                                value='debit_payment'
                                iconStyle={{marginRight: '8px'}}
                                label='Debit Card'
                                labelStyle={{width: 'auto'}}
                                style={{padding: '5px 2px', margin: '0 20px 0 0', width: 'auto'}}
                                onCheck={this.updateSelectedPaymentMethods}  />
                        </div>
                    </div>
                    <div className={cn(style.paymentMethodContainer)}>
                        {(this.state.paymentMethods['bank_transfer'] && (
                            <div>
                                <label style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: '12px', lineHeight: '22px', marginTop: '14px' }}>Bank Transfer</label>
                                <div className={cn(style.paymentMethods)}>
                                    <TextField
                                        disabled={true}
                                        floatingLabelText='Payment Method Details'/>
                                </div>
                            </div>
                        ))}

                        {(this.state.paymentMethods['debit_payment'] && (
                            <div>
                                <label style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: '12px', lineHeight: '22px', marginTop: '14px' }}>Debit Card</label>
                                <div className={cn(style.paymentMethods)}>
                                    <TextField
                                        disabled={true}
                                        floatingLabelText='Payment Method Details' />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        )
    }
}