import { CreateInDialogButton } from '@/components';
import { ContainerOutlined, CreditCardOutlined, UserOutlined } from '@ant-design/icons';
import {
  BooleanInput,
  Create,
  ReadonlyField,
  TextInput,
  WizardForm,
  required,
  useThemeConfig
} from '@applica-software-guru/react-admin';
import { Box, Grid, Typography } from '@mui/material';

function BaseUsage() {
  const { spacing } = useThemeConfig();
  return (
    //<CreateInDialogButton maxWidth="sm" resource="a">
    <WizardForm>
      <WizardForm.Step label="Indirizzo di spedizione" icon={<UserOutlined />}>
        <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" icon={<CreditCardOutlined />}>
        <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" icon={<ContainerOutlined />}>
        <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>
    //</CreateInDialogButton>
  );
}

export { BaseUsage };