import React, { useEffect, useState } from 'react';
import { Drawer, Text, Select } from '@mantine/core';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { createTask } from '../../../Settings/store/taskSlice';
import { fetchProjectTaskSections } from '../../../Settings/store/projectSlice';
import TaskDrawer from '../../../ui/TaskDrawer';

const AddTaskDrawerFromCalendar = ({
    startDate, endDate, project,
    taskAddDrawerOpen, openTaskAddDrawer, closeTaskAddDrawer,
}) => {
    const dispatch = useDispatch();
    const { loggedInUser } = useSelector(s => s.auth.session);
    const { loggedUserId }  = useSelector(s => s.auth.user);
    const { projectSections } = useSelector(s => s.settings.project);

    const projectId = useParams().id;
    const [taskSectionId, setTaskSectionId] = useState(null);

    const members = (project?.members || []).map(u => ({
        id: u.id, label: u.name, avatar: u.avatar,
    }));

    useEffect(() => {
        if (projectId) dispatch(fetchProjectTaskSections(projectId));
    }, [projectId]);

    const handleSave = async (formData) => {
        if (!formData.name || !projectId || !taskSectionId) return null;
        const response = await dispatch(createTask({
            ...formData,
            project_id: projectId,
            task_section_id: taskSectionId,
            created_by: loggedInUser?.loggedUserId || loggedUserId,
            // Calendar tasks: start and end are the same day
            start_date: formData.start_date || formData.end_date,
            end_date: formData.end_date || formData.start_date,
            type: 'task',
            status: 'ACTIVE',
        }));
        return response.payload;
    };

    // Section picker rendered as a slot inside the drawer body
    const sectionField = (
        <div className="flex z-[104]">
            <div className="w-1/4">
                <Text fw={700} fz={14} c="#202020">Section</Text>
            </div>
            <Select
                searchable
                clearable
                size="sm"
                placeholder="Select Section"
                data={(projectSections || []).map(s => ({ value: s.id, label: s.name }))}
                allowDeselect
                onChange={(_, option) => setTaskSectionId(option?.value || null)}
            />
        </div>
    );

    return (
        <>
            {taskAddDrawerOpen && (
                <div className="drawer">
                    <Drawer
                        opened={taskAddDrawerOpen}
                        onClose={closeTaskAddDrawer}
                        position="right"
                        withCloseButton={false}
                        size="lg"
                        closeOnClickOutside
                        overlayProps={{ backgroundOpacity: 0.3, blur: 1 }}
                    >
                        <div className="mt-4">
                            <Drawer.Body className="!px-1">
                                <TaskDrawer
                                    mode="create"
                                    user={{ loggedInUser, loggedUserId }}
                                    members={members}
                                    onClose={closeTaskAddDrawer}
                                    onSave={handleSave}
                                    sectionField={sectionField}
                                    initialDates={{ startDate, endDate }}
                                    boardMembers={project?.members || []}
                                    projectPriorities={project?.projectPriorities || []}
                                    projectStatuses={project?.projectStatuses || []}
                                    showGanttToggle
                                    buttonLabel="Create"
                                />
                            </Drawer.Body>
                        </div>
                    </Drawer>
                </div>
            )}
        </>
    );
};

export default AddTaskDrawerFromCalendar;