import { Modal } from 'react-bootstrap'
import * as React from 'react';

import { 
    Box, Stepper, Step,
    StepLabel, Button , Typography
} from '@mui/material'

import { StepOne } from '../Password/Steps/one'
import { StepTwo } from '../Password/Steps/two'
import { StepTree } from '../Password/Steps/tree'
import { StepFour } from '../Password/Steps/four'

export function HelpModal (props) {

    let { visible, handleClose } = props

    const [activeStep, setActiveStep] = React.useState(0);
    const [skipped, setSkipped] = React.useState(new Set());

    const isStepSkipped = (step) => {
        return skipped.has(step);
    };

    const handleNext = () => {
        let newSkipped = skipped;
        if (isStepSkipped(activeStep)) {
            newSkipped = new Set(newSkipped.values());
            newSkipped.delete(activeStep);
        }

        setActiveStep((prevActiveStep) => prevActiveStep + 1);
        setSkipped(newSkipped);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleReset = () => {
        setActiveStep(0);
    };


    const steps = [
        {
            label : 'Información del candidato',
            operation: 
                <StepOne 
                    handleNext={handleNext} 
                    handleBack={handleBack} 
                />
        },
        {
            label : 'Seleccionar plaza',
            operation:
                <StepTwo 
                    handleNext={handleNext} 
                    handleBack={handleBack} 
                />
        },
        {
            label : 'Seleccionar pruebas',
            operation:
                <StepTree
                    handleNext={handleNext} 
                    handleBack={handleBack} 
                />
        },
        {
            label : 'Confirmar',
            operation: 
                <StepFour
                    handleNext={handleNext} 
                    handleBack={handleBack} 
                />
        },
    ];


    return (
        <Modal size="lg" 
            aria-labelledby="contained-modal-title-vcenter" 
            centered show={visible} 
            onHide={handleClose}
        > 
            <Modal.Header>
                <button type="button" className="close" onClick={handleClose}>&times;</button>
                <h4 className="modal-title">Crear Contraseña</h4>
            </Modal.Header>
            <Modal.Body className="modal-body">

                <Box sx={{ width: '100%' }}>
                    <Stepper activeStep={activeStep}>
                        {steps.map((step, index) => {
                            const stepProps = {};
                            const labelProps = {};
                            if (isStepSkipped(index)) {
                                stepProps.completed = false;
                            }
                            return (
                                <Step key={step.label} {...stepProps}>
                                    <StepLabel {...labelProps}>{step.label}</StepLabel>
                                </Step>
                            );
                        })}
                    </Stepper>
                    {activeStep === steps.length ? (
                        <React.Fragment>
                            <Typography sx={{ mt: 2, mb: 1 }}>
                                All steps completed - you&apos;re finished
                            </Typography>
                            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
                                <Box sx={{ flex: '1 1 auto' }} />
                                <Button onClick={handleReset}>Reiniciar</Button>
                            </Box>
                        </React.Fragment>
                    ) : (
                            <React.Fragment>

                                <Box style={{ padding : 25, marginTop : 25}}>
                                    {steps[activeStep].operation}
                                </Box>

                            </React.Fragment>
                        )}
                </Box>

            </Modal.Body>
        </Modal>
    )
}