import React from "react";

import { SxProps } from "@mui/material";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import Stack from "@mui/system/Stack";

import { LogoType } from "../../types";
import Brand from "../Brand";

interface BrandingProps {
  logo?: LogoType;
  title?: string;
  subtitle?: string;
  version?: string;
  onClick?: React.MouseEventHandler;
  fullWidth?: boolean;
  sx?: SxProps;
}

interface BrandingOwnerState extends Pick<BrandingProps, "fullWidth"> {}

const BrandingRoot = styled(Box, {
  name: "BananasNavRail",
  slot: "Branding",
})<{ ownerState: BrandingOwnerState }>(({ theme, ownerState }) =>
  theme.unstable_sx({
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    flexGrow: 1,
    width: ownerState.fullWidth ? "100%" : "0",
  }),
);

const StyledBrandBox = styled(Box, {
  name: "BananasNavRail",
  slot: "BrandBox",
})(({ theme }) =>
  theme.unstable_sx({
    minWidth: "100%",
    height: "100%",
    aspectRatio: "1 / 1",
    bgcolor: "rgba(0, 0, 0, 0.5)",
    display: "flex",
    alignItems: "center",
    p: 1.5,
    borderRadius: 3,
    "&:hover": {
      bgcolor: "rgba(0, 0, 0, 0.25)",
    },
    '&:hover [class$="brandIconBox"]': {
      transform: "scale(1.1)",
    },
    transition: theme.transitions.create(["background-color"], {
      duration: theme.transitions.duration.shortest,
    }),
  }),
);

const StyledBrandIconBox = styled(Box, {
  name: "BananasNavRail",
  slot: "BrandIconBox",
})(({ theme }) =>
  theme.unstable_sx({
    width: "100%",
    transition: theme.transitions.create(["transform"], {
      duration: theme.transitions.duration.shortest,
    }),
  }),
);

const Branding: React.FC<BrandingProps> = ({
  logo,
  title,
  subtitle,
  version,
  onClick,
  fullWidth,
  sx,
}) => {
  const ownerState = { fullWidth };

  return (
    <Stack
      sx={{
        width: ownerState.fullWidth ? "100%" : "0",
        py: 2,
        px: 1.5,
        minHeight: 84,
      }}
    >
      <BrandingRoot ownerState={ownerState} sx={sx}>
        <ButtonBase
          disableRipple
          sx={{
            justifyContent: "flex-start",
            width: "100%",
            aspectRatio: "1 / 1",
            color: "inherit",
          }}
          onClick={onClick}
        >
          {logo ? (
            <StyledBrandBox>
              <StyledBrandIconBox>
                <Brand
                  LogoProps={{
                    style: {
                      maxHeight: 32,
                    },
                  }}
                  src={logo}
                />
              </StyledBrandIconBox>
            </StyledBrandBox>
          ) : (
            <Typography
              color="inherit"
              sx={{
                fontWeight: "bold",
              }}
              variant="h4"
            >
              {title}
            </Typography>
          )}
          <Box
            sx={{
              marginLeft: 10,
              "& > *": {
                textAlign: "left",
                fontSize: "0.75rem",
                display: "block",
                lineHeight: `1em`,
              },
            }}
          >
            <Typography color="inherit">{subtitle}</Typography>
            <Typography color="inherit">{version}</Typography>
          </Box>
        </ButtonBase>
      </BrandingRoot>
    </Stack>
  );
};

export default Branding;