import * as React from 'react';
import { connect } from "react-redux";
import { createStyles, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
import { withNamespaces, WithNamespaces } from 'react-i18next';
import Grid from '@material-ui/core/Grid';
import BeneficiaryInfo from './beneficiaryInfo';
import SelectCustomer from '../selectCustomer/selectCustomer';
import Pledge from './pledge';
import Clerk from './clerk';
import { SecurityPlanModel, SecurityPlanState, getInitialState } from '../../store/securityPlan/securityPlan/types';
import { updateSecurityPlan, fetchSecurityPlan } from '../../store/securityPlan/securityPlan/actions';
import { AppState } from '../../store';
import { SecurityPlanThunkDispatch } from '../../store/axiosConfig';

const styles = (theme: Theme) => createStyles({
    valittuAsiakas: {
        fontWeight: 'bold'
    },
    paper: {
        padding: '24px',
        textAlign: 'left',
        color: theme.palette.text.primary,
    }
});


export interface BeneficiaryProps extends WithStyles<typeof styles>, WithNamespaces {
    securityPlanId: number;
    securityPlanState: SecurityPlanState;
    updateSecurityPlan: typeof updateSecurityPlan;
}

export interface BeneficiaryState {
    securityPlanModel: SecurityPlanModel
}

class Beneficiary extends React.Component<BeneficiaryProps, BeneficiaryState> {

    readonly state = {
        securityPlanModel: {
            id: 0,
            profileId: 0,
            insuranceIsPledged: false,
            termsHasBeenGivenToCustomer: false,
            clerkName: "",
            clerkCostcenter: "",
        }
    }
constructor(props: BeneficiaryProps){
    super(props);
    this.onSecurityPlanModelChange = this.onSecurityPlanModelChange.bind(this);
}

    async componentDidMount() {
        // var joo = getInitialState().model;
        var diipa1 = this.state.securityPlanModel;
        this.setState({ securityPlanModel: { ...this.props.securityPlanState.model } })
        var diipa = this.state.securityPlanModel;
        //this.state.securityPlanModel = {...this.props.securityPlanState.model};
    }

    render() {
        return (

            <Grid container={true} spacing={24}>
                <Grid item={true} xs={12}>
                    {this.props.securityPlanId !== 0 && <SelectCustomer securityPlanId={this.props.securityPlanId} />}
                </Grid>

                <Grid item={true} xs={12}>
                    <BeneficiaryInfo securityPlanId={this.props.securityPlanId} />
                </Grid>

                <Grid item={true} xs={12}>
                    <Pledge model={this.state.securityPlanModel} onChange={this.onSecurityPlanModelChange} />
                </Grid>

                <Grid item={true} xs={12}>
                    <Clerk model={this.state.securityPlanModel} onChange={this.onSecurityPlanModelChange} />
                </Grid>
                {this.state.securityPlanModel.clerkCostcenter}
            </Grid>
        )
    }




    // onSecurityPlanModelChange = (field: keyof SecurityPlanModel, value: any) => {
    //     var model = { ...this.props.securityPlanState.model, [field]: value }
    //     this.setState({securityPlanModel: model});
    //     // this.props.updateSecurityPlan(model);
    // };

    //type InputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => void;
    onSecurityPlanModelChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        var model = { ...this.state.securityPlanModel };
        var field = event.target.name as keyof SecurityPlanModel;
        var value = event.target.value;
        model[field] = value;
        this.setState({ securityPlanModel: model });
        var state = this.state;
        //this.props.updateSecurityPlan(model);
    };

}


const mapDispatchToProps = (dispatch: SecurityPlanThunkDispatch) => ({
    //fetchSecurityPlan: (securityPlanId: number) => dispatch(fetchSecurityPlan(securityPlanId)),
    updateSecurityPlan: (model: SecurityPlanModel) => dispatch(updateSecurityPlan(model)),
});

const mapStateToProps = (state: AppState, ) => ({
    securityPlanState: state.securityPlan,
})

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(withNamespaces()(Beneficiary)));