import { Children, ReactElement, ReactNode, useState } from 'react';
import { Theme, styled, useMediaQuery } from '@mui/material';
import { FormProps, Form as RaForm } from 'react-admin';
import { Provider } from './Provider';
import { Content } from './Content';

type WizardFormProps = FormProps & {
  toolbar?: ReactElement;
  progress?: ReactElement;
  title?: ReactNode | string;
  subheader?: ReactNode | string;
  secondary?: ReactNode | string;
  sx?: any;
  modal?: boolean;
};

const StyledForm = styled(RaForm, {
  shouldForwardProp: (prop) => prop !== 'modal'
})<{ modal: boolean }>(({ theme, modal }) => ({
  [theme.breakpoints.down('sm')]: !modal
    ? {
        paddingBottom: `${theme.spacing(2.5)}`
      }
    : {}
}));

/**
 * Form component for handling wizard-style forms with multiple steps.
 *
 * @param {object} props - The properties object.
 * @param {React.ReactNode} props.children - The child components representing each step of the wizard.
 * @param {React.ReactNode} props.toolbar - The toolbar component to be displayed.
 * @param {React.ReactNode} props.progress - The progress indicator component.
 * @param {string} props.title - The title of the form.
 * @param {string | null} [props.subheader=null] - The subheader text of the form.
 * @param {React.ReactNode | null} [props.secondary=null] - The secondary content of the form.
 * @param {object} props.sx - The style object for custom styling.
 * @param {boolean} [props.modal=false] - Flag indicating if the form is displayed in a modal.
 * @param {object} props.rest - Additional properties passed to the form.
 *
 * @returns {JSX.Element | null} The rendered form component.
 */
function Form({
  children,
  toolbar,
  progress,
  title,
  subheader = null,
  secondary = null,
  sx,
  modal = false,
  ...props
}: WizardFormProps): JSX.Element | null {
  const [currentStep, setCurrentStep] = useState(0);
  const steps = Children.toArray(children) as Array<ReactElement>;
  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));

  function hasNextStep(): boolean {
    return currentStep < steps.length - 1;
  }
  function hasPreviousStep(): boolean {
    return currentStep > 0;
  }

  function goToNextStep(): void {
    setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1));
  }

  function goToPreviousStep(): void {
    setCurrentStep((prev) => Math.max(prev - 1, 0));
  }

  const wizardFormContextValue = {
    currentStep,
    steps,
    hasNextStep,
    hasPreviousStep,
    goToNextStep,
    goToPreviousStep
  };

  return (
    <Provider value={wizardFormContextValue}>
      <StyledForm {...props} modal={modal}>
        <Content
          title={title}
          subheader={subheader}
          secondary={secondary}
          modal={modal}
          sx={sx}
          toolbar={toolbar}
          progress={progress}
          isSmall={isSmall}
          setCurrentStep={setCurrentStep}
        />
      </StyledForm>
    </Provider>
  );
}

function Step({ children }: { children: ReactNode; label: string; icon?: ReactNode; sources?: Array<string> }) {
  return <>{children}</>;
}

Form.Step = Step;

export { Form };