import { mdiCash } from "@mdi/js";
import Icon from "@mdi/react";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { Link, Outlet } from "react-router-dom";
import loginSplashImage from "./mufid-majnun-LVcjYwuHQlg-unsplash.jpg";
import { PublicModeButton } from "./PublicModeButtonWidget";
import { DarkThemeButton } from "./DarkThemeButtonWidget";

function Copyright(props: any): React.ReactElement {
  return (
    <Typography
      variant="body2"
      color="text.secondary"
      align="center"
      style={{ marginTop: "20px" }}
      {...props}
    >
      {"Copyright © "}
      <a
        color="inherit"
        href="https://0ph.fr/"
        target="_blank"
        rel="noreferrer"
        style={{ color: "inherit" }}
      >
        Pierre HUBERT
      </a>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

export function BaseLoginPage() {
  return (
    <Grid container component="main" sx={{ height: "100vh" }}>
      <CssBaseline />
      <Grid
        size={{ xs: false, sm: 4, md: 7 }}
        sx={{
          backgroundImage: `url(${loginSplashImage})`,
          backgroundRepeat: "no-repeat",
          backgroundColor: (t) =>
            t.palette.mode === "light"
              ? t.palette.grey[50]
              : t.palette.grey[900],
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      />
      <Grid
        size={{ xs: 12, sm: 8, md: 5 }}
        component={Paper}
        elevation={6}
        square
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            flex: "1",
            height: "100%",
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
            <Icon path={mdiCash} size={1} />
          </Avatar>
          <Link to="/" style={{ color: "inherit", textDecoration: "none" }}>
            <Typography component="h1" variant="h5">
              Money manager
            </Typography>
          </Link>
          <Typography
            component="h1"
            variant="h6"
            style={{ margin: " 40px 0px" }}
          >
            Open source money management
          </Typography>

          {/* inner page */}
          <Outlet />

          <Copyright sx={{ mt: 5 }} style={{ margin: "40px 0px" }} />

          <div
            style={{
              display: "flex",
              justifyContent: "center",
              width: "100%",
              marginTop: "50px",
            }}
          >
            <PublicModeButton />
            <DarkThemeButton />
          </div>
        </Box>
      </Grid>
    </Grid>
  );
}
