import React, { ReactElement, JSXElementConstructor } from 'react';
import Box from '@mui/material/Box';
import { SxProps, Theme } from '@mui/material';
import { ChatSubmitQueryInterface } from './ChatQuery';
import { SetSnackType } from './Snack';

interface BackstoryElementProps {
  sessionId: string,
  setSnack: SetSnackType,
  submitQuery: ChatSubmitQueryInterface,
  sx?: SxProps<Theme>,
}

interface BackstoryPageProps extends BackstoryElementProps {
  route?: string,
  setRoute?: (route: string) => void,
};

interface BackstoryTabProps {
  label?: string,
  path: string,
  children?: ReactElement<BackstoryPageProps>,
  active?: boolean,
  className?: string,
  tabProps?: {
    label?: string,
    sx?: SxProps,
    icon?: string | ReactElement<unknown, string | JSXElementConstructor<any>> | undefined,
    iconPosition?: "bottom" | "top" | "start" | "end" | undefined
  }
};

function BackstoryPage(props: BackstoryTabProps) {
  const { className, active, children } = props;

  return (
    <Box
      className={ className || "BackstoryTab"}
      sx={{ "display": active ? "flex" : "none", p: 0, m: 0, borders: "none" }}
    >
      {children}
    </Box>
  );
}

export type {
  BackstoryPageProps,
  BackstoryTabProps,
  BackstoryElementProps,
};

export {
  BackstoryPage
}