Untitled

import { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import { useStudyMaterialStore } from "../../store/StudyMaterialStore";
import { CardBox } from "../user/UserProfile";
import Select from "react-select";
import { assign, filter, map, size } from "lodash";
import { Box, Button, Flex, HStack, IconButton, Tag, Text, Tooltip, useDisclosure, VStack } from "@chakra-ui/react";
import { useUpdateMemberData } from "../../services/member.service";
import { ErrorAlert, SuccessAlert } from "../../utils/Helper";
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
} from '@chakra-ui/react'
import {
    Table,
    Thead,
    Tbody,
    Tr,
    Th,
    Td,
    TableContainer,
} from '@chakra-ui/react'
import moment from "moment";
import { RxCross2 } from "react-icons/rx";
import { ConfirmAlert } from "../../components/ConfirmAler";
import { FaUserXmark } from "react-icons/fa6";
import { useAuth } from "../../context/auth";
import { PERMISSIONS } from "../../app/data/permissions";

export const StudyMaterial = ({ staffmemberid, staffMember, refetch, userData }) => {
    const { getModulesAction, studyMaterialModules } = useStudyMaterialStore();
    const [isOpenConfirm, setIsOpenConfirm] = useState(false)
    const [type, setType] = useState('')
    const { isOpen, onOpen, onClose } = useDisclosure()
    const {hasPermission} = useAuth()
    const onOpenConfirm = (data) => {
        setIsOpenConfirm({ data })
    }
    const onCloseConfirm = () => {
        setIsOpenConfirm(false)
    }
    const { control, handleSubmit, reset } = useForm({
        defaultValues: {
            studyMaterials: [],
        },
    });

    useEffect(() => {
        getModulesAction();
    }, [getModulesAction]);

    const { mutate, isPending } = useUpdateMemberData({
        onSuccess: () => {
            refetch();
            if (type === 'UN') {
                SuccessAlert("Study materials unassigned successfully!");
                setType(null)
                onCloseConfirm()
            } else {
                SuccessAlert("Study materials assigned successfully!");
            }
            reset()
        },
        onError: () => {
            if (type === 'UN') {
                setType(null)
                ErrorAlert("Failed to un-assign study materials.");
            } else {
                ErrorAlert("Failed to assign study materials.");
            }

        },
    });
    
    const alreadyAssignedIds = map(staffMember?.studyMaterials || [], (assigned) => assigned?.studyMaterial?._id) || [];

    const activeStudyMaterials = filter(studyMaterialModules, (s) =>
        s.isActive 
    );
    const availableStudyMaterials = filter(
        activeStudyMaterials,
        (s) => !alreadyAssignedIds.includes(s._id)
    );
    const studyMaterialOption = map(availableStudyMaterials, (s) => ({
        label: `${s?.name}_${s.subject} (${s?.moduleCode})`,
        value: s?._id,
    }));


    const onSubmit = (data) => {

        const existingStudyMaterials = staffMember?.studyMaterials?.map((assigned) => ({
            studyMaterial: assigned.studyMaterial,
            assignedBy: assigned.assignedBy?._id,
            assignedTo: assigned.assignedTo,
            assignedAt: assigned.assignedAt,
            unassigned: assigned.unassigned,
            unassignedBy:assigned.unassignedBy,
            unassignedAt:assigned.unassignedAt,
        })) || [];

        const newStudyMaterials = data.studyMaterials?.map((material) => ({
            studyMaterial: material.value,
            assignedBy: userData?.staff?._id,
            assignedTo: staffmemberid,
            assignedAt: new Date(),

        }));

        const payload = {
            id: staffmemberid,
            studyMaterials: [...existingStudyMaterials, ...newStudyMaterials],
        };

        mutate(payload);
    };



    const handleClear = () => {
        reset({ studyMaterials: [] });
    };

    const hanldeUnassign = (type) => {
        setType(type)
        const payload = {
            id: staffmemberid,
            studyMaterials: staffMember?.studyMaterials?.map((s) => {
                if (s._id === isOpenConfirm?.data?._id) {
                    return {
                        ...s,
                        unassigned: true,
                        unassignedBy: userData?.staff?._id,
                        unassignedAt: new Date(),
                    };
                }
                return s;
            }),
        };

        mutate(payload);
    };


    return (
        <CardBox heading="Study Materials">
            <Flex justifyContent={'flex-end'}>
                <Box mr={2}>
                    <Tooltip label="Unassigned History" aria-label="Unassigned History" >
                        <IconButton icon={<FaUserXmark />} colorScheme="blue" size="md" onClick={onOpen} >

                        </IconButton>
                    </Tooltip>
                </Box>
                <Tag p={2} colorScheme="gray" >Total Unassigned : {size(filter(staffMember?.studyMaterials, (s) => s.unassigned || s.unassigned === true))}</Tag>
                <Tag p={2} ml={2} colorScheme="blue" >Total Assigned : {size(filter(staffMember?.studyMaterials, (s) => !s.unassigned || s.unassigned !== true))}</Tag>

            </Flex>
            <form onSubmit={handleSubmit(onSubmit)}>
                <VStack spacing={4} align="stretch" w="100%">
                    <Flex>
                        <Box ml={4}>
                            <Controller
                                name="studyMaterials"
                                control={control}
                                render={({ field }) => (
                                    <Select
                                        {...field}
                                        isMulti
                                        options={studyMaterialOption}
                                        isSearchable
                                        isClearable
                                        styles={{
                                            container: (base) => ({
                                                ...base,
                                                width: "400px",
                                            }),
                                            control: (base) => ({
                                                ...base,
                                                fontSize: "16px",
                                            }),
                                        }}
                                    />
                                )}
                            />
                        </Box>
                        <Box w="100%" ml={2}>
                            <HStack spacing={4}>
                                <Button
                                    colorScheme="blue"
                                    type="submit"
                                    isLoading={isPending && !type}
                                >
                                    Assign
                                </Button>
                                <Button colorScheme="gray" onClick={handleClear}>
                                    Clear
                                </Button>
                            </HStack>
                        </Box>
                    </Flex>

                    <Box>
                        <TableContainer>
                            <Table variant='simple'>
                                <Thead>
                                    <Tr bgColor={'gray.100'}>
                                        <Th>S.No.</Th>
                                        <Th>Study Material</Th>
                                        <Th>Module Code</Th>
                                        <Th>Subject</Th>
                                        <Th>Assigned By</Th>
                                        <Th>Assigned At</Th>
                                        {hasPermission(PERMISSIONS.UNASSIGN_STUDY_MATERIAL_STAFF,PERMISSIONS.USER_TYPE_ADMIN,PERMISSIONS.USER_TYPE_SUPERADMIN)&&<Th>Action</Th>}
                                    </Tr>
                                </Thead>
                                {size(staffMember?.studyMaterials) > 0 ? <Tbody>
                                    {filter(staffMember?.studyMaterials, (s, i) => s.unassigned !== true || !s.unassigned)?.map((s, i) => {
                                        return (
                                            <Tr key={i}>
                                                <Td>{i + 1}.</Td>
                                                <Td>{s?.studyMaterial?.name}</Td>
                                                <Td>{s?.studyMaterial?.moduleCode}</Td>
                                                <Td>{s?.studyMaterial?.subject}</Td>
                                                <Td>{s?.assignedBy?.name}</Td>
                                                <Td>{moment(s?.assignedAt).format('DD MMM YYYY')}</Td>
                                                <Td>
                                                   {hasPermission(PERMISSIONS.UNASSIGN_STUDY_MATERIAL_STAFF,PERMISSIONS.USER_TYPE_ADMIN,PERMISSIONS.USER_TYPE_SUPERADMIN)&& <Tooltip label="Unassign Study Material" aria-label="Unassign Study Material">
                                                        <IconButton
                                                            name="delete"
                                                            color="red"
                                                            size={20}
                                                            icon={<RxCross2 />
                                                            }
                                                            onClick={() => onOpenConfirm(s)} />

                                                    </Tooltip>}
                                                </Td>

                                            </Tr>

                                        )
                                    })}
                                </Tbody> : <Text mt={4} color={'gray.500'}>No Study Materials Assigned</Text>}
                            </Table>
                        </TableContainer>
                    </Box>

                </VStack>
            </form>
            {isOpenConfirm && <ConfirmAlert isOpen={isOpenConfirm} onClose={onCloseConfirm} message={'Are you Sure to unassign this Study Material'}
                heading={'Confirm ALert'} onConfirm={() => hanldeUnassign('UN')} loading={isPending} />}
            {isOpen && <UnassignedHistory isOpen={isOpen} onClose={onClose} studyMaterial={staffMember?.studyMaterials} />}
        </CardBox>
    );
};

const UnassignedHistory = ({ isOpen, onClose, studyMaterial }) => {
    return (
        <Modal isOpen={isOpen} onClose={onClose} size={'6xl'} >
            <ModalOverlay />
            <ModalContent>
                <ModalHeader bgColor={'gray.100'}>Unassign History</ModalHeader>
                <ModalCloseButton />
                <ModalBody>
                    <Box>
                        <TableContainer>
                            <Table variant='simple' size={'sm'}>
                                <Thead>
                                    <Tr bgColor={'gray.100'}>
                                        <Th>S.No.</Th>
                                        <Th>Study Material</Th>
                                        <Th>Module Code</Th>
                                        <Th>Subject</Th>
                                        <Th>Assigned By</Th>
                                        <Th>Assigned At</Th>
                                        <Th>Unassigned By</Th>
                                        <Th>Unassigned At</Th>
                                    </Tr>
                                </Thead>
                                {size(studyMaterial) > 0 ? <Tbody>
                                    {filter(studyMaterial, (s, i) => s.unassigned === true || s.unassigned)?.map((s, i) => {
                                        return (
                                            <Tr key={i}>
                                                <Td>{i + 1}.</Td>
                                                <Td>{s?.studyMaterial?.name}</Td>
                                                <Td>{s?.studyMaterial?.moduleCode}</Td>
                                                <Td>{s?.studyMaterial?.subject}</Td>
                                                <Td>{s?.assignedBy?.name}</Td>
                                                <Td>{moment(s?.assignedAt).format('DD MMM YYYY')}</Td>
                                                <Td>{s?.unassignedBy?.name}</Td>
                                                <Td>{moment(s?.unassignedAt).format('DD MMM YYYY')}</Td>
                                            </Tr>

                                        )
                                    })}
                                </Tbody> : <Text mt={4} color={'gray.500'}>No Study Materials Unassigned</Text>}
                            </Table>
                        </TableContainer>
                    </Box>


                </ModalBody>
            </ModalContent>
        </Modal>
    )
}