import "./Register.scss";

import * as React from "react";
import {Form, Icon, Input, Button, Alert, Select} from "antd";
import { WrappedFormUtils } from "antd/lib/form/Form";
import { FormattedMessage } from "react-intl";
import { inject } from "mobx-react";
import * as shajs from "js-sha256";
import autobind from "autobind-decorator";

import BemUtil from "Utils/BEMUtil";

import ApiService from "Services/ApiService";

import {EUserRegisterError, IUserRegisterRequest, IUserRegisterResponse} from "Interfaces/Api/User/Register";
import {IApiResponse} from "Interfaces/Api/Response";

const Option = Select.Option;

interface IRegisterProps {
    form: WrappedFormUtils;
    ApiService?: ApiService;
}

interface IRegisterState {
    registered: boolean;
    error: JSX.Element;
    loading: boolean;
}

@inject("ApiService")
class Register extends React.Component<IRegisterProps, IRegisterState> {

    private readonly blockName = "register";

    public constructor(props: IRegisterProps) {
        super(props);

        this.state = {
            registered: false,
            error: null,
            loading: false
        };
    }

    public render() {
        return !this.state.registered ?
            this.renderRegister() :
            this.renderRegistered();
    }

    private renderRegister(): JSX.Element {

        return <Form onSubmit={this.handleSubmit} className={this.blockName}>
            {this.renderError()}
            {this.renderFormElements()}
            <Form.Item>
                <Button
                    type="primary"
                    htmlType="submit"
                    className={BemUtil.getElement(this.blockName, "submit")}
                    loading={this.state.loading}
                >
                    <FormattedMessage
                        id="auth.login.register_button"
                        defaultMessage="Register"
                    />
                </Button>
            </Form.Item>
        </Form>;
    }

    private renderRegistered() {
        return <Alert
            message={this.registeredTitle}
            type="success"
            description={this.registeredText}
            showIcon
        />;
    }

    private renderError() {
        return this.state.error ?
            <Form.Item>
                {this.state.error &&
                <Alert
                    message={this.errorTitle}
                    type="error"
                    description={this.state.error}
                    showIcon
                    closable
                />
                }
            </Form.Item> :
            null;

    }

    private renderFormElements() {
        const { getFieldDecorator } = this.props.form;

        return [
            <Form.Item>
                {getFieldDecorator("username", {
                    rules: [{
                        required: true,
                        message: this.getErrorMessage("username"),
                        pattern: /[A-Z0-9_-]/i
                    }],
                    validateTrigger: ""
                })(
                    <Input prefix={<Icon type="user" />} placeholder="Username" disabled={this.state.loading} />
                )}
            </Form.Item>,
            <Form.Item>
                {getFieldDecorator("password", {
                    rules: [{
                        required: true,
                        message: this.getErrorMessage("password")
                    }]
                })(
                    <Input
                        prefix={<Icon type="lock" />}
                        type="password"
                        placeholder="Password"
                        disabled={this.state.loading}
                    />
                )}
            </Form.Item>,
            <Form.Item>
                {getFieldDecorator("position", {
                    rules: [{
                        required: true,
                        message: this.getErrorMessage("position")
                    }]
                })(
                    <Select placeholder="Position">
                        {this.renderPositionOptions()}
                    </Select>
                )}
            </Form.Item>
        ];
    }

    private renderPositionOptions() {
        return [
            <Option value="1">
                <FormattedMessage
                    id="auth.register.organizer"
                    defaultMessage="Organizer"
                />
            </Option>,
            <Option value="2">
                <FormattedMessage
                    id="auth.register.ambassador"
                    defaultMessage="Ambassador"
                />
            </Option>,
            <Option value="3">
                <FormattedMessage
                    id="auth.register.volunteer"
                    defaultMessage="Volunteer"
                />
            </Option>,
            <Option value="4">
                <FormattedMessage
                    id="auth.register.Riot"
                    defaultMessage="Riot"
                />
            </Option>
        ];
    }

    private get errorTitle() {
        return <FormattedMessage
            id="auth.register.error_title"
            defaultMessage="Something went wrong"
        />;
    }

    private get registeredTitle() {
        return <FormattedMessage
            id="auth.register.success_title"
            defaultMessage="One last step"
        />;
    }

    private get registeredText() {
        return <FormattedMessage
            id="auth.register.success"
            defaultMessage="You have successfully registered your account. Please wait until it gets activated."
        />;
    }

    private getErrorMessage(field: string) {
        const fields: {[index: string]: JSX.Element} = {
            username: <FormattedMessage
                id="auth.login.username_error"
                defaultMessage="Please enter a valid username"
            />,
            password: <FormattedMessage
                id="auth.login.password_error"
                defaultMessage="Please enter a valid password"
            />,
            position: <FormattedMessage
                id="auth.login.password_error"
                defaultMessage="Please enter a valid password"
            />
        };

        return fields[field];
    }

    private getRegisterError(code: string) {
        const errors: { [index: string]: JSX.Element } = {
            exists: <FormattedMessage
                id="auth.register.error_exists"
                defaultMessage="This username is already associated to an account"
            />,
            serverFault: <FormattedMessage
                id="auth.register.server_fault"
                defaultMessage="Could not register you"
            />,
            badFormat: <FormattedMessage
                id="auth.register.error_bad_format"
                defaultMessage="Please check your input and try again"
            />
        };

        return errors[code];
    }

    private setErrorState() {
        this.setState({
            loading: false,
            error: this.getRegisterError("badFormat")
        });
    }

    private setLoading(loading: boolean = true) {
        this.setState({
            loading
        });
    }

    private handleSubmit = (e: any) => {
        e.preventDefault();

        this.setState({
            registered: false,
            error: null
        });

        this.props.form.validateFields((err: any, values: any) => {
            if (!err) {
                this.setLoading();

                const data = this.getInputData(values);

                this.props.ApiService.user.register.send(data)
                    .then(this.handleRegisterResponse)
                    .catch(this.handleRegisterReject);
            } else {
                this.setErrorState();
            }
        });
    }

    @autobind
    private handleRegisterResponse(response: IApiResponse<IUserRegisterResponse>) {

        const {data, error} = response;

        this.setLoading(false);

        if (error) {
            switch (error.status) {
                case EUserRegisterError.EXISTS:
                    this.setState({
                        error: this.getRegisterError("exists")
                    });
                    break;
                case EUserRegisterError.WRONG_INPUT:
                    this.setState({
                        error: this.getRegisterError("badFormat")
                    });
                    break;
                case EUserRegisterError.UNKNOWN:
                    this.setState({
                        error: this.getRegisterError("serverFault")
                    });
                    break;
            }

            return;
        }

        if (data.success) {
            this.setState({
                registered: true
            });
            return;
        }
    }

    @autobind
    private handleRegisterReject() {

        this.setErrorState();
    }

    private getInputData(values: any): IUserRegisterRequest {
        return {
            username: values.username,
            password: shajs.sha256(values.password),
            position: values.position
        };
    }
}

const RegisterForm = Form.create()(Register);
export default RegisterForm;