import {
  Modal,
  ModalDialog,
  Typography,
  ModalClose,
  Autocomplete,
} from "@mui/joy";
import { useTranslation } from "react-i18next";

interface SelectUserModalProps {
  showSelectUser: boolean;
  setShowSelectUser: (value: boolean) => void;
  usernameData: { users: string[] };
  usernameDataIsLoading: boolean;
  selectedUser: string | null;
  handleUserSelection: (value: string | null) => void;
}

export const SelectUserModal = (props: SelectUserModalProps) => {
  const { t } = useTranslation();
  return (
    <Modal open={props.showSelectUser}>
      <ModalDialog color="primary" layout="center" size="lg">
        <ModalClose onClick={() => props.setShowSelectUser(false)} />
        <Typography>{t("user")}</Typography>
        {/* User selection */}
        <Autocomplete
          options={props.usernameData?.users ?? []}
          loading={props.usernameDataIsLoading}
          loadingText={t("loading")}
          value={props.selectedUser}
          onChange={(_, value) => props.handleUserSelection(value)}
          placeholder={t("user")}
          variant="soft"
          sx={{ borderRadius: "10px" }}
        />
      </ModalDialog>
    </Modal>
  );
};