import React from "react";

import Backdrop from "@mui/material/Backdrop";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";

import Brand from "../components/Brand";
import Content from "../containers/Content";
import LoginForm from "../forms/LoginForm";
import { LogoType } from "../types";

export interface LoginPageProps {
  title?: string;
  logo?: LogoType;
  logoHeight?: number | string;
  form?: React.ElementType;
}

const StyledDialog = styled(Dialog, {
  name: "BananasLoginDialog",
  slot: "Root",
})(() => ({}));

const StyledDialogTitle = styled(DialogTitle, {
  name: "BananasLoginDialog",
  slot: "Title",
})(({ theme }) =>
  theme.unstable_sx({
    bgcolor: "primary.main",
    color: "primary.contrastText",
  }),
);

const StyledBackdrop = styled(Backdrop, {
  name: "BananasLoginDialog",
  slot: "Backdrop",
})(({ theme }) =>
  theme.unstable_sx({
    bgcolor: "primary.dark",
    m: 0,
    p: 2,
    textAlign: "center",
    alignItems: "middle",
    justifyContent: "center",
    display: "flex",
  }),
);

export const LoginPage: React.FC<LoginPageProps> = ({ title, logo, form: Form, logoHeight }) => {
  Form ??= LoginForm;

  return (
    <Content layout="fullWidth">
      <StyledDialog
        open
        BackdropComponent={StyledBackdrop}
        PaperProps={{ elevation: 1 }}
        sx={{ "> * > *": { width: "100%" } }} // TODO: Move to styled form somehow
      >
        <StyledDialogTitle>
          {logo ? (
            <Brand
              LogoProps={{ style: { width: "auto", height: logoHeight ?? "24px !important" } }}
              src={logo}
            />
          ) : (
            <Typography sx={{ fontWeight: "bold", color: "inherit" }}>{title}</Typography>
          )}
        </StyledDialogTitle>

        <Form />
      </StyledDialog>
    </Content>
  );
};

export default LoginPage;