import React, { useContext, useState } from "react";

import { Loader2 } from "lucide-react";
import { AuthUIContext } from "../../../lib/auth-ui-provider";
import type { Member } from "../../../types/auth-client";
import { Button } from "../../ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../ui/dialog";
import { Label } from "../../ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../../ui/select";
const RoleUpdate = ({
  currentRole,
  showRoleDialog,
  setShowRoleDialog,
  member,
}: {
  currentRole: string;
  member: Member;
  setShowRoleDialog: () => void;
  showRoleDialog: boolean;
}) => {
  const [role, setRole] = useState(currentRole);
  const [isRoleActionPending, setIsRoleActionPending] = useState(false);
  const { authClient, toast, roles } = useContext(AuthUIContext);

  const onRoleChange = async () => {
    setIsRoleActionPending(true);
    await authClient.organization.updateMemberRole(
      {
        memberId: member?.id,
        role,
      },
      {
        onSuccess(context) {
          toast({ message: `Role updated to ${role}` });
          setShowRoleDialog();
        },
        onError(context) {
          toast({
            message: context.error.message,
            variant: "error",
          });
        },
      }
    );
    setIsRoleActionPending(false);
  };

  return (
    <div>
      <Dialog open={showRoleDialog} onOpenChange={setShowRoleDialog}>
        <DialogContent
          className="sm:max-w-[425px]"
          onOpenAutoFocus={(e) => e.preventDefault()}
        >
          <DialogHeader>
            <DialogTitle>Change User Role</DialogTitle>
            <DialogDescription>Update the role for this user</DialogDescription>
          </DialogHeader>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="role" className="text-right">
              Role
            </Label>
            <div className="col-span-3">
              <Select
                onValueChange={setRole}
                value={role}
                defaultValue={role}
                disabled={isRoleActionPending}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select a role" />
                </SelectTrigger>
                <SelectContent>
                  {roles?.map((role) => {
                    return (
                      <SelectItem key={role.key} value={role?.key}>
                        {role?.value}
                      </SelectItem>
                    );
                  })}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button
              disabled={isRoleActionPending}
              variant="outline"
              onClick={() => !isRoleActionPending && setShowRoleDialog()}
            >
              Cancel
            </Button>
            <Button disabled={isRoleActionPending} onClick={onRoleChange}>
              {isRoleActionPending ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                "Save"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default RoleUpdate;