import {
    NFCAccountCard,
    NFCCard,
    NFCCardType,
    NFCPropertyCard, NFCPropertyCardSpecialProperties,
    PropertyColor,
    TaskType,
    WiFiNetwork
} from "../RawConstants";
import React, {Component} from "react";
import {
    Backdrop,
    Box,
    Button,
    Fade, FormControl, FormControlLabel, FormGroup, FormLabel, Grid,
    InputLabel,
    MenuItem,
    Modal, Radio, RadioGroup,
    Select, SelectChangeEvent, Switch,
    TextField,
    Typography
} from "@mui/material";
import WifiPasswordIcon from "@mui/icons-material/WifiPassword";
import WifiIcon from "@mui/icons-material/Wifi";

type AccountValues = keyof NFCAccountCard;

type PropertyValues = keyof NFCPropertyCard;

type TaskValues =
    "TYPE" | "AMOUNT1" | "AMOUNT2";

interface CardSetupState {
    validNFCCard: boolean,
    NFCCardType: NFCCardType,

    accountValues: { [key in AccountValues]?: string },
    propertyValues: { [key in PropertyValues]?: string | number | boolean },
    taskValues: { [key in TaskValues]?: TaskType | number }
}

interface CardSetupProps {
    closeCallback: () => void;
    card?: NFCCard;
}

export default class CardSetup extends Component<CardSetupProps, CardSetupState> {
    constructor(props: CardSetupProps) {
        super(props);

        let defaultType = NFCCardType.ACCOUNT;
        let accountValues: { [key in AccountValues]?: string } = {};
        let propertyValues: { [key in PropertyValues]?: string } = {};
        let taskValues: { [key in TaskValues]?: string } = {};

        if (props.card) {
            defaultType = props.card.cardType;
            switch (defaultType) {
                case NFCCardType.ACCOUNT:
                    let card = props.card as NFCAccountCard;
                    accountValues = {
                        symbol: card.symbol,
                        nickname: card.nickname,
                        pin: card.pin,
                    }
            }
        }

        this.state = {
            validNFCCard: false,
            NFCCardType: NFCCardType.ACCOUNT,

            accountValues: accountValues,
            propertyValues: {},
            taskValues: {},
        }

    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    modalStyle = {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: 700,
        maxHeight: '80%',
        overflowY: 'scroll',
        height: 'auto',
        display: 'block',
        bgcolor: 'background.paper',
        border: '2px solid #0000',
        boxShadow: 24,
        p: 4,
    };

    changeAccountState(prop: AccountValues, ev: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>, useUpperCase = false) {
        this.setState(prevState => ({
            ...prevState,
            accountValues: {
                ...prevState.accountValues,
                [prop]: useUpperCase ? ev.target.value.toUpperCase() : ev.target.value
            }
        }))
    }

    changePropertyState(prop: PropertyValues, ev: any) {
        if(prop == "fullSetAmount") {
            if (ev.target.value > 4)
                ev.target.value = 4;
            if(ev.target.value < 1)
                ev.target.value = 1;
        }
        if(prop == "buyValue" || prop == "mortgageValue" || prop.includes("rent"))
        {
            if(ev.target.value < 0)
                ev.target.value = 0;
        }

        this.setState(prevState => ({
            ...prevState,
            propertyValues: {
                ...prevState.propertyValues,
                [prop]: ev.target.value
            }
        }))
    }

    changeTaskState(prop: TaskValues, ev: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
        this.setState(prevState => ({
            ...prevState,
            taskValues: {
                ...prevState.taskValues,
                prop: ev.target.value
            }
        }))
    }

    insertInputsPerType = () => {
        if (this.state.NFCCardType == NFCCardType.ACCOUNT) {
            return (<FormGroup sx={{m: 1}}>
                <TextField sx={{mb: 1}}
                           label="Symbol"
                           type="text"
                           value={this.state.accountValues["symbol"]}
                           onChange={(ev) => this.changeAccountState("symbol", ev)}
                />
                <TextField sx={{mb: 1}}
                           label="Nickname"
                           type="text"
                           value={this.state.accountValues["nickname"]}
                           onChange={(ev) => this.changeAccountState("nickname", ev)}
                />
                <TextField sx={{mb: 1}}
                           label="PIN"
                           type="number"
                           value={this.state.accountValues["pin"]}
                           onChange={(ev) => this.changeAccountState("pin", ev)}
                />

            </FormGroup>)
        }

        if (this.state.NFCCardType == NFCCardType.PROPERTY) {
            return (<FormGroup sx={{m: 1}}>
                <Grid container spacing={2} sx={{width: '100%'}}>
                    <Grid item xs={12} sm={12}>
                        <InputLabel>Name</InputLabel>
                        <TextField
                            sx={{mb: 1}}
                            type="text"
                            value={this.state.propertyValues["name"]}
                            onChange={(ev) => this.changePropertyState("name", ev)}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <InputLabel id="colorLabel">Farbcode / Typ</InputLabel>
                        <Select
                            labelId={"colorLabel"}
                            sx={{mb: 1}}
                            onChange={(ev) => this.changePropertyState("color", ev)}
                            label="Farbcode / Typ "
                            value={this.state.propertyValues["color"]}
                            fullWidth
                        >
                            <MenuItem disabled={true} value="pleaseSelect">Bitte wählen...</MenuItem>
                            {Object.keys(PropertyColor).map((color: string) => (
                                <MenuItem key={color} value={color}>{color}</MenuItem>
                            ))}
                        </Select>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <InputLabel>Voller Satz Anzahl</InputLabel>
                        <TextField
                            sx={{mb: 1}}
                            type="number"
                            value={this.state.propertyValues["fullSetAmount"]}
                            onChange={(ev) => this.changePropertyState("fullSetAmount", ev)}
                            fullWidth
                            aria-valuemin={0}
                            aria-valuemax={4}
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <InputLabel>Kauf-Wert</InputLabel>
                        <TextField
                            sx={{mb: 1}}
                            inputProps={{"step": 5}}
                            type="number"
                            value={this.state.propertyValues["buyValue"]}
                            onChange={(ev) => this.changePropertyState("buyValue", ev)}
                            fullWidth
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <InputLabel>Hypothek-Wert</InputLabel>
                        <TextField
                            sx={{mb: 1}}
                            inputProps={{"step": 5}}
                            type="number"
                            value={this.state.propertyValues["mortgageValue"]}
                            onChange={(ev) => this.changePropertyState("mortgageValue", ev)}
                            fullWidth
                        />
                    </Grid>

                    <Grid item xs={4} sm={4}>
                        <TextField
                            type="number"
                            label={"Grundmiete"}
                            inputProps={{"step": 5}}
                            value={this.state.propertyValues["rent"]}
                            onChange={(ev) => this.changePropertyState("rent", ev)}
                            helperText={"Grundmiete ohne Haus und Set"}
                        />
                    </Grid>
                    <Grid item xs={4} sm={4}>
                        <TextField
                            type="number"
                            label={"Miete 1"}
                            inputProps={{"step": 5}}
                            value={this.state.propertyValues["rent1"]}
                            onChange={(ev) => this.changePropertyState("rent1", ev)}
                            helperText={"Miete bei einem Haus"}
                        />
                    </Grid>
                    <Grid item xs={4} sm={4}>
                        <TextField
                            type="number"
                            label={"Miete 2"}
                            inputProps={{"step": 5}}
                            value={this.state.propertyValues["rent2"]}
                            onChange={(ev) => this.changePropertyState("rent2", ev)}
                            helperText={"Miete bei 2 Häusern"}
                        />
                    </Grid>

                    <Grid item xs={4} sm={4}>
                        <TextField
                            type="number"
                            label={"Miete 3"}
                            inputProps={{"step": 5}}
                            value={this.state.propertyValues["rent3"]}
                            onChange={(ev) => this.changePropertyState("rent3", ev)}
                            helperText={"Miete bei 3 Häusern"}
                        />
                    </Grid>

                    <Grid item xs={4} sm={4}>
                        <TextField
                            type="number"
                            label={"Miete 4"}
                            inputProps={{"step": 5}}
                            value={this.state.propertyValues["rent4"]}
                            onChange={(ev) => this.changePropertyState("rent4", ev)}
                            helperText={"Miete bei 4 Häusern"}
                        />
                    </Grid>

                    <Grid item xs={4} sm={4}>
                        <TextField
                            type="number"
                            label={"Miete Hotel"}
                            inputProps={{"step": 5}}
                            value={this.state.propertyValues["rentHotel"]}
                            onChange={(ev) => this.changePropertyState("rentHotel", ev)}
                            helperText={"Miete bei einem Hotel"}
                        />
                    </Grid>
                    <Grid item xs={12} sm={12}>
                        <FormControl fullWidth>
                            <FormLabel id="cardProperties">Besondere Eigenschaften</FormLabel>
                            <RadioGroup
                                row
                                aria-labelledby="cardProperties"
                                defaultValue={""}
                                value={this.state.propertyValues["specialProperties"]}
                                onChange={(ev) => this.changePropertyState("specialProperties", ev)}
                            >
                                <FormControlLabel value={""} control={<Radio />} label="Keine" />
                                <FormControlLabel value="UTILITY" control={<Radio />} label="Bahnhof" />
                                <FormControlLabel value="TRAINSTATION" control={<Radio />} label="Versorgungswerk" />
                                <FormControlLabel value="JAIL" control={<Radio />} label="Gefängnis" />
                            </RadioGroup>
                        </FormControl>
                    </Grid>
                </Grid>


            </FormGroup>)

        }

        if (this.state.NFCCardType == NFCCardType.TASK) {
            return (<FormGroup sx={{m: 1}}>
                <TextField sx={{mb: 1}}
                           label="Symbol"
                           type="text"
                           value={this.state.accountValues["symbol"]}
                           onChange={(ev) => this.changeAccountState("symbol", ev)}
                />
                <TextField sx={{mb: 1}}
                           label="Nickname"
                           type="text"
                           value={this.state.accountValues["nickname"]}
                           onChange={(ev) => this.changeAccountState("nickname", ev)}
                />
                <TextField sx={{mb: 1}}
                           label="PIN"
                           type="number"
                           value={this.state.accountValues["pin"]}
                           onChange={(ev) => this.changeAccountState("pin", ev)}
                />

            </FormGroup>)
        }

        return (<div>Typ selektieren um fortzufahren.</div>)
    }

    render() {
        return (<Modal
            aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
            open={true}
            onClose={() => {
                this.props.closeCallback()
            }}
            closeAfterTransition
            slots={{backdrop: Backdrop}}
            slotProps={{
                backdrop: {
                    timeout: 500,
                },
            }}
        >
            <Fade in={true}>
                <Box sx={this.modalStyle}>
                    <Typography id="transition-modal-title" variant="h6" component="h2">
                        NFC-Karte konfigurieren
                    </Typography>
                    <Typography id="transition-modal-description" sx={{mt: 2}}>
                        {this.state.validNFCCard ? "Es wurde eine gültige Spielkarte erkannt." : "Es wurde eine ungültige NFC-Karte erkannt."}
                        <br/><br/>
                        <div>
                            <InputLabel id="nfcCardTypeLabel">Karten-Typ</InputLabel>
                            <Select
                                labelId="nfcCardTypeLabel"
                                value={this.state.NFCCardType}
                                onChange={(ev) =>
                                    this.setState(prevState => ({
                                        ...prevState,
                                        NFCCardType: ev.target.value as NFCCardType
                                    }))
                                }
                            >
                                {Object.values(NFCCardType).map(e => {
                                    return (
                                        <MenuItem value={(e)}>{(e)}</MenuItem>
                                    )
                                })}

                            </Select>
                        </div>
                        {this.insertInputsPerType()}
                        <br/>
                        <Button variant="contained" onClick={() => {
                            this.props.closeCallback();
                        }}
                                color="secondary">Schließen</Button>

                        <Button variant="contained" color="primary" sx={{ml: 1}}
                                onClick={() => {
                                }}>Karte beschreiben</Button>
                    </Typography>
                </Box>
            </Fade>
        </Modal>);
    }
}