import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
    createTask,
    uploadAttachments,
    wpDeleteAttachment,
    closeAddTaskDrawer,
    completeTask,
    updateTaskStatus,
} from '../../../Settings/store/taskSlice';
import { useProjectPermissions } from '../../../ui/permissions';
import TaskDrawer from '../../../ui/TaskDrawer';

const AddTaskDrawer = ({ view, projectId, projectInfo, taskSectionId, addTaskDrawerOpen }) => {
    const dispatch  = useDispatch();
    const { loggedInUser } = useSelector(s => s.auth.session);
    const { loggedUserId } = useSelector(s => s.auth.user);
    const projectPermissions = useProjectPermissions(projectInfo?.id);
    const members = (projectInfo?.members || []).map(u => ({
        id: u.id, label: u.name, avatar: u.avatar,
    }));

    const handleSave = async (formData) => {
        const response = await dispatch(createTask({
            ...formData,
            project_id: projectId,
            task_section_id: taskSectionId,
            created_by: loggedInUser?.loggedUserId || loggedUserId,
            type: 'task',
            status: 'ACTIVE',
        }));
        if (response.payload?.status === 200) {
            const createdTask = response.payload?.data;
            const selectedStatus = formData.internal_status;
            // If the picked status is the designated-complete one, run the completion workflow
            // (move to complete section + set status badge) — matches TaskStatus.handleSelectStatus.
            if (createdTask?.id && selectedStatus?.is_complete_status == 1) {
                const userId = loggedInUser?.loggedUserId || loggedUserId;
                const completeResp = await dispatch(completeTask({
                    id: createdTask.id,
                    data: { project_id: projectId, type: 'task', updated_by: userId },
                }));
                if (completeResp.payload?.status === 200) {
                    dispatch(updateTaskStatus({
                        id: createdTask.id,
                        data: { status_id: selectedStatus.id, updated_by: userId },
                    }));
                }
            }
            dispatch(closeAddTaskDrawer());
        }
        return response.payload;
    };

    const handleAttachmentUpload = async (files) => {
        const formData = new FormData();
        files.forEach((file, i) => formData.append(`attachments${i}`, file));
        formData.append('user_id', loggedInUser?.loggedUserId || loggedUserId);
        const response = await dispatch(uploadAttachments({ data: formData }));
        return response.payload;
    };

    const handleAttachmentDelete = async (id) => {
        const response = await dispatch(wpDeleteAttachment({ id }));
        return response.payload;
    };

    return (
        <TaskDrawer
            mode="create"
            user={{ loggedInUser, loggedUserId }}
            projectPermissions={projectPermissions}
            members={members}
            onClose={() => dispatch(closeAddTaskDrawer())}
            onSave={handleSave}
            onAttachmentUpload={handleAttachmentUpload}
            onAttachmentDelete={handleAttachmentDelete}
            showGanttToggle
        />
    );
};

export default AddTaskDrawer;