import React, { ReactElement, ReactNode } from "react";

import clsx from "clsx";
import { InputLabel, styled } from "@mui/material";
import NotchedOutline from "@mui/material/OutlinedInput/NotchedOutline";

const DivRoot = styled("div")(({ theme }) => ({
  position: "relative",
  marginTop: "8px",
}));

const DivContentWrapper = styled("div")(({ theme }) => ({
  position: "relative",
}));

const DivContent = styled("div")(({ theme }) => ({
  paddingTop: "1px",
  paddingLeft: theme.spacing(1),
  paddingRight: theme.spacing(1),
}));

const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
  position: "absolute",
  left: 0,
  top: 0,
}));

const StyledNotchedOutline = styled(NotchedOutline)(({ theme }) => [
  {
    borderRadius: theme.shape.borderRadius,
    borderColor: theme.palette.grey["400"]
  },
  theme.applyStyles('dark', {
    borderRadius: theme.shape.borderRadius,
    borderColor: theme.palette.grey["800"]
  })
]);

interface Props {
  id: string;
  label: string;
  children: ReactNode;
  className?: string;
}

export default function LabelledOutlined({ id, label, children, className }: Props): ReactElement {
  const labelRef = React.useRef(null);
  return (
    <DivRoot className={clsx(className)}>
      <StyledInputLabel
        ref={labelRef}
        htmlFor={id}
        variant="outlined"
        shrink
      >
        {label}
      </StyledInputLabel>
      <DivContentWrapper>
        <DivContent id={id}>
          {children}
          <StyledNotchedOutline notched label={label + "*"} />
        </DivContent>
      </DivContentWrapper>
    </DivRoot>
  );
}