import { useCallback, useState } from "react";
import { TextField, Popover } from "@mui/material";

export function TextFieldWithPopover() {
  // TextField の value
  const [value, setValue] = useState("");

  // Popover の開閉状態
  const [opened, setOpened] = useState(false);

  // Popover の width
  const [popoverWidth, setPopoverWidth] = useState(0);

  // Popover を開いた時に、Popover の幅を TextField と同じ幅にする。
  // リサイズしたとしても Popover と TextField が自動的に同じ幅になる。
  const [popoverAnchorEl, setPopoverAnchorEl] = useState<HTMLDivElement | null>(
    null
  );
  const divRef = useCallback(
    (node) => {
      if (node !== null && opened) {
        setPopoverAnchorEl(node);
        setPopoverWidth(node.clientWidth);
      }
    },
    [opened]
  );

  return (
    <div ref={divRef}>
      {/* Popover を開くための TextField */}
      <TextField
        variant="outlined"
        value={value}
        fullWidth
        onClick={() => {
          setOpened(true);
        }}
        inputProps={{ readonly: true }}
      />
      {/* Popover 本体 */}
      <Popover
        anchorEl={popoverAnchorEl}
        open={opened}
        // スタイル用
        PaperProps={{
          style: {
            width: popoverWidth,
            boxSizing: "content-box",
            margin: "-8px 4px",
            padding: "8px",
          },
        }}
        onClose={() => {
          setOpened(false);
        }}
      >
        {/* Popover 内の入力用 TextField */}
        <TextField
          variant="outlined"
          value={value}
          fullWidth
          onChange={(e) => setValue(e.target.value)}
          autoFocus
        />
        Content
      </Popover>
    </div>
  );
}