import { ActionsMenu } from '@/components/ActionsMenu';
import { MainCard } from '@/components/MainCard';
import { Toolbar } from '@/components/ra-forms/Toolbar';
import { useResourceTitle } from '@/hooks';
import { Box, useTheme } from '@mui/material';
import { styled } from '@mui/system';
import { PropsWithChildren } from 'react';
import { TabbedForm as RaTabbedForm, TabbedFormProps as RaTabbedFormProps, SaveButton, TabProps } from 'react-admin';
import { DeleteWithConfirmButton } from '@/components/ra-buttons';

type StackTabProps = TabProps & PropsWithChildren<Record<string, never>>;

const StyledTabbedForm = styled(RaTabbedForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
  '& .MuiGrid-root.MuiGrid-container': {
    paddingBottom: 0
  } as any,
  [theme.breakpoints.down('sm')]: {
    paddingBottom: 0,
    '& .MuiTableContainer-root': {
      paddingBottom: theme.spacing(1)
    }
  }
}));

type TabbedFormWithNoPaddingProps = PropsWithChildren<Record<string, never>>;
function TabbedFormWithNoPadding({ children }: TabbedFormWithNoPaddingProps): JSX.Element {
  return <>{children}</>;
}

function TabbedForm(props: TabbedFormProps): JSX.Element {
  const {
    title: _title,
    modal,
    content,
    subheader,
    secondary = (
      <ActionsMenu>
        <DeleteWithConfirmButton />
      </ActionsMenu>
    ),
    sx,
    noPadding,
    toolbar = (
      <Toolbar>
        <SaveButton type="button" />
      </Toolbar>
    ),
    ...rest
  } = props;
  const title = useResourceTitle(_title);
  const theme = useTheme();

  return (
    <MainCard
      title={title}
      modal={modal}
      content={content}
      subheader={subheader}
      secondary={secondary}
      sx={{
        ...sx,
        '& .MuiTabs-root': {
          m: 2.5,
          mb: 0
        },
        '& .tabbed-form > .MuiDivider-root': {
          ml: 2.5,
          mr: 2.5
        },
        '& .MuiToolbar-root.RaToolbar-desktopToolbar': {
          paddingTop: modal ? theme.spacing(2.5) : 0
        },
        '& .MuiToolbar-root': {
          padding: theme.spacing(2.5),
          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined
        }
      }}
      border={!modal}
      divider
    >
      {/** @ts-ignore */}
      <StyledTabbedForm toolbar={toolbar} component={noPadding ? TabbedFormWithNoPadding : undefined} {...rest} />
    </MainCard>
  );
}
type TabbedFormProps = RaTabbedFormProps & {
  modal?: boolean;
  content?: boolean;
  subheader?: string | React.ReactNode;
  title?: string | React.ReactNode | boolean;
  secondary?: string | React.ReactNode;
  /**
   * Indicates if the form should have no padding.
   * If true, the form will have no padding and you will be **responsible** for adding padding to the form's tabs.
   */
  noPadding?: boolean;
};

/**
 * Useful when you have tabbed form with noPadding and you want to add padding to the tabs.
 * This component render inside a TabbedForm with noPadding and add padding to the tabs.
 */
function TabStack({ children, ...props }: StackTabProps): JSX.Element {
  return (
    <RaTabbedForm.Tab {...props}>
      <Box sx={{ width: '100%', p: 2.5 }}>{children}</Box>
    </RaTabbedForm.Tab>
  );
}

TabbedForm.Tab = RaTabbedForm.Tab;
TabbedForm.TabStack = TabStack;

export { TabbedForm };
export type { TabbedFormProps };