import {
  BooleanInput,
  ReadonlyField,
  TextInput,
  Toolbar,
  WizardForm,
  required,
  useThemeConfig,
  useTranslate,
  useWizardFormContext
} from '@applica-software-guru/react-admin';
import { Box, Button, Grid, Step, StepLabel, Stepper, Typography } from '@mui/material';
import { SaveButton } from 'ra-ui-materialui';
import { useFormContext } from 'react-hook-form';

//il seguente form non avrà uno stile coerente, ma è solo per testare il funzionamento del WizardForm

function CustomToolbar({ ...props }) {
  const { hasNextStep, hasPreviousStep, goToNextStep, goToPreviousStep } = useWizardFormContext();
  const translate = useTranslate();
  const { handleSubmit } = useFormContext();

  const handleNext = handleSubmit(() => {
    goToNextStep();
  });

  return (
    <Toolbar {...props}>
      {hasPreviousStep() && (
        <Button variant="text" color="primary" onClick={goToPreviousStep}>
          {translate('ra.action.back')}
        </Button>
      )}
      {hasNextStep() ? (
        <>
          <Button variant="contained" color="primary" onClick={goToNextStep}>
            Skip
          </Button>
          <Button variant="contained" color="primary" onClick={handleNext}>
            {translate('ra.action.next')}
          </Button>
        </>
      ) : (
        <SaveButton />
      )}
    </Toolbar>
  );
}

function CustomProgress() {
  const { steps, currentStep } = useWizardFormContext();
  return (
    <Stepper activeStep={currentStep} orientation="vertical">
      {steps.map((step, index) => (
        <Step key={index}>
          <StepLabel>{step.props.label}</StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

function AdvancedUsage() {
  const { spacing } = useThemeConfig();
  return (
    <WizardForm
      defaultValues={{ name: 'Mario', surname: 'Rossi' }}
      toolbar={<CustomToolbar />}
      progress={<CustomProgress />}
      title="Conferma ordine"
      validate={(values) => {
        const errors = {};
        if (values.terms !== true) {
          errors.terms = 'Devi accettare i termini e le condizioni';
        }
        return errors;
      }}
      secondary="Ordine #1"
      subheader="Wizard Form"
    >
      <WizardForm.Step label="Indirizzo di spedizione">
        <Grid container spacing={spacing}>
          <Grid item xs={6}>
            <TextInput source="name" label="Nome" validate={required()} fullWidth />
          </Grid>
          <Grid item xs={6}>
            <TextInput source="surname" label="Cognome" validate={required()} fullWidth />
          </Grid>
          <Grid item xs={12}>
            <TextInput source="address" label="Indirizzo" fullWidth />
          </Grid>
          <Grid item xs={6}>
            <TextInput source="nation" label="Nazione" fullWidth />
          </Grid>
          <Grid item xs={6}>
            <TextInput source="province" label="Provincia" fullWidth />
          </Grid>
          <Grid item xs={6}>
            <TextInput source="city" label="Città" fullWidth />
          </Grid>
          <Grid item xs={6}>
            <TextInput source="zip" label="Codice Postale" fullWidth />
          </Grid>
        </Grid>
      </WizardForm.Step>
      <WizardForm.Step label="Dati di fatturazione">
        <Grid container spacing={spacing}>
          <Grid item xs={6}>
            <TextInput source="billingName" label="Nome sulla carta" validate={required()} fullWidth />
          </Grid>
          <Grid item xs={6}>
            <TextInput source="cardNumber" label="Numero carta" validate={required()} fullWidth />
          </Grid>
          <Grid item xs={12}>
            <TextInput source="expirationDate" label="Data di scadenza" fullWidth />
          </Grid>
          <Grid item xs={12}>
            <TextInput source="cvv" label="CVV" fullWidth />
          </Grid>
        </Grid>
      </WizardForm.Step>
      <WizardForm.Step label="Controlla il tuo ordine">
        <Grid container spacing={spacing}>
          <Grid item xs={12}>
            <Box display="flex" justifyContent="space-between">
              <Box>
                <Typography variant="h6">Prodotto 1</Typography>
                <Typography variant="body2">Descrizione del prodotto 1</Typography>
              </Box>
              <Typography variant="body2" align="right">
                €100.00
              </Typography>
            </Box>
          </Grid>
          <Grid item xs={12}>
            <Box display="flex" justifyContent="space-between">
              <Box>
                <Typography variant="h6">Prodotto 2</Typography>
                <Typography variant="body2">Descrizione del prodotto 2</Typography>
              </Box>
              <Typography variant="body2" align="right">
                €42.00
              </Typography>
            </Box>
          </Grid>
          <Grid item xs={12}>
            <Box display="flex" justifyContent="space-between">
              <Box>
                <Typography variant="h6">Prodotto 3</Typography>
                <Typography variant="body2">Descrizione del prodotto 3</Typography>
              </Box>
              <Typography variant="body2" align="right">
                €37.00
              </Typography>
            </Box>
          </Grid>
          <Grid item xs={12}>
            <Box display="flex" justifyContent="space-between">
              <Box>
                <Typography variant="h6">Totale</Typography>
              </Box>
              <Typography variant="h6" align="right">
                €179.00
              </Typography>
            </Box>
          </Grid>
          <Grid item xs={12}>
            <BooleanInput source="terms" label="Accetto i termini e le condizioni" />
          </Grid>
        </Grid>
      </WizardForm.Step>
    </WizardForm>
  );
}

export { AdvancedUsage };