import { IconUserCircle } from '@tabler/icons-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { Avatar, ScrollArea, Text } from '@mantine/core';
import { useDispatch, useSelector } from 'react-redux';
import UserAvatarSingle from "../ui/UserAvatarSingle";
import { hasPermission } from "../ui/permissions";
const TaskAssignTo = ({ boardMembers, assigned, view, assignedMember = {} }) => {
    const dispatch = useDispatch();

    const [showMembersList, setShowMembersList] = useState(false);
    const [members, setMembers] = useState(boardMembers ? boardMembers : []);
    const { loggedUserId } = useSelector((state) => state.auth.user)
    const { loggedInUser } = useSelector((state) => state.auth.session)


    const [selectedMember, setSelectedMember] = useState((assigned && assigned.id) ? assigned : null);
    const membersListRef = useRef(null);

    useEffect(() => {
        setSelectedMember(assigned && assigned.id ? assigned : null);
    }, [assigned]);

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (membersListRef.current && !membersListRef.current.contains(event.target)) {
                setShowMembersList(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [membersListRef]);

    const handleAssignedToButtonClick = () => {
        setShowMembersList(true);
    };

    const handleAssignButtonClick = (member) => {
        const isRemoving = selectedMember && selectedMember.id === member.id;
        const memberToAssign = isRemoving ? null : member;

        setMembers((prevMembers) =>
            prevMembers.map((m) => {
                if (m.id === member.id) {
                    return { ...m, assigned: !isRemoving }; // Toggle assigned status
                } else if (selectedMember && m.id === selectedMember.id) {
                    return { ...m, assigned: false }; // Unassign previously selected member
                } else {
                    return m;
                }
            })
        );

        if (typeof assignedMember === 'function') {
            assignedMember(memberToAssign);
        }

        setSelectedMember(memberToAssign);
        setShowMembersList(false);
    };

    return (
        <Fragment>
            <div onClick={handleAssignedToButtonClick} className="assignto-btn">
                {selectedMember ? (
                    <div className="flex items-center gap-2">
                        <UserAvatarSingle user={selectedMember} size={32} />
                        {/*<Avatar src={selectedMember.avatar} size={32} radius={32}/>*/}
                        {!(view === 'cardView') && (
                            // <p className="ml-2">{selectedMember.name}</p>
                            <Text title={selectedMember.name} lineClamp={1} size="sm" fw={500} c="#202020" className="ml-2">
                                {selectedMember.name}
                            </Text>
                        )}
                    </div>
                ) : (
                    <div className="h-[30x] w-[30px] border border-dashed border-[#202020] rounded-full p-1 cursor-pointer">
                        <IconUserCircle color="#4d4d4d" size="20" stroke={1.25} />
                    </div>
                )
                }
            </div>

            {showMembersList && (
                <div
                    ref={membersListRef}
                    className="shadow-lg members-lists absolute w-[368px] bg-white mt-1 border border-solid border-[#ffffff] rounded-lg z-[9]"
                >
                    <ScrollArea h={272}>
                        <div className="p-3">
                            <Text size="sm" fw={700} c="#202020">
                                {boardMembers && boardMembers.length > 0 ? boardMembers.length : 0} people available
                            </Text>
                            <div className="mt-3">
                                {boardMembers && boardMembers.length > 0 && boardMembers.map((member) => (
                                    <div
                                        key={member.id}
                                        className="ml-single flex items-center border-b border-solid border-[#C2D4DC] py-1 justify-between"
                                    >
                                        {/*<Avatar src={member.avatar} size={32} radius={32} />*/}
                                        <UserAvatarSingle user={member} size={32} />
                                        <div className="mls-ne ml-3 w-[80%]">
                                            <Text size="sm" fw={700} c="#202020">
                                                {member.name}
                                            </Text>
                                        </div>
                                        <button
                                            onClick={() => handleAssignButtonClick(member)}
                                            className={`rounded-[5px] h-[32px] px-1 py-0 w-[100px] ml-2 transition-colors duration-200 ${selectedMember?.id === member.id ? 'bg-red-500 hover:bg-red-600' : 'bg-[#39758D] hover:bg-[#2c5f73]'}`}
                                        >
                                            <Text size="sm" fw={400} c="#fff">
                                                {selectedMember && selectedMember.id === member.id ? 'Remove' : 'Assign'}
                                            </Text>
                                        </button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </ScrollArea>
                </div>
            )}
        </Fragment>
    );
};

export default TaskAssignTo;