"use client";
import React, { useState } from "react";
import { Card, CardContent, Typography, Stack } from "@mui/material";
import { IUser } from "./interfaces";
import UserTopBar from "@/app/features/UserRoles/AddUser/AddUserButton";
import UserRoleCard from "@/app/features/UserRoles/userRoleCard";
import AddUser from "@/app/features/UserRoles/AddUser/AddUser";
import { setSidebarOpen } from "@/app/redux/ui/uiSlice";
import { AppDispatch } from "@/app/redux/types";
import { useDispatch } from "react-redux";

interface UsersProps {
  users: IUser[];
}

const Users: React.FC<UsersProps> = ({ users }) => {
  const [showAddUser, setShowAddUser] = useState(false);
  const dispatch = useDispatch<AppDispatch>();

  return (
    <div>
      <UserTopBar
        onAddUser={() => {
          setShowAddUser(true);
          dispatch(setSidebarOpen(false));
        }}
      />
      {users?.length > 0 &&
        users.map((user: IUser) => (
          <Card key={user.id} sx={{ mb: 2 }}>
            <CardContent>
              <Typography variant="h6">{user.username}</Typography>
              <Typography variant="body2">
                Merchant ID: {user.merchantId}
              </Typography>

              <Stack direction="row" spacing={1} mt={1}>
                <UserRoleCard
                  user={user}
                  isAdmin={true}
                  lastLogin="small"
                  merchants={[]} // merchants={Numberuser.allowedMerchantIds}
                />
              </Stack>
            </CardContent>
          </Card>
        ))}

      <AddUser open={showAddUser} onClose={() => setShowAddUser(false)} />
    </div>
  );
};
export default Users;