// ** React Imports
import { Fragment, useState } from 'react';

// ** MUI Imports
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import Step from '@mui/material/Step';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Stepper from '@mui/material/Stepper';
import MenuItem from '@mui/material/MenuItem';
import StepLabel from '@mui/material/StepLabel';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import InputLabel from '@mui/material/InputLabel';
import CardContent from '@mui/material/CardContent';
import FormControl from '@mui/material/FormControl';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputAdornment from '@mui/material/InputAdornment';
import Select from '@mui/material/Select';
import RadioGroup from '@mui/material/RadioGroup'
import Radio, { RadioProps } from '@mui/material/Radio'
import FormControlLabel from '@mui/material/FormControlLabel'


// ** Icons Imports
import EyeOutline from 'mdi-material-ui/EyeOutline';
import EyeOffOutline from 'mdi-material-ui/EyeOffOutline';

// ** Custom Components Imports
import StepperCustomDot from 'src/views/forms/form-wizard/StepperCustomDot';

// ** Third Party Imports
import toast from 'react-hot-toast';

// ** Styled Component
import StepperWrapper from 'src/@core/styles/mui/stepper';
import { set } from 'nprogress';
import Translations from 'src/layouts/components/Translations';

const steps = [
  {
    title: <Translations text='select.view' />,
    subtitle: '',
  },
  {
    title: <Translations text='general.fieldType' />,
    subtitle: '',
  },
  {
    title: <Translations text='add.field' />,
    subtitle: '',
  },
];

const customFields = [
  { description: '', label: '', type: '' },
];

const FormCustomFields = () => {
  // ** States
  const [email, setEmail] = useState('');
  const [google, setGoogle] = useState('');
  const [country, setCountry] = useState('');
  const [twitter, setTwitter] = useState('');
  const [username, setUsername] = useState('');
  const [lastName, setLastName] = useState('');
  const [facebook, setFacebook] = useState('');
  const [linkedIn, setLinkedIn] = useState('');
  const [firstName, setFirstName] = useState('');
  const [activeStep, setActiveStep] = useState(0);
  const [customFieldType, setCustomFieldType] = useState('');
  const [customFieldLabel, setCustomFieldLabel] = useState('');
  const [customFieldDescription, setCustomFieldDescription] = useState('');
  const [language, setLanguage] = useState([]);

  const [state, setState] = useState({
    password: '',
    password2: '',
    showPassword: false,
    showPassword2: false,
  });

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

  const handleNext = () => {
    setActiveStep(prevActiveStep => prevActiveStep + 1);
    if (activeStep === steps.length - 1) {
      toast.success('Form Submitted');
    }
  };

  const handleReset = () => {
    setEmail('');
    setGoogle('');
    setCountry('');
    setTwitter('');
    setUsername('');
    setLastName('');
    setFacebook('');
    setLinkedIn('');
    setLanguage([]);
    setFirstName('');
    setActiveStep(0);
    setState({ ...state, password: '', password2: '' });
  };

  // Handle Password
  const handlePasswordChange = prop => event => {
    setState({ ...state, [prop]: event.target.value });
  };

  const handleClickShowPassword = () => {
    setState({ ...state, showPassword: !state.showPassword });
  };

  const handleMouseDownPassword = event => {
    event.preventDefault();
  };

  // Handle Confirm Password
  const handleConfirmChange = prop => event => {
    setState({ ...state, [prop]: event.target.value });
  };

  const handleClickShowConfirmPassword = () => {
    setState({ ...state, showPassword2: !state.showPassword2 });
  };

  const handleMouseDownConfirmPassword = event => {
    event.preventDefault();
  };

  // Handle Language
  const handleSelectChange = event => {
    setLanguage(event.target.value);
  };

  const getStepContent = step => {
    switch (step) {
      case 0:
        return (
          <Fragment>
            <Grid item xs={12} >
              <RadioGroup row defaultValue='view' aria-label='View' name='customized-radios'>
                <FormControlLabel value='User' control={<Radio />} label={<Translations text='general.user' />} />
                <FormControlLabel value='Contact' control={<Radio />} label={<Translations text='general.contact' />} />
                <FormControlLabel value='Companies' control={<Radio />} label={<Translations text='general.companies' />} />
                <FormControlLabel value='Task' control={<Radio />} label={<Translations text='general.task' />} />
              </RadioGroup>
            </Grid>
          </Fragment>
        );
      case 1:
        return (
          <Fragment key={step}>
        
            <Grid item xs={12} sm={8}>
              <FormControl fullWidth>
                <InputLabel id='stepper-alternative-personal-select-label'> <Translations text='add.new' /> </InputLabel>
                <Select
                  label={<Translations text='add.new' />}
                  value={customFieldType}
                  id='stepper-alternative-personal-select'
                  onChange={e => setCustomFieldType(e.target.value)}
                  labelId='stepper-alternative-personal-select-label'
                >
                  <MenuItem value='TextField'><Translations text='fields.textField' /> </MenuItem>  
                  <MenuItem value='Date'><Translations text='fields.dateField' /> </MenuItem>
                  <MenuItem value='List'><Translations text='fields.listField' /> </MenuItem>
                  <MenuItem value='chec-bpx'><Translations text='fields.checkBoxField' /> </MenuItem>
                  <MenuItem value='number'><Translations text='fields.numberField' /> </MenuItem>
                  <MenuItem value='link'><Translations text='fields.generated Link' /> </MenuItem>
                </Select>
              </FormControl>
            </Grid> 
          </Fragment>
        );
      case 2:
        if (customFieldType === 'TextField') {
          return (
            <Fragment key={step}>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  id='stepper-alternative-first-name'
                  label={<Translations text='general.label' />}
                  value={customFieldLabel}
                  onChange={e => setCustomFieldLabel(e.target.value)}
                  variant='outlined'
                  placeholder={customFieldType}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  id='stepper-alternative-last-name'
                  label={<Translations text='general.description' />}
                  value={customFieldDescription}
                  onChange={e => setCustomFieldDescription(e.target.value)}
                  variant='outlined'
                />
              </Grid>
            </Fragment>
          );}
          if (customFieldType === 'Date') {
            return (
              <Fragment key={step}>
                <Grid item xs={12} sm={6}>
                  <TextField
                    fullWidth
                    id='stepper-alternative-first-name'
                    label={<Translations text='general.label' />}
                    value={customFieldLabel}
                    onChange={e => setCustomFieldLabel(e.target.value)}
                    variant='outlined'
                    placeholder={customFieldType}
                  />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <TextField
                    fullWidth
                    id='stepper-alternative-last-name'
                    label={<Translations text='general.description' />}
                    value={customFieldDescription}
                    onChange={e => setCustomFieldDescription(e.target.value)}
                    variant='outlined'
                  />
                </Grid>
              </Fragment>
            );}
            if (customFieldType === 'List') {
              return (
                <Fragment key={step}>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      fullWidth
                      id='stepper-alternative-first-name'
                      label={<Translations text='general.label' />}
                      value={customFieldLabel}
                      onChange={e => setCustomFieldLabel(e.target.value)}
                      variant='outlined'
                      placeholder={customFieldType}
                    />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      fullWidth
                      id='stepper-alternative-last-name'
                      label={<Translations text='general.description' />}
                      value={customFieldDescription}
                      onChange={e => setCustomFieldDescription(e.target.value)}
                      variant='outlined'
                    />
                  </Grid>
                </Fragment>
              );}
              if (customFieldType === 'chec-bpx') {
                return (
                  <Fragment key={step}>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        fullWidth
                        id='stepper-alternative-first-name'
                        label={<Translations text='general.label' />}
                        value={customFieldLabel}
                        onChange={e => setCustomFieldLabel(e.target.value)}
                        variant='outlined'
                        placeholder={customFieldType}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        fullWidth
                        id='stepper-alternative-last-name'
                        label={<Translations text='general.description' />}
                        value={customFieldDescription}
                        onChange={e => setCustomFieldDescription(e.target.value)}
                        variant='outlined'
                      />
                    </Grid>
                  </Fragment>
                );}
                if (customFieldType === 'number') {
                  return (
                    <Fragment key={step}>
                      <Grid item xs={12} sm={6}>
                        <TextField
                          fullWidth
                          id='stepper-alternative-first-name'
                          label={<Translations text='general.label' />}
                          value={customFieldLabel}
                          onChange={e => setCustomFieldLabel(e.target.value)}
                          variant='outlined'
                          placeholder={customFieldType}
                        />
                      </Grid>
                      <Grid item xs={12} sm={6}>
                        <TextField
                          fullWidth
                          id='stepper-alternative-last-name'
                          label={<Translations text='general.description' />}
                          value={customFieldDescription}
                          onChange={e => setCustomFieldDescription(e.target.value)}
                          variant='outlined'
                        />
                      </Grid>
                    </Fragment>
                  );}    
                  if (customFieldType === 'link') {
                    return (
                      <Fragment key={step}>
                        <Grid item xs={12} sm={6}>
                          <TextField
                            fullWidth
                            id='stepper-alternative-first-name'
                            label={<Translations text='general.label' />}
                            value={customFieldLabel}
                            onChange={e => setCustomFieldLabel(e.target.value)}
                            variant='outlined'
                            placeholder={customFieldType}
                          />
                        </Grid>
                        <Grid item xs={12} sm={6}>
                          <TextField
                            fullWidth
                            id='stepper-alternative-last-name'
                            label={<Translations text='general.description' />}
                            value={customFieldDescription}
                            onChange={e => setCustomFieldDescription(e.target.value)}
                            variant='outlined'
                          />
                        </Grid>
                      </Fragment>
                    );
                    }else{
          return (
            <Fragment key={step}>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label={<Translations text='general.label' />}
                  onChange={e => setTwitter(e.target.value)}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label={<Translations text='general.description' />}
                  onChange={e => setFacebook(e.target.value)}
                />
              </Grid>
            </Fragment>
          );
        }
      default:
        return 'Unknown Step';
    }
  };

  const renderContent = () => {
    if (activeStep === steps.length) {
      return (
        <Fragment>
          <Typography> <Translations text='general.stepsCompleted' /> </Typography>
          <Box sx={{ marginTop: 4, display: 'flex', justifyContent: 'flex-end' }}>
            <Button size='large' variant='contained' onClick={handleReset}>
              <Translations text='general.reset' />
            </Button>
          </Box>
        </Fragment>
      );
    } else {
      return (
        <form onSubmit={e => e.preventDefault()}>
          <Grid container spacing={5}>
            <Grid item xs={12}>
              <Typography variant='body2' sx={{ fontWeight: 600, color: 'text.primary' }}>
                {steps[activeStep].title}
              </Typography>
              <Typography variant='caption' component='p'>
                {steps[activeStep].subtitle}
              </Typography>
            </Grid>
            {getStepContent(activeStep)}
            <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Button
                size='large'
                variant='outlined'
                color='secondary'
                disabled={activeStep === 0}
                onClick={handleBack}
              >
                <Translations text='general.back' />
              </Button>
              <Button size='large' variant='contained' onClick={handleNext}>
                {activeStep === steps.length - 1 ? 'Submit' : 'Next'}
              </Button>
            </Grid>
          </Grid>
        </form>
      );
    }
  };

  return (
    <Fragment>
      <StepperWrapper>
        <Stepper activeStep={activeStep} alternativeLabel>
          {steps.map((step, index) => {
            return (
              <Step key={index}>
                <StepLabel StepIconComponent={StepperCustomDot}>
                  <div className='step-label'>
                    <div>
                      <Typography className='step-title'>{step.title}</Typography>
                      <Typography className='step-subtitle'>{step.subtitle}</Typography>
                    </div>
                  </div>
                </StepLabel>
              </Step>
            );
          })}
        </Stepper>
      </StepperWrapper>
      <Card sx={{ marginTop: 4 }}>
        <CardContent>{renderContent()}</CardContent>
      </Card>
    </Fragment>
  );
};

export default FormCustomFields;