import React, { useEffect, useMemo, useState } from "react";
import { Typography } from "@mui/material";
import { styled } from "@mui/material/styles";
import Badge from "@mui/material/Badge";
import Avatar from "@mui/material/Avatar";
import {
  AvtarCompanyName,
  AvtarInfoInn,
  AvtarName,
  RecentChatBox,
  RecentChatBoxScroll,
  RecentChatRow,
} from "@/components/ChatModule/style";
import Checkbox from "@mui/material/Checkbox";
import { apiClient } from "@/components/common/common";
import useFetchSubAccounts from "../../common/customHooks/useFetchSubAccounts";

const SubAccountLists = (props) => {
  const { setSelectedUsers, selectedUsers } = props;

  const [checkedUsers, setCheckedUsers] = React.useState([]);
  const [subAccounts, setSubAccounts] = useState<any>([]);

  const { fetchSubAccount } = useFetchSubAccounts();

  const StyledBadge = styled(Badge)(({ theme }) => ({
    "& .MuiBadge-badge": {
      backgroundColor: "#44b700",
      color: "#44b700",
      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
    },
  }));

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetchSubAccount();
      setSubAccounts(data);
    };

    fetchData();
  }, []);

  useEffect(() => {
    const selectedUsersIds = selectedUsers?.map((user) => user?.id);
    setCheckedUsers(selectedUsersIds);
  }, [selectedUsers]);

  const setUser = (user, isChecked) => {
    setCheckedUsers((prevCheckedUsers) => {
      if (isChecked && !prevCheckedUsers?.includes(user?.id)) {
        return [...prevCheckedUsers, user?.id];
      } else {
        return prevCheckedUsers?.filter((userId) => userId !== user?.id);
      }
    });

    setSelectedUsers((prev) => {
      if (isChecked && !prev?.includes(user)) {
        return [...prev, user];
      } else {
        return prev?.filter((prevUser) => prevUser?.id !== user?.id);
      }
    });
  };

  const handleSelectUser = (user) => {
    const isChecked = !checkedUsers?.includes(user?.id);
    setUser(user, isChecked);
  };

  const isUserSelected = useMemo(() => {
    const checkedUsersSet = new Set(checkedUsers);
    return (userId) => checkedUsersSet?.has(userId);
  }, [checkedUsers]);

  return (
    <div>
      <RecentChatBox>
        <Typography
          sx={{
            color: "#d7282f",
            fontSize: "14px",
            fontWeight: "600",
            margin: "6px 0 6px",
          }}
        >
          Add sub-account
        </Typography>
        <RecentChatBoxScroll>
          {subAccounts?.length > 0 &&
            subAccounts?.map((user) => (
              <RecentChatRow key={user?.id}>
                <Checkbox
                  checked={isUserSelected(user?.id)}
                  onChange={(event) => {
                    setUser(user, event?.target?.checked);
                  }}
                  inputProps={{ "aria-label": "controlled" }}
                />
                <AvtarInfoInn onClick={(event) => handleSelectUser(user)}>
                  <StyledBadge
                    overlap="circular"
                    anchorOrigin={{
                      vertical: "bottom",
                      horizontal: "right",
                    }}
                    variant="dot"
                  >
                    <Avatar
                      sx={{ width: 30, height: 30 }}
                      alt={user?.name}
                      src={
                        user?.file_name
                          ? user?.file_name
                          : user?.avatar_original
                      }
                    />
                  </StyledBadge>

                  <div>
                    <AvtarName>{user?.name}</AvtarName>
                    <AvtarCompanyName>{user?.job_role}</AvtarCompanyName>
                  </div>
                </AvtarInfoInn>
              </RecentChatRow>
            ))}
        </RecentChatBoxScroll>
      </RecentChatBox>
    </div>
  );
};

export default SubAccountLists;