import React from "react";
import { withStyles } from "@material-ui/core/styles"

import { t } from "../utils/t";

import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import { red } from "@material-ui/core/colors";

import DialogCloseButton from "../components/DialogCloseButton";

import actions from "../actions/utils";

const styles = theme => ({
    red: {
        color: red[500]
    }
});


class AccountDialogDelete extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            classes: props.classes,
            account: props.account,
            open: props.open,
            _account_name_input: "",
            _is_confirmation_disabled: true
        };
    };

    componentWillReceiveProps(nextProps, nextContext) {

        this.setState({...nextProps});
    }

    _on_accept = (event, account) => {

        if(!this.state._is_confirmation_disabled) {

            actions.trigger_sfx("state-change_confirm-up");
            this.props.accept(event, account);
        }
    };

    _handle_account_name_input_change = (event) => {

        const _account_name_input = event.target.value;
        const { account } = this.state;
        const _is_confirmation_disabled = !(account.name.toLowerCase() === _account_name_input.toLowerCase());
        this.setState({_account_name_input, _is_confirmation_disabled});
    };

    _handle_key_down_input = (event) => {

        if(event.keyCode === 13){

            const { account } = this.state;
            this._on_accept(event, account);
        }
    };

    render() {

        const { classes, account, open, _is_confirmation_disabled } = this.state;

        return (
            <Dialog
                open={open}
                onClose={(event) => {this.props.onClose(event, account)}}
                aria-labelledby="delete-account-dialog-title"
                aria-describedby="delete-account-dialog-description"
            >
                {Boolean(account) ?
                    <div>
                        <DialogTitle id="delete-account-dialog-title">
                            {t("components.account_dialog_delete.title", {account_name: account.name})}
                            <DialogCloseButton onClick={(event) => {this.props.onClose(event, account)}} />
                        </DialogTitle>
                        <DialogContent>
                            <TextField
                                onChange={this._handle_account_name_input_change}
                                onKeyDown={this._handle_key_down_input}
                                id="name"
                                label={t( "words.name", {FLC: true})}
                                type="text"
                                fullWidth
                            />
                            <DialogContentText id="delete-account-dialog-description">
                                <p>{t("components.account_dialog_delete.cannot_be_undone", {account_name: account.name})}</p>
                                <p><b>{t("components.account_dialog_delete.repeat_name")}</b></p>
                            </DialogContentText>
                        </DialogContent>
                    </div>: null
                }
                <DialogActions>
                    <Button onClick={(event) => {this._on_accept(event, account)}} color="primary" disabled={_is_confirmation_disabled}>
                        {t("words.delete")}
                    </Button>
                </DialogActions>
            </Dialog>
        );
    }
}

export default withStyles(styles)(AccountDialogDelete);