import { useState } from "react";
import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
import { IconButton, InputAdornment } from "@mui/material";

import { TextField, type UiTextFieldProps } from "@/components/ui/text-field";

export type PasswordFieldProps = Omit<UiTextFieldProps, "type"> & {
  visible?: boolean;
  onVisibleChange?: (visible: boolean) => void;
};

const passwordFieldSx = {
  "& .MuiInputAdornment-positionEnd": {
    marginRight: "-8px",
  },
} as const;

export function PasswordField({
  visible: visibleProp,
  onVisibleChange,
  sx,
  slotProps,
  ...props
}: PasswordFieldProps) {
  const [internalVisible, setInternalVisible] = useState(false);
  const isControlled = visibleProp !== undefined;
  const showPassword = isControlled ? visibleProp : internalVisible;

  const toggleVisibility = () => {
    const next = !showPassword;
    if (!isControlled) {
      setInternalVisible(next);
    }
    onVisibleChange?.(next);
  };

  return (
    <TextField
      type={showPassword ? "text" : "password"}
      sx={[passwordFieldSx, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}
      slotProps={{
        ...slotProps,
        input: {
          ...slotProps?.input,
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                type="button"
                aria-label={showPassword ? "Hide password" : "Show password"}
                onClick={toggleVisibility}
                size="small"
                className="text-muted-foreground"
              >
                {showPassword ? (
                  <VisibilityOffOutlinedIcon className="h-[16px]! w-[16px]!" />
                ) : (
                  <VisibilityOutlinedIcon className="h-[16px]! w-[16px]!" />
                )}
              </IconButton>
            </InputAdornment>
          ),
        },
      }}
      {...props}
    />
  );
}