import React, { useState } from "react";
import HomeLayout from "../../Layouts/HomeLayout";
import { Inertia } from '@inertiajs/inertia'
import { Container, Grid, Text, Card, Input, Button, Spacer } from '@nextui-org/react'

const Register = () => {
    const [values, setValues] = useState({
        email: "",
        name: "",
        password: "",
        password_confirmation: ""
    });

    function handleSubmit(e) {
        e.preventDefault()
        Inertia.post(route('register.submit'), values)
    }

    function handleChange(e) {
        const key = e.target.id;
        const value = e.target.value
        setValues(values => ({
            ...values,
            [key]: value,
        }))
    }

    return (
        <>     
        <Container css={{ width: '500px' }} >
            <Spacer y={3} />
            <Card css={{ $$cardColor: '#1e2835', borderColor: '#FFFFFF14' }} variant='bordered' >
                <form onSubmit={handleSubmit}>
                <Card.Header css={{ borderBottom:'1px solid #fff', justifyContent: 'center' }} >
                    <Text color='white' size={25} b> Register </Text>
                </Card.Header>
                <Card.Body>
                    <Grid.Container gap={2} >
                        <Grid md={12} css={{ color: '#fff', flexDirection: 'column' }}>
                            <label> Name * </label>
                            <Input value={values.name} onChange={handleChange} type='text' id='name' clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        </Grid>
                        <Grid md={12} css={{ color: '#fff', flexDirection: 'column' }}>
                            <label> Email * </label>
                            <Input value={values.email} onChange={handleChange} type='email' id='email' clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        </Grid>
                        <Grid md={12} css={{ color: '#fff', flexDirection: 'column' }}>
                            <label> Password * </label>
                            <Input value={values.password} onChange={handleChange} type='password' id='password' clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        </Grid>
                        <Grid md={12} css={{ color: '#fff', flexDirection: 'column' }}>
                            <label> Confirm Password * </label>
                            <Input value={values.password_confirmation} onChange={handleChange} type='password' id='password_confirmation' clearable bordered required borderWeight='0' css={{ background: '#fff', borderRadius: '0' }} fullWidth />
                        </Grid>
                    </Grid.Container>
                </Card.Body>
                <Card.Footer>
                    <Button type="submit" shadow size='lg' auto css={{ m: 'auto' }}> REGISTER </Button>
                </Card.Footer>
                </form>
            </Card>
            <Spacer y={8} />
        </Container>
        </>
    )
}

Register.layout = page => <HomeLayout children={page} title="Register" />

export default Register;