import React from "react"
import * as antd from "antd"
import { FormGenerator } from "components"
import { Icons } from "components/Icons"

import config from "config"

import "./index.less"

const formInstance = [
    {
        id: "username",
        element: {
            component: "Input",
            icon: "User",
            placeholder: "Username",
            props: {
                autoCorrect: "off",
                autoCapitalize: "none",
                className: "login-form-username",
            },
        },
        item: {
            hasFeedback: true,
            rules: [
                {
                    required: true,
                    message: 'Please input your Username!',
                },
            ],
        }
    },
    {
        id: "password",
        element: {
            component: "Input",
            icon: "Lock",
            placeholder: "Password",
            props: {
                type: "password"
            }
        },
        item: {
            hasFeedback: true,
            rules: [
                {
                    required: true,
                    message: 'Please input your Password!',
                },
            ],
        }
    },
    {
        id: "login_btn",
        withValidation: true,
        element: {
            component: "Button",
            props: {
                icon: "User",
                children: "Login",
                type: "primary",
                htmlType: "submit"
            }
        }
    },
]

export default class Login extends React.Component {
    static pageStatement = {
        bottomBarAllowed: false
    }

    handleFinish = async (values, ctx) => {
        ctx.toogleValidation(true)

        const payload = {
            username: values.username,
            password: values.password,
            allowRegenerate: values.allowRegenerate,
        }

        this.props.sessionController.login(payload, (error, response) => {
            ctx.toogleValidation(false)
            ctx.clearErrors()

            if (error) {
                ctx.shake("all")
                return ctx.error("result", error)
            } else {
                if (response.status === 200) {
                    this.onDone()
                }
            }
        })
    }

    onDone = () => {
        if (typeof this.props.onDone === "function") {
            this.props.onDone()
        }

        if (typeof this.props.close === "function") {
            this.props.close()
        }
    }

    render() {
        return <div className="login">
            <div className="header">
                <div className="logo">
                    <img src={config.logo?.full} />
                </div>
            </div>
            {this.props.session && <div className="session_available">
                <h3><Icons.AlertCircle /> You already have a valid session.</h3>
                <div className="session_card">
                    @{this.props.session.username}
                </div>
                <antd.Button
                    type="primary"
                    onClick={() => window.app.setLocation(config.app?.mainPath ?? "/home")} >
                    Go to home
                </antd.Button>
            </div>}
            <FormGenerator
                name="normal_login"
                renderLoadingIcon
                className="login-form"
                items={formInstance}
                onFinish={this.handleFinish}
            />
        </div>
    }
}