import * as React from 'react';
import { connect } from "react-redux";
import Switch from '@material-ui/core/Switch';
import FormControl from '@material-ui/core/FormControl';
import { FormControlLabel, FormLabel } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import { createStyles, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
import { withNamespaces, WithNamespaces } from 'react-i18next';
import { TextInput, EuroInput, DropDownInput } from '../../shared/inputs';
import Grid from '@material-ui/core/Grid';
import { fetchSecurityPlan, updateSecurityPlan } from '../../store/securityPlan/securityPlan/actions';
import { SecurityPlanThunkDispatch } from '../../store/axiosConfig';
import { SecurityPlanModel, SecurityPlanState } from '../../store/securityPlan/securityPlan/types';
import { AppState } from '../../store';

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


export interface ClerkProps extends WithStyles<typeof styles>, WithNamespaces {
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    model: SecurityPlanModel;

    // securityPlanId: number;
    // securityPlanState: SecurityPlanState;
    // updateSecurityPlan: typeof updateSecurityPlan;
}

class Clerk extends React.Component<ClerkProps> {
    render() {
        const { classes } = this.props;

        return (
            <div>
                <h1>4. Myyjän tiedot</h1>
                <Paper className={classes.paper}>
                    <Grid container={true}>
                        <Grid item={true}>
                        <TextInput
                            inputName="clerkName"
                            label="Toimihenkilö"
                            onInputChange={this.props.onChange}
                            valueForInput={this.props.model.clerkName}
                        />
                        </Grid>
                        <Grid item={true}>
                        <TextInput
                            inputName="clerkName"
                            label="Kustannuspaikka"
                            onInputChange={this.props.onChange}
                            valueForInput={this.props.model.clerkCostcenter}
                        />
                        </Grid>
                    </Grid>
                </Paper>
            </div>
        )
    }

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

}


export default (withStyles(styles)(withNamespaces()(Clerk)));