import React from 'react'

import { makeStyles } from '@material-ui/core/styles';

import {
    Typography,
    TextField,
    MenuItem,
    Select,
    Input,
    Chip
} 
from '@material-ui/core';

const useStyles = makeStyles({
    root: {
        fontFamily:"MatterSQ,-apple-system,sans-serif", 
        textAlign:"left",
    },
    main: {
        marginBottom:"4rem",
    },
    title: {
        fontWeight:900, 
    },
    subtitle: {
        fontWeight:400, 
    },
    field: {
        "& .MuiInputBase-root": {
            color:"white !important",        
        },
        "& .MuiOutlinedInput-root": {
            backgroundColor: "#181818"
        },
        "& .MuiInput-underline:hover:before": {
            borderColor: "#9849F9"
        },
        "& .MuiInput-underline:after": {
            borderColor: "#9849F9"
        },
        "& .MuiFormLabel-root": {
            color: "gray",
        },
        "& :before": {
            borderColor: "gray"
        },
        "& :after": {
            borderColor: "#9849F9"
        },
        backgroundColor: "#181818",
        width:"100%", 
        height: "3rem",
        margin:"1rem 0"
    },
    chip: {
        margin: "5px;"
    }
});

export default function StepOne(props) {
    const classes = useStyles();

    const handleValueChange = props.handleValueChange;
    const globalState = props.formState;

    console.log("State",props.formState );
    console.log("StateUpdate",props.handleValueChange );

    const uses = [
        'Wohnen',
        'Büro',
        'Gewerbe',
        'Hotel',
        'Weiteres'
      ];

    return (
        <div
        style={{ 
            width:"90%", 
            margin:"1rem 0"}}>
            
            <Typography
                variant="h2"
                className={`${classes.root} ${classes.title} ${classes.main}`}
            >Projekt</Typography>

            <form 
            id="step1" 
            method="post" 
            action="/submit-page">
                <Typography
                variant="h6"
                className={`${classes.root} ${classes.title}`}
                >Bitte nennen sie drei Hauptmerkmale ihres Projektes</Typography>
                <TextField className={`${classes.root} ${classes.field}`}
                    label="Projekt USPs"
                    varient="outlined"
                    multiline
                    name="usp"
                    onChange={handleValueChange("usp")}
                    value={globalState.usp}
                />

                <Typography
                id="label-uses"
                variant="h6"
                className={`${classes.root} ${classes.title}`}
                >Welche Nutzungen sind vorgesehen?</Typography>
                <Select className={`${classes.root} ${classes.field}`}
                    name="uses"
                    id="uses"
                    labelId="label-uses"
                    variant="outlined"
                    label="Nutzungen"
                    multiple
                    onChange={handleValueChange("uses")}
                    value={globalState.uses}
                    input={<Input id="select-multiple-chip" className={`${classes.field}`}/>}
                    renderValue={(selected) => (
                        <div>
                            {selected.map((value) => (
                                <Chip className = {`${classes.chip}`}
                                    key={value} 
                                    label={value} 
                                />
                            ))}
                        </div>
                    )}
                    >
                    {uses.map((name) => (
                        <MenuItem key={name} value={name}>
                            {name}
                        </MenuItem>
                    ))}
                </Select>
                { globalState.uses.includes("Weiteres") &&
                    <TextField className={`${classes.root} ${classes.field}`}
                    label="Weitere Nutzungen"
                    varient="outlined"
                    name="additionalUses"
                    onChange={handleValueChange("additionalUses")}
                    value={globalState.additionalUses}
                    />
                }
                <Typography
                variant="h6"
                className={`${classes.root} ${classes.title}`}
                >Gibt es noch zusätzliche projektrelevante Informationen?</Typography>
                <TextField className={`${classes.root} ${classes.field}`}
                    classes={{ focused: classes.inputFocused}}
                    label="Weitere Angaben"
                    varient="outlined"
                    name="projectInfos"
                    onChange={handleValueChange("projectInfos")}
                    value={globalState.projectInfos}
                />
            </form>
        </div>
    )
}