import React, { useState } from 'react';
// import useAuth from '../hooks/useAuth';
import useRegister from '../hooks/useRegister';
import { Container, Row, Col, Form, Button, ToggleButton } from 'react-bootstrap';
import illustration from '../../../../assets/images/illustration/IllustrationRegister.png'
import { Link } from 'react-router-dom';

const RegisterPage = () => {
  const {
    fullname,
    setFullname,
    email,
    setEmail,
    roleValue,
    setRoleValue,
    password,
    setPassword,
    confirmPassword,
    setConfirmPassword,
    nisnOrNip,
    setNisnOrNip,
    loading,
    error,
    handleRegister,
  } = useRegister();

  return (
    <Container fluid className='bg-blue-50'>
      <Row className='h-100'>
        <Col md={6} className='d-flex justify-content-center'>
          <div className='w-75 sticky-top' style={{top:'15vh',height:'fit-content'}}>
            <h2 className='text-blue fw-bold mb-3'>Unlock Your English Potential</h2>
            <p className='text-secondary'>Get personalized lessons that fit your learning style. Begin your journey today!</p>
            <img src={illustration} alt="" className='w-75'/>
          </div>
        </Col>
        <Col md={6} className="pt-nav-1 pb-5 bg-white d-flex flex-column items-center rounded-5 rounded-end shadow">
          <div className='w-75'>
            <h2 className='text-blue fw-bold'>Sign Up</h2>
            <p className='text-secondary'>Let’s start by creating your account first.</p>
            <div className='bg-gd rounded w-100' style={{padding:"1px"}}>
              <Form className='bg-white form-sm rounded p-4' onSubmit={handleRegister}>
                <Form.Group className="mb-3" controlId="formBasicName">
                  <Form.Label>Full Name<span className='text-danger'>*</span></Form.Label>
                  <Form.Control
                    type="text"
                    placeholder="Full Name"
                    value={fullname}
                    onChange={(e) => setFullname(e.target.value)}
                    required
                  />
                </Form.Group>

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

                <Form.Group className="mb-3">
                  <Form.Label>Role<span className='text-danger'>*</span></Form.Label>
                  <div>
                    <ToggleButton
                      id="radio-student"
                      className="me-3"
                      type="radio"
                      variant={roleValue === '1' ? 'gd' : 'outline-secondary'}
                      name="radio-role"
                      value="1"
                      checked={roleValue === '1'}
                      onChange={(e) => setRoleValue(e.currentTarget.value)}
                    >
                      <i className="bi bi-book"></i> Student
                    </ToggleButton>

                    <ToggleButton
                      id="radio-teacher"
                      type="radio"
                      variant={roleValue === '2' ? 'gd' : 'outline-secondary'}
                      name="radio-role"
                      value="2"
                      checked={roleValue === '2'}
                      onChange={(e) => setRoleValue(e.currentTarget.value)}
                    >
                      <i className="bi bi-easel"></i> Teacher
                    </ToggleButton>
                  </div>
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicId">
                  <Form.Label>{roleValue === '1' ? 'NISN' : 'NIP'} <span className='text-danger'>*</span></Form.Label>
                  <Form.Control
                    type="text"
                    placeholder={roleValue === '1' ? 'NISN' : 'NIP'}
                    value={nisnOrNip}
                    onChange={(e) => setNisnOrNip(e.target.value)}
                    required
                  />
                  <Form.Text className="text-muted">
                    Unique {roleValue === '1' ? '10' : '18'}-digits ID
                  </Form.Text>
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicPassword">
                  <Form.Label>Password<span className='text-danger'>*</span></Form.Label>
                  <Form.Control
                    type="password"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                  <Form.Text className="text-muted">
                    Minimum 8 characters
                  </Form.Text>
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicConfirmPassword">
                  <Form.Label>Confirm Password<span className='text-danger'>*</span></Form.Label>
                  <Form.Control
                    type="password"
                    placeholder="Confirm Password"
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    required
                  />
                </Form.Group>

                {/* <Form.Group className='mb-3' controlId="formBasicCheckbox">
                  <Form.Check type="checkbox" label="Send me occasional email updates" />
                </Form.Group> */}

                <Button variant="gd" className="w-100" type="submit" disabled={loading}>
                  {loading ? 'Registering...' : 'Sign Up'}
                </Button>

                {error && <p className="text-danger">{error}</p>}
                <p className='mt-3 mb-0 text-center'>
                  Already have an account? <Link to="/login" className='text-blue'>Log In</Link> instead
                </p>
                {/* <h6 className='my-4 text-center text-muted-50'>OR</h6>

                <Button variant="outline-muted" className='w-100' onClick={handleLogin}>
                  <i className="bi bi-envelope me-1"></i>Sign Up with Google
                </Button> */}
              </Form>
            </div>
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default RegisterPage;
