import { FormTextField, FormDateField, FormMaskField, FormSwitch } from 'form-input-fields';

import { Formik, Field } from 'formik';
import { FormTextField } from 'form-fields';

<Formik
  initialValues={{ username: '' }}
  onSubmit={(values) => console.log(values)}
>
  <Field
    component={FormTextField}
    name="username"
    label="Username"
    placeholder="Enter your username"
  />
</Formik>

<Field
  component={FormTextField}
  name="username"
  label="Username"
  placeholder="Enter your username"
  fullWidth
  margin="normal"
/>

<Formik
  initialValues={{ email: '' }}
  validate={values => {
    const errors = {};
    if (!values.email) {
      errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
      errors.email = 'Invalid email address';
    }
    return errors;
  }}
  onSubmit={(values) => console.log(values)}
>
  {({ errors, touched }) => (
    <Field
      component={FormTextField}
      name="email"
      label="Email"
      type="email"
      error={touched.email && Boolean(errors.email)}
      helperText={touched.email && errors.email}
      required
    />
  )}
</Formik>

<Field
  component={FormTextField}
  name="password"
  label="Password"
  type="password"
  inputProps={{
    minLength: 8,
    pattern: "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  }}
  helperText="Must contain at least 8 characters, including uppercase, lowercase, and numbers"
  required
/>

import { Formik, Field } from 'formik';
import { FormDropDownField } from 'form-input-fields';

const items = [
  { id: '1', description: 'Option 1' },
  { id: '2', description: 'Option 2' },
  { id: '3', description: 'Option 3' },
];

<Formik
  initialValues={{ category: '' }}
  onSubmit={(values) => console.log(values)}
>
  <Field
    component={FormDropDownField}
    name="category"
    label="Category"
    items={items}
    addInputSelect={true}
  />
</Formik>

const items = [
  { id: 'us', description: 'United States' },
  { id: 'ca', description: 'Canada' },
  { id: 'uk', description: 'United Kingdom' },
];

<Field
  component={FormDropDownField}
  name="country"
  label="Country"
  items={items}
  fullWidth
/>

<Field
  component={FormDropDownField}
  name="category"
  label="Category"
  items={categories}
  addInputSelect={true}
  selectText="Select a category"
  helperText="Please select a category from the list"
/>

<Formik
  initialValues={{ department: '' }}
  validationSchema={Yup.object({
    department: Yup.string().required('Department is required'),
  })}
  onSubmit={(values) => console.log(values)}
>
  {({ errors, touched }) => (
    <Form>
      <Field
        component={FormDropDownField}
        name="department"
        label="Department"
        items={departments}
        addInputSelect={true}
        required
        error={touched.department && Boolean(errors.department)}
        helperText={touched.department && errors.department}
      />
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </Form>
  )}
</Formik>

import {
  FORM_DATE_FORMAT,
  DATE_PICKER_DATE_FORMAT,
  DATE_PICKER_MONTH_YEAR_FORMAT
} from "form-input-mask-field/date";

// Use predefined formats
<Field
  component={FormDateField}
  name="birthDate"
  format={FORM_DATE_FORMAT.short}  // 'YYYY-MM-DD'
/>

// Or use custom format
<Field
  component={FormDateField}
  name="eventDate"
  format="DD/MM/YYYY HH:mm"  // Custom format
/>

import { Formik, Field } from "formik";
import { FormDateField, FormDateFieldProps } from "form-input-mask-field";
import { FORM_DATE_FORMAT } from "form-input-mask-field/date";
import dayjs from "dayjs";

<Formik
  initialValues={{ birthDate: null, appointmentDate: null }}
  onSubmit={(values) => console.log(values)}
>
  {/* Basic usage */}
  <Field
    component={FormDateField}
    name="birthDate"
    label="Birth Date"
    format={FORM_DATE_FORMAT.short}
  />

  {/* Advanced usage with validation */}
  <Field
    component={FormDateField}
    name="appointmentDate"
    label="Appointment Date"
    format="DD/MM/YYYY"
    minDate={dayjs()}
    disablePast={true}
    showTodayButton={true}
    showDateFormat={true}
    onChange={(value, context) => {
      console.log("Selected date:", value);
      console.log("Formatted value:", context.formattedValue);
    }}
  />
</Formik>;

<Field
  component={FormDateField}
  name="birthDate"
  label="Birth Date"
  format="DD/MM/YYYY"
/>

<Field
  component={FormDateField}
  name="startDate"
  label="Start Date"
  minDate={dayjs()}
  disablePast={true}
  showDateFormat={true}
  helperText="Select a future date"
/>

<Field
  component={FormDateField}
  name="appointmentDate"
  label="Appointment Date"
  format="DD MMMM YYYY"
  minDate={dayjs().add(1, "day")}
  maxDate={dayjs().add(3, "month")}
  showTodayButton={true}
  showDateFormat={true}
/>

<Field
  component={FormDateField}
  name="createdDate"
  label="Created Date"
  format="DD/MM/YYYY HH:mm"
  readOnly={true}
/>

<Field
  component={FormDateField}
  name="eventDate"
  label="Event Date"
  format="YYYY-MM-DD"
  onChange={(value, context) => {
    console.log("Selected date:", value);
    console.log("Formatted value:", context.formattedValue);
    console.log("Validation error:", context.validationError);

    // Custom logic here
    if (value && value.day() === 0) {
      alert("Events cannot be scheduled on Sundays");
    }
  }}
/>

<Field
  component={FormDateField}
  name="startDate"
  label="Start Date"
  format="DD/MM/YYYY"
  maxDate={values.endDate ? dayjs(values.endDate) : undefined}
/>

<Field
  component={FormDateField}
  name="endDate"
  label="End Date"
  format="DD/MM/YYYY"
  minDate={values.startDate ? dayjs(values.startDate) : undefined}
/>

import { Formik, Field } from 'formik';
import { FormCheckboxField } from 'form-input-mask-field';

// Basic usage
<FormCheckboxField
  id="terms"
  label="I agree to the terms and conditions"
  checked={false}
  onChange={(e) => console.log('Checked:', e.target.checked)}
/>

// With Formik
<Formik
  initialValues={{ termsAccepted: false }}
  onSubmit={(values) => console.log(values)}
>
  {({ values }) => (
    <Field
      name="termsAccepted"
      component={({ field, form }) => (
        <FormCheckboxField
          {...field}
          label="I agree to the terms and conditions"
          checked={field.value}
          onChange={(e) => {
            form.setFieldValue(field.name, e.target.checked);
          }}
        />
      )}
    />
  )}
</Formik>

<FormCheckboxField
  id="notifications"
  label="Enable email notifications"
  checked={notificationsEnabled}
  onChange={(e) => setNotificationsEnabled(e.target.checked)}
  color="secondary"
/>

<Formik
  initialValues={{
    termsAccepted: false,
    newsletter: true,
    notifications: false
  }}
  onSubmit={(values) => console.log('Form values:', values)}
>
  {({ values }) => (
    <Form>
      <Field
        name="termsAccepted"
        component={({ field, form }) => (
          <FormCheckboxField
            {...field}
            label="I agree to the terms and conditions"
            checked={field.value}
            onChange={(e) => form.setFieldValue(field.name, e.target.checked)}
            required
          />
        )}
      />
      
      <Field
        name="newsletter"
        component={({ field, form }) => (
          <FormCheckboxField
            {...field}
            label="Subscribe to newsletter"
            checked={field.value}
            onChange={(e) => form.setFieldValue(field.name, e.target.checked)}
            color="secondary"
          />
        )}
      />
      
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </Form>
  )}
</Formik>

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    margin: theme.spacing(1),
  },
  labelRoot: {
    color: theme.palette.primary.main,
    fontWeight: 500,
  },
}));

function CustomCheckbox() {
  const classes = useStyles();
  
  return (
    <FormCheckboxField
      id="custom-checkbox"
      label="Custom Styled Checkbox"
      checked={false}
      onChange={() => {}}
      classes={{
        root: classes.root,
        label: classes.labelRoot,
      }}
      color="primary"
    />
  );
}

import { Formik, Field } from 'formik';
import { FormSwitch } from 'form-input-fields';

// Basic usage
<FormSwitch
  label="Enable Notifications"
  checked={notificationsEnabled}
  onChange={(e, checked) => setNotificationsEnabled(checked)}
/>

// With Formik
<Formik
  initialValues={{ notifications: false }}
  onSubmit={(values) => console.log(values)}
>
  <Field
    component={FormSwitch}
    name="notifications"
    label="Enable Notifications"
    helperText="Receive email notifications"
  />
</Formik>

<FormSwitch
  label="Enable Dark Mode"
  checked={darkModeEnabled}
  onChange={(e, checked) => setDarkModeEnabled(checked)}
  color="secondary"
  size="small"
/>

<Formik
  initialValues={{
    notifications: false,
    darkMode: true,
    autoSave: false
  }}
  onSubmit={(values) => console.log('Form values:', values)}
>
  <Form>
    <Field
      component={FormSwitch}
      name="notifications"
      label="Enable Notifications"
      helperText="Receive email notifications"
      color="primary"
    />
    
    <Field
      component={FormSwitch}
      name="darkMode"
      label="Dark Mode"
      helperText="Use dark theme"
      color="secondary"
      labelPlacement="start"
    />
    
    <Field
      component={FormSwitch}
      name="autoSave"
      label="Auto Save"
      helperText="Automatically save changes"
      color="success"
      size="small"
    />
    
    <Button type="submit" variant="contained" color="primary">
      Save Settings
    </Button>
  </Form>
</Formik>

<FormSwitch
  label="Custom Styled Switch"
  checked={false}
  onChange={(e, checked) => console.log('Switch toggled:', checked)}
  className="custom-switch-class"
  color="warning"
  labelPlacement="top"
  helperText="This is a custom styled switch"
/>

<Field
  component={FormSwitch}
  name="advancedMode"
  label="Advanced Mode"
  onChange={(e, checked, context) => {
    console.log('Field name:', context.fieldName);
    console.log('Formik value:', context.formikValue);
    // Custom logic here
  }}
  helperText="Enable advanced features"
/>

<Formik
  initialValues={{ termsAccepted: false }}
  validate={(values) => {
    const errors = {};
    if (!values.termsAccepted) {
      errors.termsAccepted = 'You must accept the terms to continue';
    }
    return errors;
  }}
  onSubmit={(values) => console.log(values)}
>
  <Form>
    <Field
      component={FormSwitch}
      name="termsAccepted"
      label="I accept the terms and conditions"
      helperText="Please read and accept the terms"
      required
    />
    
    <Button type="submit" variant="contained" color="primary">
      Continue
    </Button>
  </Form>
</Formik>

import { Formik, Field } from 'formik';
import { FormDateTextField } from 'form-fields';

<Formik
  initialValues={{ eventDate: '' }}
  onSubmit={(values) => console.log(values)}
>
  <Field
    component={FormDateTextField}
    name="eventDate"
    label="Event Date"
    format="MM/DD/YYYY"
  />
</Formik>

<FormDateTextField
  name="birthDate"
  label="Birth Date"
  format="YYYY-MM-DD"
  helperText="Enter your date of birth"
  required
/>

import { Formik, Form, Field } from 'formik';
import { FormDateTextField, FormTextField } from 'form-fields';
import { Button } from '@mui/material';

const EventForm = () => (
  <Formik
    initialValues={{
      eventName: '',
      eventDate: '',
    }}
    onSubmit={(values) => {
      console.log('Form submitted:', values);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field
          name="eventName"
          label="Event Name"
          component={FormTextField}
          fullWidth
          margin="normal"
        />
        
        <Field
          component={FormDateTextField}
          name="eventDate"
          label="Event Date"
          format="MM/DD/YYYY"
          required
          helperText="Select the event date"
          margin="normal"
        />
        
        <Button
          type="submit"
          variant="contained"
          color="primary"
          disabled={isSubmitting}
        >
          Submit
        </Button>
      </Form>
    )}
  </Formik>
);

<FormDateTextField
  name="appointmentTime"
  label="Appointment Time"
  format="dddd, MMMM D, YYYY h:mm A"
  helperText="Example: Monday, January 1, 2023 2:30 PM"
  required
/>

<FormDateTextField
  name="purchaseDate"
  label="Purchase Date"
  value="2023-05-15"
  disabled
  helperText="This field cannot be modified"
/>

<FormDateTextField
  name="expiryDate"
  label="Expiry Date"
  error={!!errors.expiryDate && touched.expiryDate}
  helperText={touched.expiryDate && errors.expiryDate}
  format="MM/DD/YYYY"
  required
/>

import { Formik, Field } from "formik";
import { FormMaskField } from "form-input-mask-field";

<Formik
  initialValues={{ phoneNumber: "", gameCode: "" }}
  onSubmit={(values) => console.log(values)}
>
  <Field
    component={FormMaskField}
    name="phoneNumber"
    label="Phone Number"
    mask="(999) 999-9999"
    placeholder="Enter phone number"
  />

  <Field
    component={FormMaskField}
    name="gameCode"
    label="Game Code"
    mask="AAAAA"
    toUpperCase={true}
    returnCleanValue={true}
  />
</Formik>;

<Field
  component={FormMaskField}
  name="phone"
  label="Phone Number"
  mask="(999) 999-9999"
  placeholder="(555) 123-4567"
/>

<Field
  component={FormMaskField}
  name="date"
  label="Date"
  mask="99/99/9999"
  placeholder="MM/DD/YYYY"
/>

<Field
  component={FormMaskField}
  name="productCode"
  label="Product Code"
  mask="AAA-999-AAA"
  toUpperCase={true}
  returnCleanValue={true}
/>

<Field
  component={FormMaskField}
  name="creditCard"
  label="Credit Card"
  mask="9999 9999 9999 9999"
  placeholder="1234 5678 9012 3456"
/>

<Field
  component={FormMaskField}
  name="customField"
  label="Custom Field"
  mask="999-AAA"
  onChange={(event) => {
    console.log("Masked value:", event.target.value);
    console.log("Clean value:", event.target.cleanValue);
    console.log("Raw input:", event.target.rawValue);
  }}
/>

<Field
  component={FormMaskField}
  name="gameCode"
  label="Game Code"
  mask="AAA-999"
  showMaskPattern={true}
  toUpperCase={true}
/>
// This will show "Pattern: AAA-999" as helper text below the input

<Field
  component={FormMaskField}
  name="phoneNumber"
  label="Phone Number"
  mask="(999) 999-9999"
  showPlaceholder={true}
/>
// This will show "(___) ___-____" as placeholder text in the input field

import React from "react";
import { Formik, Form, Field, FormikHelpers, FormikErrors } from "formik";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { Grid } from "@mui/material";
import Paper from "@mui/material/Paper";
import Alert from "@mui/material/Alert";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { FormMaskField } from "form-input-mask-field";
import "./App.css";

interface FormValues {
  phone: string;
  date: string;
  creditCard: string;
  licensePlate: string;
  hexColor: string;
  customCode: string;
  socialSecurity: string;
  postalCode: string;
}

interface FormFieldEvent
  extends Omit<React.ChangeEvent<HTMLInputElement>, "target"> {
  target: HTMLInputElement & {
    value: string;
    cleanValue: string;
    rawValue: string;
    name: string;
  };
}

// Create a Material-UI theme
const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#dc004e",
    },
  },
});

// Validation schema
const validateForm = (values: FormValues): FormikErrors<FormValues> => {
  const errors: Partial<FormValues> = {};

  if (!values.phone) {
    errors.phone = "Phone number is required";
  } else if (values.phone.replace(/\D/g, "").length < 10) {
    errors.phone = "Phone number must be 10 digits";
  }

  if (!values.date) {
    errors.date = "Date is required";
  }

  if (!values.creditCard) {
    errors.creditCard = "Credit card is required";
  } else if (values.creditCard.replace(/\D/g, "").length < 16) {
    errors.creditCard = "Credit card must be 16 digits";
  }

  if (!values.licensePlate) {
    errors.licensePlate = "License plate is required";
  }

  return errors;
};

function App() {
  const initialValues: FormValues = {
    phone: "",
    date: "",
    creditCard: "",
    licensePlate: "",
    hexColor: "",
    customCode: "",
    socialSecurity: "",
    postalCode: "",
  };

  const handleSubmit = (
    values: FormValues,
    { setSubmitting }: FormikHelpers<FormValues>
  ) => {
    console.log("Form Values:", values);
    setTimeout(() => {
      alert("Form submitted! Check console for values.");
      setSubmitting(false);
    }, 400);
  };

  const handleCustomChange =
    (fieldName: keyof FormValues) => (event: FormFieldEvent) => {
      console.log(`${fieldName} changed:`, {
        masked: event.target.value,
        clean: event.target.cleanValue,
        raw: event.target.rawValue,
      });
      return event;
    };

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Container maxWidth="lg" sx={{ py: 4 }}>
        <Typography variant="h3" component="h1" gutterBottom align="center">
          FormMaskField Demo
        </Typography>

        <Typography
          variant="subtitle1"
          align="center"
          color="text.secondary"
          paragraph
        >
          A comprehensive example showcasing the FormMaskField component with
          various mask patterns and configurations
        </Typography>

        <Formik
          initialValues={initialValues}
          validate={validateForm}
          onSubmit={handleSubmit}
        >
          {({ values, isSubmitting, errors, touched }) => (
            <Form>
              <Grid container spacing={3}>
                {/* Basic Masks Section */}
                <Grid>
                  <Paper elevation={2} sx={{ p: 3 }}>
                    <Typography variant="h5" gutterBottom>
                      Basic Input Masks
                    </Typography>

                    <Grid container spacing={2}>
                      <Grid>
                        <Field
                          name="phone"
                          component={FormMaskField}
                          label="Phone Number"
                          mask="(999) 999-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="US phone number format"
                          onChange={handleCustomChange("phone")}
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="date"
                          component={FormMaskField}
                          label="Date"
                          mask="99/99/9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="MM/DD/YYYY format"
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="socialSecurity"
                          component={FormMaskField}
                          label="Social Security Number"
                          mask="999-99-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          returnCleanValue={true}
                          helperText="Clean value returned (no dashes)"
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="postalCode"
                          component={FormMaskField}
                          label="ZIP Code"
                          mask="99999-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="US ZIP+4 format"
                        />
                      </Grid>
                    </Grid>
                  </Paper>
                </Grid>

                {/* Advanced Masks Section */}
                <Grid>
                  <Paper elevation={2} sx={{ p: 3 }}>
                    <Typography variant="h5" gutterBottom>
                      Advanced Input Masks
                    </Typography>

                    <Grid container spacing={2}>
                      <Grid>
                        <Field
                          name="creditCard"
                          component={FormMaskField}
                          label="Credit Card Number"
                          mask="9999-9999-9999-9999"
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="16-digit credit card number"
                          onChange={handleCustomChange("creditCard")}
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="licensePlate"
                          component={FormMaskField}
                          label="License Plate"
                          mask="AAA-999"
                          toUpperCase={true}
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="3 letters + 3 numbers (auto uppercase)"
                          onChange={handleCustomChange("licensePlate")}
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="hexColor"
                          component={FormMaskField}
                          label="Hex Color Code"
                          mask="#######"
                          toUpperCase={true}
                          showMaskPattern={true}
                          showPlaceholder={true}
                          placeholderChar="0"
                          helperText="6-digit hex color code"
                        />
                      </Grid>

                      <Grid>
                        <Field
                          name="customCode"
                          component={FormMaskField}
                          label="Custom Code"
                          mask="**-999-AA"
                          toUpperCase={true}
                          returnCleanValue={true}
                          showMaskPattern={true}
                          showPlaceholder={true}
                          helperText="Alphanumeric + digits + letters"
                          onChange={handleCustomChange("customCode")}
                        />
                      </Grid>
                    </Grid>
                  </Paper>
                </Grid>

                {/* Current Values Display */}
                <Grid>
                  <Paper elevation={2} sx={{ p: 3 }}>
                    <Typography variant="h5" gutterBottom>
                      Current Form Values
                    </Typography>

                    <Box sx={{ mt: 2 }}>
                      <Typography
                        variant="body2"
                        component="pre"
                        sx={{
                          backgroundColor: "#f5f5f5",
                          p: 2,
                          borderRadius: 1,
                          overflow: "auto",
                          fontSize: "0.875rem",
                        }}
                      >
                        {JSON.stringify(values, null, 2)}
                      </Typography>
                    </Box>
                  </Paper>
                </Grid>

                {/* Form Errors Display */}
                {Object.keys(errors).length > 0 &&
                  Object.keys(touched).length > 0 && (
                    <Grid>
                      <Alert severity="error">
                        <Typography variant="h6" gutterBottom>
                          Form Validation Errors:
                        </Typography>
                        <ul>
                          {Object.entries(errors).map(
                            ([field, error]) =>
                              touched[field] && (
                                <li key={field}>
                                  <strong>{field}:</strong> {error}
                                </li>
                              )
                          )}
                        </ul>
                      </Alert>
                    </Grid>
                  )}

                {/* Submit Button */}
                <Grid>
                  <Box
                    sx={{ display: "flex", justifyContent: "center", mt: 2 }}
                  >
                    <Button
                      type="submit"
                      variant="contained"
                      size="large"
                      disabled={isSubmitting}
                      sx={{ minWidth: 200 }}
                    >
                      {isSubmitting ? "Submitting..." : "Submit Form"}
                    </Button>
                  </Box>
                </Grid>
              </Grid>
            </Form>
          )}
        </Formik>
      </Container>
    </ThemeProvider>
  );
}

export default App;