import { useThemeConfig } from '@/components/Layout/ThemeProvider';
import { MainCard } from '@/components/MainCard';
import { Toolbar } from '@/components/ra-forms/Toolbar';
import { Grid, GridProps } from '@mui/material';
import { styled } from '@mui/material/styles';
import React, { PropsWithChildren, useMemo } from 'react';
import { Form, SaveButton, useResourceContext, useTranslate } from 'react-admin';

/**
 * Basic card form layout.
 * It is a simple form layout that uses a card as the main container.
 *
 * @see https://mui.com/material-ui/react-stack/
 */
function CardForm({ children, spacing, defaultValues, ...gridProps }: CardFormProps): JSX.Element {
  const { spacing: themeSpacing } = useThemeConfig();
  return (
    // @ts-ignore
    <StyledForm defaultValues={defaultValues} spacing={spacing || themeSpacing}>
      <Grid container {...gridProps} spacing={spacing || themeSpacing}>
        {children}
      </Grid>
    </StyledForm>
  );
}

function Section({
  children,
  // @ts-ignore
  content = true,
  title,
  subheader = null,
  secondary = null,
  toolbar = false,
  lg = 12,
  md = 12,
  sm = 12,
  xs = 12,
  ...gridProps
}: SectionProps): JSX.Element {
  const translate = useTranslate();
  const resource = useResourceContext();
  const { cardTitle, cardSubheader } = useMemo(() => {
    const defaultTitle = (title || `resources.${resource}.title`) as string;
    return {
      cardTitle: translate(defaultTitle, { _: defaultTitle }),
      cardSubheader: subheader !== null ? translate(subheader as string, { _: subheader }) : null
    };
  }, [resource, subheader, title, translate]);
  return (
    <Grid item {...gridProps} lg={lg} md={md} sm={sm} xs={xs}>
      <MainCard content={content} title={cardTitle} subheader={cardSubheader} secondary={secondary} divider>
        <>
          {children}
          {toolbar === true ? (
            <Toolbar>
              <SaveButton />
            </Toolbar>
          ) : (
            toolbar
          )}
        </>
      </MainCard>
    </Grid>
  );
}

type StyledFormProps = PropsWithChildren<{
  spacing?: number;
  defaultValues?: any;
  theme: any;
}>;

const StyledForm = styled(Form, { slot: 'root' })(({ theme, spacing }: StyledFormProps) => ({
  backgroundColor: 'transparent',
  '& .RaToolbar-desktopToolbar': {
    marginTop: theme.spacing((spacing as number) * 1.25),
    padding: 0,
    minHeight: 'unset'
  },
  '& .RaToolbar-mobileToolbar': {
    paddingTop: `${theme.spacing(2.5)} !important`,
    paddingRight: '0 !important',
    paddingLeft: '0 !important',
    paddingBottom: '0 !important'
  }
}));

type CardFormProps = PropsWithChildren<{
  spacing?: number;
  defaultValues?: any;
}> &
  GridProps;

type SectionProps = PropsWithChildren<{
  content?: boolean | undefined | null;
  title?: string | React.ReactNode | null;
  subheader?: string | React.ReactNode;
  secondary?: string | React.ReactNode;
  toolbar?: React.ReactNode | boolean;
}> &
  GridProps;

CardForm.Section = Section;

export { CardForm };
export type { CardFormProps, SectionProps };