import React, { useState } from 'react';
import validator from 'validator';
import { useNavigate } from 'react-router-dom';
import { Container, Form, Button, Alert, Row, Col, Card } from 'react-bootstrap';
import BasicTemplate from '../templates/BasicTemplate';

const RegisterPage = () => {
    const [full_name, setFullname] = useState('');
    const [phone_number, setPhoneNumber] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [error, setError] = useState('');

    const navigator = useNavigate();

    const handleSubmit = (e) => {
        e.preventDefault();
        // Validate password and confirm password match
        if (full_name.length === 0) {
            setError('Họ và tên không thể để trống');
        } else if (!validator.isMobilePhone(phone_number)) {
            setError('Số điện thoại không hợp lệ');        
        } else if (!validator.isEmail(email)) {
            setError('Email không hợp lệ');
        } else if (password.length < 8) {
            setError('Mật khẩu phải có tối thiểu 8 ký tự');
        } else if (password !== confirmPassword) {
            setError('Mật khẩu và xác nhận mật khẩu không khớp.');
        } else {
            setError('');
            // gọi API đăng ký ở đây
            console.log('Đăng ký thành công:',  {full_name, password });
            navigator('/');
        }
    };

    return (
        <BasicTemplate content={
            (<Container fluid className="d-flex justify-content-center mt-5">
                <Row>
                    <Col xs={1} md={2}></Col>
                    <Col xs={10} md={8}>
                        <Card style={{ width: '30rem' }} className='justify-content-center'>
                            <Card.Header>
                                <Card.Title className='mt-1 text-center'>Đăng ký</Card.Title>
                            </Card.Header>
                            <Card.Body>
                                <Form onSubmit={handleSubmit}>
                                    {/* full_name, phone_number, email, password */}
                                    {error && <Alert variant="danger">{error}</Alert>}

                                    <Form.Group controlId="full_name" className='mb-3'>
                                        <Form.Label>Họ và tên</Form.Label>
                                        <Form.Control
                                            // id='full_name'
                                            type="text"
                                            placeholder="Họ và tên"
                                            onChange={(e) => setFullname(e.target.value)}
                                            
                                        />
                                    </Form.Group>

                                    <Form.Group controlId="phone_number" className='mb-3'>
                                        <Form.Label>Số điện thoại</Form.Label>
                                        <Form.Control
                                            // id='phone_number'
                                            type="text"
                                            placeholder="Số điện thoại"
                                            onChange={(e) => setPhoneNumber(e.target.value)}
                                            
                                        />
                                    </Form.Group>

                                    <Form.Group controlId="email" className='mb-3'>
                                        <Form.Label>Email</Form.Label>
                                        <Form.Control
                                            // id='email'
                                            type="text"
                                            placeholder="Email"
                                            onChange={(e) => setEmail(e.target.value)}
                                            
                                        />
                                    </Form.Group>

                                    <Form.Group controlId="password" className='mb-3'>
                                        <Form.Label>Mật khẩu</Form.Label>
                                        <Form.Control
                                            // id='password'
                                            type="password"
                                            placeholder="Nhập mật khẩu"
                                            onChange={(e) => setPassword(e.target.value)}
                                            
                                        />
                                    </Form.Group>

                                    <Form.Group controlId="confirm_password" className='mb-3'>
                                        <Form.Label>Xác nhận mật khẩu</Form.Label>
                                        <Form.Control
                                            type="password"
                                            placeholder="Xác nhận mật khẩu"
                                            onChange={(e) => setConfirmPassword(e.target.value)}
                                            
                                        />
                                    </Form.Group>
                                    <div className='d-flex justify-content-between align-items-center'>
                                        <Button variant="primary" type="submit" className='me-2'>
                                            Đăng ký
                                        </Button>
                                        <a href="/login" className='me-2'>Đăng nhập</a>

                                    </div>

                                </Form>
                            </Card.Body>
                        </Card>

                    </Col>
                    <Col xs={1} md={2}></Col>
                </Row>
            </Container>
            )
        }>
        </BasicTemplate>
    );
};

export default RegisterPage;