// import { Link } from 'react-router-dom';
import React,{useState} from 'react';

// material-ui
import { 
  Stepper,
  Step,
  StepButton,
  // Grid, 
  Stack, 
  Typography,
  Button,

} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';

// project import
import CustomFormWizard from './auth-forms/CustomFormWizard';
import AuthWrapper from './AuthWrapperCustom';

// ================================|| REGISTER ||================================ //
const stepStyle = {
  width:"80%",
  boxShadow: 2,
  backgroundColor: "rgba(0,0,0,0.1)",
  padding: 2,
  "& .Mui-active": {
    "&.MuiStepIcon-root": {
      color: "warning.main",
      fontSize: "2rem",
    },
    "& .MuiStepConnector-line": {
      borderColor: "warning.main"
    }
  },
  "& .Mui-completed": {
    "&.MuiStepIcon-root": {
      color: "secondary.main",
      fontSize: "2rem",
    },
    "& .MuiStepConnector-line": {
      borderColor: "secondary.main"
    }
  }
}
const steps = ['個人資料', '預覽', '完成提交'];

const Register = () => {
  const [activeStep, setActiveStep] = useState(0);
  const [completed, setCompleted] = useState([false]);
  const [isValid, setisValid] = useState(null);

  const updateValid = (value) => {
    setisValid(value);
    console.log(value)
  };

  const totalSteps = () => {
    return steps.length;
  };

  const completedSteps = () => {
    return Object.keys(completed).length;
  };

  const isLastStep = () => {
    return activeStep === totalSteps() - 1;
  };

  const allStepsCompleted = () => {
    return completedSteps() === totalSteps();
  };

  const handleNext = () => {
    console.log("test 1")
    const newActiveStep =
    isLastStep() && !allStepsCompleted()
    ? // It's the last step, but not all steps have been completed,
    // find the first step that has been completed
    steps.findIndex((step, i) => !(i in completed))
    : activeStep + 1;
    setActiveStep(newActiveStep);
    console.log(newActiveStep)
  };

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

  const handleStep = (step) => () => {
    setActiveStep(step);
  };

  // const handleComplete = () => {
  //   const newCompleted = completed;
  //   newCompleted[activeStep] = true;
  //   setCompleted(newCompleted);
  //   handleNext();
  // };

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

  return(
    // <AuthWrapper>
    <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
      <Stepper activeStep={activeStep} sx={stepStyle}>
        {steps.map((label, index) => (
          <Step key={label} completed={completed[index]}>
            {
              index < 2 ?
                (<StepButton onClick={handleStep(index)}>
                  {label}
                </StepButton>) :
                (<StepButton
                  sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
                  icon={<VisibilityIcon />}
                  onClick={handleStep(index)}
                >
                  {label}
                </StepButton>)
            }

          </Step>
        ))}
      </Stepper>
      {allStepsCompleted() ? (
        <React.Fragment>
          <Typography sx={{ mt: 2, mb: 1 }}>
            All steps completed - you&apos;re finished
          </Typography>
          <Stack direction="row" sx={{ pt: 2 }}>
            <Stack sx={{ flex: '1 1 auto' }} />
            <Button onClick={handleReset}>Reset</Button>
          </Stack>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <AuthWrapper>
            <CustomFormWizard updateValid={updateValid} step={activeStep} />
            {/* <CustomFormWizard step={activeStep} /> */}
          </AuthWrapper>
          <Stack direction="row" sx={{ pt: 2 }}>
            { activeStep === totalSteps() - 1 ? (
              <Button
                color="inherit"
                disabled={true}
                onClick={handleBack}
                sx={{ mr: 1 }}
              >
                返回
              </Button>
            ):(
              <Button
                color="inherit"
                disabled={activeStep === 0}
                onClick={handleBack}
                sx={{ mr: 1 }}
              >
                返回
              </Button>
            )
            }
            <Stack sx={{ flex: '1 1 auto' }} />
            {activeStep === totalSteps() - 2 ? 
              (
                <Button onClick={handleNext} sx={{ mr: 1 }}>
                  完成
                </Button>
              ) : ( activeStep === totalSteps() - 1 ?
                (
                  <Button color="inherit"
                    disabled={true} sx={{ mr: 1 }}>
                    完成
                  </Button>
                ):
                (
                  <Button disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
                    繼續
                  </Button>
                )
              )}
            {/* {activeStep !== steps.length &&
              (completed[activeStep] ? (
                <Typography variant="caption" sx={{ display: 'inline-block' }}>
                  Step {activeStep + 1} already completed
                </Typography>
              ) : (
                <Button onClick={handleComplete}>
                  {completedSteps() === totalSteps() - 1
                    ? 'Finish'
                    : 'Complete Step'}
                </Button>
              ))} */}
          </Stack>
        </React.Fragment>
      )}
    </Stack >
    // </AuthWrapper>
  );
};

export default Register;
