import React from 'react';
import { TextField, Paper, Typography, makeStyles, LinearProgress, useTheme } from '@material-ui/core';
import { LayoutUnit } from '../../layout/LayoutUnit';
import { Form, FormButtons, SubmitButton, Field } from '../../utilities/form';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        marginTop: theme.spacing(8)
    },
    loginWindow: {
        position: 'relative',
        flex: 1,
        padding: theme.spacing(3),
        width: 390
    },
    underline: {
        '&::after': {
            borderColor: 'black'
        }
    },
    label: {
        color: 'black'
    },
    logo: {
        width: 150
    },
    error: {
        color: theme.palette.error.main
    }
}));
export const LoginForm = (props) => {
    const { onSubmit, logo, usernameLabel, passwordLabel, error, loading } = props;
    const classes = useStyles();
    const theme = useTheme();
    return (React.createElement("div", { className: classes.root }, React.createElement(Form, { onSubmit: onSubmit }, React.createElement(Paper, { className: classes.loginWindow }, React.createElement(Typography, { variant: "h5", gutterBottom: true }, "Logi"), error && (React.createElement(Typography, { variant: "body1", className: classes.error }, "Your username or password is invali")), React.createElement(Field, { component: TextField, margin: "normal", type: "email", name: "username", InputProps: {
            classes: {
                underline: classes.underline
            }
        }, InputLabelProps: {
            focused: true,
            shrink: true,
            style: { color: theme.palette.grey[500] }
        }, label: usernameLabel || 'Sign in name', fullWidth: true, size: "small", variant: "standard", validate: (value) => {
            if (!(value === null || value === void 0 ? void 0 : value.length)) {
                return 'Please enter your sign in name';
            }
        } }), React.createElement(Field, { component: TextField, margin: "normal", type: "password", name: "password", InputProps: {
            classes: {
                underline: classes.underline
            }
        }, InputLabelProps: {
            focused: true,
            shrink: true,
            style: { color: theme.palette.grey[500] }
        }, label: passwordLabel || 'Password', fullWidth: true, size: "small", variant: "standard", validate: (value) => {
            if (!(value === null || value === void 0 ? void 0 : value.length)) {
                return 'Please enter your password';
            }
        } }), React.createElement(FormButtons, { style: { justifyContent: 'flex-end', marginBottom: 0 } }, React.createElement(SubmitButton, { variant: "contained", disablePristine: false, style: {
            margin: 0,
            backgroundColor: theme.palette.grey[800],
            color: '#fff'
        } }, "Sign I")), logo && (React.createElement("div", null, React.createElement("img", { className: classes.logo, src: logo, alt: "Unity" }))), React.createElement(LayoutUnit, { unit: "xxs" })), loading && React.createElement(LinearProgress, null))));
};
//# sourceMappingURL=LoginForm.js.map