import React, { useState } from 'react';
import { Container, Row, Col, Button, Form, Tab, Nav, Alert, Modal, Spinner } from 'react-bootstrap';
import avatar from '../../../../assets/images/default-avatar.jpg';
import ilustration from '../../../../assets/images/illustration/changePass.png';
import successModal from '../../../../assets/images/illustration/successModal.png';
import errorModal from '../../../../assets/images/illustration/IllustrationForgot.png';
import useSettings from '../hooks/useSettings';

import Skeleton from 'react-loading-skeleton';

const Setting = () => {
  const { 
    profile,
    selectedImage,
    loading,
    loadingUpdate,
    error,
    success,
    handleInputChange,
    handleImageChange,
    handleSubmitProfile,
    formData,
    handleInputPassChange,
    handleChangePass,
    loadingPass,
    errorPass,
    successPass,
    resetForm,
    resetStatus,
    thumbPath,
  } = useSettings(); 

  const [showModal, setShowModal] = useState(false);

  const handleCloseModal = () => {
    setShowModal(false);
    resetForm();
  };

  const handleFormProfile = async (e) => {
    resetStatus();
    setShowModal(true);
    await handleSubmitProfile(e);
  };

  const handleFormPass = async (e) => {
    resetStatus();
    setShowModal(true);
    await handleChangePass(e);
  };

  // if (loading) {
  //   return <></>;
  // }

  return (
      <Container fluid className='setting-page'>
          <Tab.Container id="left-tabs-example" defaultActiveKey="main">
              <Row>
                  <Col className='mb-4'>
                      <h3 className='fw-bold text-blue'>Your Exercise History!</h3>
                      <p className='text-secondary mb-4'>Track your progress with a personalized overview of all your workouts.</p>
                          <Nav variant="pills" className="p-2 bg-white rounded-4">
                              {loading ?(
                                <>
                                  <Nav.Item>
                                      <Nav.Link eventKey="aaa"><Skeleton className='rounded-3' style={{width:"44px",height:"21px"}}/></Nav.Link>
                                  </Nav.Item>
                                  <Nav.Item>
                                      <Nav.Link eventKey="aaa"><Skeleton className='rounded-3' style={{width:"120px",height:"21px"}}/></Nav.Link>
                                  </Nav.Item>
                                </>
                              ) : (
                                <>
                                  <Nav.Item>
                                      <Nav.Link eventKey="main">Profile</Nav.Link>
                                  </Nav.Item>
                                  <Nav.Item>
                                      <Nav.Link eventKey="pass">Change Password</Nav.Link>
                                  </Nav.Item>
                                </>
                              )}
                          </Nav>
                  </Col>
              </Row>
              {loading?(
                <div className='w-100 d-flex align-items-strech'>
                  <Skeleton containerClassName='w-50 d-flex justify-content-end' className='rounded-3' style={{width:"98%",height:"45vh"}} />
                  <Skeleton containerClassName='w-50 d-flex justify-content-end' className='rounded-3' style={{width:"98%",height:"45vh"}} />
                </div>
              ) : (
                <Tab.Content>
                    <Tab.Pane eventKey="main">
                      <Row>
                        <Col md={7} xxl={8}>
                          <Form className='bg-white rounded rounded-4 p-4' onSubmit={handleFormProfile}>
                            <Form.Group className="mb-3" controlId="formBasicNISN">
                              <Form.Label className='mb-1'>NISN<span className='text-danger'>*</span></Form.Label>
                              <Form.Control type="text" defaultValue={profile.NISN} readOnly />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="formBasicClass">
                              <Form.Label className='mb-1'>Class<span className='text-danger'>*</span></Form.Label>
                              <Form.Control 
                                type="text" 
                                defaultValue={profile.NAME_CLASS || 'Not Assigned'} 
                                disabled={!profile.NAME_CLASS}
                                readOnly 
                              />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="formBasicFullName">
                              <Form.Label className='mb-1'>Full Name<span className='text-danger'>*</span></Form.Label>
                              <Form.Control
                                type="text"
                                placeholder="Name"
                                name="NAME_USERS"
                                value={profile.NAME_USERS}
                                onChange={handleInputChange}
                              />
                            </Form.Group>

                            <Form.Group className="mb-3" controlId="formBasicEmail">
                              <Form.Label className='mb-1'>Email Address<span className='text-danger'>*</span></Form.Label>
                              <Form.Control
                                type="email"
                                placeholder="Email"
                                name="EMAIL"
                                value={profile.EMAIL}
                                onChange={handleInputChange}
                              />
                            </Form.Group>

                            <Button variant="gd" className='mt-3 py-2 w-100 rounded-35' type="submit" disabled={loadingUpdate}>
                              {loadingUpdate ? 'Saving...' : 'Save Changes'}
                            </Button>
                          </Form>
                        </Col>

                        <Col md={5} xxl={4} className='mt-3 mt-md-0'>
                          <div className='h-100 bg-white rounded rounded-4 p-4 d-flex flex-column items-center'>
                            <h4>Avatar</h4>
                            <img
                              src={selectedImage ? URL.createObjectURL(selectedImage) : profile.PICTURE ? `${thumbPath}${profile.PICTURE}` : avatar}
                              alt="avatar"
                              className='mb-3 w-50 rounded-circle'
                            />
                            <div className="w-100 d-flex justify-content-center">
                              <Form.Control type="file" onChange={handleImageChange} className="me-1 py-2 w-75 rounded border border-muted" />
                            </div>
                            <small>Ensure the file size is no larger than 5 MB</small>
                          </div>
                        </Col>
                      </Row>

                    </Tab.Pane>
                    <Tab.Pane eventKey="pass">
                      <Row>
                        <Col md={7} xxl={8}>
                          <Form className='bg-white rounded rounded-4 p-4' onSubmit={handleFormPass}>
                            <Form.Group className="mb-3" controlId="formBasicOldPassword">
                              <Form.Label>Old Password<span className='text-danger'>*</span></Form.Label>
                              <Form.Control
                                type="password"
                                placeholder="Old Password"
                                name="oldPassword"
                                value={formData.oldPassword}
                                onChange={handleInputPassChange}
                                required
                              />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="formBasicNewPassword">
                              <Form.Label>New Password<span className='text-danger'>*</span></Form.Label>
                              <Form.Control
                                type="password"
                                placeholder="New Password"
                                name="newPassword"
                                value={formData.newPassword}
                                onChange={handleInputPassChange}
                                required
                              />
                            </Form.Group>
                            <Form.Group className="mb-3" controlId="formBasicConfirmPassword">
                              <Form.Label>Confirm New Password<span className='text-danger'>*</span></Form.Label>
                              <Form.Control
                                type="password"
                                placeholder="Confirm New Password"
                                name="confirmPassword"
                                value={formData.confirmPassword}
                                onChange={handleInputPassChange}
                                required
                              />
                            </Form.Group>   
                            <Button variant="gd" className='mt-3 py-2 w-100 rounded-35' type="submit" disabled={loadingPass}>
                              {loadingPass ? 'Updating...' : 'Update Now'}
                            </Button>
                          </Form>
                        </Col>
                        <Col md={5} xxl={4} className='mt-3 mt-md-0'>
                          <div className='h-100 d-flex items-center'>
                            <img src={ilustration} alt="" className='h-100'/>
                          </div>
                        </Col>
                      </Row>
                    </Tab.Pane>
                </Tab.Content>
              )}
          </Tab.Container>

          <Modal show={showModal} onHide={handleCloseModal} centered>
            <Modal.Body className='p-4 d-flex flex-column items-center'>
              <h4 className={`mb-4 fw-bold ${error || errorPass ? 'text-danger fw-bold' : 'text-dark'}`}>
                {error && "ERROR"}
                {success && 'Looking Sharp!'}
                {errorPass && "ERROR"}
                {successPass && 'Security Boosted!'}
              </h4>

              {
                loadingUpdate || loadingPass ?(
                  <div className='d-flex' style={{margin:"5vh 0"}}>
                    <Spinner animation="grow" variant="primary" />
                    <Spinner animation="grow" variant="secondary" />
                    <Spinner animation="grow" variant="success" />
                    <Spinner animation="grow" variant="danger" />
                    <Spinner animation="grow" variant="warning" />
                    <Spinner animation="grow" variant="info" />
                  </div>
                ):(
                  <img src={error || errorPass ? errorModal : successModal} alt="imgModal" className='w-50' />
                ) 
              }
              
              <p className='my-3 text-muted fw-light text-center'>
                {error && error}
                {success && 'Your profile has been successfully updated.'}
                {errorPass && errorPass}
                {successPass && "Your password change was successful. You're good to go!"}
              </p>
                
              <Button 
                variant="gd" 
                className={`mt-4 mx-1 py-2 px-5 w-100 rounded-35 ${loadingUpdate || loadingPass ? 'd-none' : 'd-block'}`}
                onClick={handleCloseModal}
              >
                Got It
              </Button>
            </Modal.Body>
          </Modal>

      </Container>
  );
};

export default Setting;