import {
  FormControl,
  InputLabel,
  TextField as MuiTextField,
  SxProps,
  TextFieldProps,
  Theme,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { FC } from "react";

const TextField = MuiTextField as unknown as FC<TextFieldProps>;

interface Props {
  id?: string;
  label?: string;
  labelSx?: SxProps<Theme>;
  bold?: boolean;
  gap?: string;
  backgroundColor?: string;
  FormControlSx?: SxProps<Theme>;
  TextFieldSx?: SxProps<Theme>;
  placeholder?: TextFieldProps["placeholder"];
  value?: TextFieldProps["value"];
  helperText?: TextFieldProps["helperText"];
  error?: TextFieldProps["error"];
  type?: TextFieldProps["type"];
  onBlur?: TextFieldProps["onBlur"];
  onChange?: TextFieldProps["onChange"];
  fullWidth?: boolean;
}

export default function PenaTextField({
  id,
  label,
  labelSx,
  bold = false,
  gap = "10px",
  onChange,
  error,
  helperText,
  onBlur,
  placeholder,
  type,
  value,
  backgroundColor,
  FormControlSx,
  TextFieldSx,
  fullWidth = true,
}: Props) {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  const labelFont = upMd
    ? bold
      ? theme.typography.p1
      : { ...theme.typography.body1, fontWeight: 500 }
    : theme.typography.body2;

  const placeholderFont = upMd
    ? undefined
    : { fontWeight: 400, fontSize: "16px", lineHeight: "19px" };

  return (
    <FormControl
      fullWidth={fullWidth}
      variant="standard"
      sx={{
        gap,
        ...FormControlSx,
      }}
    >
      {label && (
        <InputLabel
          shrink
          htmlFor={id}
          sx={{
            position: "inherit",
            color: "black",
            transform: "none",
            ...labelFont,
            ...labelSx,
          }}
        >
          {label}
        </InputLabel>
      )}
      <TextField
        fullWidth
        id={id}
        error={error}
        helperText={helperText}
        onBlur={onBlur}
        placeholder={placeholder}
        type={type}
        value={value}
        sx={{
          "& .MuiInputBase-root": {
            height: "48px",
            borderRadius: "8px",
            "& fieldset": {
              border: `1px solid ${theme.palette.grey2.main}`,
            },
            "&:hover fieldset": {
              border: `1px solid ${theme.palette.grey3.main}`,
            },
            "&.Mui-focused fieldset": {
              border: `2px solid ${theme.palette.brightPurple.main}`,
            },
          },
          "& .MuiFormHelperText-root.MuiFormHelperText-contained.MuiFormHelperText-filled.Mui-error":
            {
              position: "absolute",
              top: "45px",
            },
          ...TextFieldSx,
        }}
        inputProps={{
          sx: {
            boxSizing: "border-box",
            backgroundColor:
              backgroundColor ?? theme.palette.background.default,
            borderRadius: "8px",
            height: "48px",
            py: 0,
            color: theme.palette.grey3.main,
            ...placeholderFont,
          },
        }}
        onChange={onChange}
      />
    </FormControl>
  );
}
