import React, { useState, useEffect } from 'react'
import {
    Grid,
    Button,
    FormControlLabel,
    MenuItem,
    InputAdornment,
} from "@material-ui/core";
import { Form, Field } from "formik";
import {
    TextField,
    Switch
} from 'formik-material-ui';
import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
import {universityService} from '../../_services'
import { City } from '../../_types/City.type';
import { University } from '../../_types/University.type';

const styles = ((theme: Theme) => createStyles({
    form: {
        display: 'flex',
        flexWrap: 'wrap',
        flexDirection: 'row'
    },
    textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
    },
    dense: {
        marginTop: theme.spacing(2),
    }
}));

interface Props extends WithStyles<typeof styles> {
    submitForm: any;
    isSubmitting: any;
    values: any;
    setFieldValue: any;
}

interface UniversitySelectType {
	value: string;
	label: string;
}

interface CitySelectType {
	value: string;
	label: string;
}

interface State {
	cities: CitySelectType[];
    city: number;
    universities: UniversitySelectType[];
    university: number;
    email: string;
    driverLicense: false;
}

class EditProfileForm extends React.Component<Props, State> {
	constructor(props: Props) {
		super(props);
		this.state = {
            cities: [],
            city: 1,
			universities: [],
            university: 1,
            email: "test",
            driverLicense: false
		};
	}

	async componentDidMount() {
		let universities: University[] = await universityService.getUniversities();
		const transformedUniversities: UniversitySelectType[] = universities.map(university => ({
			value: university.name,
			label: university.name
        }));
        
        let cities: City[] = await universityService.getCities();
		const transformedCities: CitySelectType[] = cities.map(city => ({
			value: city.name, 
			label: city.name
        }));
        
        this.setState({ universities: transformedUniversities, cities: transformedCities});
	}

	render() {
		const {
			classes,
			submitForm,
			isSubmitting,
			values,
			setFieldValue
		} = this.props;

    return (
        <div>
            <Form>
                <Grid container>
                    <Grid container>
                        <Grid item xs={12} md={6}>
                            <Field
                                id="university"
                                name="university"
                                label="Uniwersytet"
                                type="text"
                                select
                                component={TextField}
                                className={classes.textField}
                                margin="normal"
                                fullWidth
                                >
                                {this.state.universities.map(university => (
                                    <MenuItem
                                        key={university.value}
                                        value={university.value}
                                    >
                                        {university.label}
                                    </MenuItem>
                                ))}
                            </Field>
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <Field
                               id="city"
                               name="city"
                               type="text"
                               select
                               component={TextField}
                               className={classes.textField}
                               margin="normal"
                               label="Miasto"
                               fullWidth
                               >
                               {this.state.cities.map(city => (
                                   <MenuItem
                                       key={city.value}
                                       value={city.value}
                                   >
                                       {city.label}
                                   </MenuItem>
                               ))}
                           </Field>
                        </Grid>
                    </Grid>

                    <Grid container alignItems="center">
                        <Grid item xs={12} md={6}>
                            <FormControlLabel
                                control={
                                    <Field label="Czy masz prawo jazdy?" name="haveDriverLicense" component={Switch} />
                                }
                                label="Czy masz prawo jazdy?"
                            />
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <Field
                                id="email"
                                name="email"
                                label="E-mail"
                                type="text"
                                component={TextField}
                                className={classes.textField}
                                margin="normal"
                                fullWidth
                            />
                        </Grid>              
                        </Grid>
                    </Grid>

                <Button
                    type="submit"
                    variant="contained"
                    color="primary"
                    disabled={isSubmitting}
                    onClick={submitForm}
                >
                    Zapisz zmiany
                </Button>
            </Form>
        </div>
    )
}
}
export default withStyles(styles)(EditProfileForm);