import React, { useEffect, useRef, useState } from 'react';
import {
    Button,
    TextInput, Tooltip, Avatar, Popover, Flex
} from '@mantine/core';
import { IconCheck, IconPlus } from '@tabler/icons-react';

import { useDispatch, useSelector } from "react-redux";
import {
    createTask,
    removeSuccessMessage,
} from "../../../Settings/store/taskSlice";
import { notifications } from "@mantine/notifications";
import { useForm } from "@mantine/form";
import { translate } from '../../../../utils/i18n';

const T = {
    border:   '#E2E8F0',
    text:     '#1A202C',
    muted:    '#64748B',
    icon:     '#6B7280',
    teal:     '#39758D',
    radius:   '12px',
    radiusSm: '6px',
};

const AddTaskPopover = (props) => {
    const { projectId, taskSectionId, isSubtask, parent, openOnHotkey } = props;

    const dispatch = useDispatch();
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);

    const [openedAddTaskPopover, setOpenedAddTaskPopover] = useState(false);

    useEffect(() => {
        if (openOnHotkey) setOpenedAddTaskPopover(true);
    }, [openOnHotkey]);

    const form = useForm({
        mode: 'uncontrolled',
        initialValues: { name: '' },
        validate: {
            name: (value) => (value.length < 1 ? translate('Name is required') : null),
        }
    });

    const inputRef = useRef(null);
    useEffect(() => {
        if (openedAddTaskPopover) {
            setTimeout(() => { inputRef.current?.focus(); }, 100);
        }
    }, [openedAddTaskPopover]);

    const handleTaskCreation = (newTaskData) => {
        newTaskData['project_id'] = projectId;
        newTaskData['task_section_id'] = taskSectionId;
        newTaskData['created_by'] = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;
        newTaskData['type'] = 'task';
        newTaskData['status'] = 'ACTIVE';
        newTaskData['is_visible'] = false;
        if (isSubtask && parent) {
            newTaskData['parent'] = parent;
            newTaskData['type'] = 'sub-task';
        }

        if (newTaskData.name !== '' && newTaskData.name !== 'Type task name here') {
            dispatch(createTask(newTaskData)).then((response) => {
                if (response.payload.status === 200) {
                    setOpenedAddTaskPopover(false);
                    form.reset();
                    notifications.show({
                        color: 'green',
                        title: response.payload.message || translate('Task created successfully'),
                        icon: <IconCheck size={16} />,
                        autoClose: 5000,
                    });
                    const timer = setTimeout(() => { dispatch(removeSuccessMessage()); }, 5000);
                    return () => clearTimeout(timer);
                }
            });
        }
    };

    return (
        <Popover
            width={300}
            position="bottom-end"
            offset={isSubtask ? { mainAxis: 7, crossAxis: 40 } : { mainAxis: 7, crossAxis: 10 }}
            arrowOffset={isSubtask ? 50 : 20}
            shadow={false}
            opened={openedAddTaskPopover}
            onChange={setOpenedAddTaskPopover}
        >
            <Popover.Target>
                {isSubtask ? (
                    <Tooltip label={translate('Add Subtask')} position="top" withArrow withinPortal={false}>
                        <div
                            onClick={() => setOpenedAddTaskPopover(!openedAddTaskPopover)}
                            className="h-[24px] w-[24px] border border-[#E9E9E9] bg-white rounded-full p-[3px] cursor-pointer hover:bg-gray-50 transition-colors create-subtask"
                        >
                            <IconPlus color={T.icon} size={16} stroke={1.5} />
                        </div>
                    </Tooltip>
                ) : (
                    <Tooltip label={translate('Add Task')} position="top" withArrow withinPortal={false}>
                        <Avatar
                            className="cursor-pointer"
                            onClick={() => setOpenedAddTaskPopover(!openedAddTaskPopover)}
                            size="sm"
                            bg="#ED7D31"
                            color="#fff"
                        >
                            <IconPlus className="hover:scale-110" size={18} />
                        </Avatar>
                    </Tooltip>
                )}
            </Popover.Target>

            <Popover.Dropdown style={{
                padding: 0,
                border: `1px solid ${T.border}`,
                borderRadius: T.radius,
                boxShadow: '0 8px 32px rgba(0,0,0,.12)',
                overflow: 'hidden',
            }}>
                <div style={{ padding: '10px 14px 8px', borderBottom: `1px solid ${T.border}` }}>
                    <span style={{ fontSize: '12px', fontWeight: 700, color: T.text, display: 'flex', alignItems: 'center', gap: '6px' }}>
                        <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: T.teal, flexShrink: 0 }} />
                        {isSubtask ? translate('Add Subtask') : translate('Add Task')}
                    </span>
                </div>

                <div style={{ padding: '12px 14px 14px' }}>
                    <form onReset={form.onReset} onSubmit={form.onSubmit((values) => handleTaskCreation(values))}>
                        <TextInput
                            placeholder={translate('Type task name here')}
                            key={form.key('name')}
                            {...form.getInputProps('name')}
                            ref={inputRef}
                            styles={{
                                input: {
                                    fontSize: '12px',
                                    borderRadius: T.radiusSm,
                                    border: `1px solid ${T.border}`,
                                    color: T.text,
                                    '&:focus': { borderColor: T.teal },
                                },
                                error: { fontSize: '11px' },
                            }}
                        />
                        <Flex gap="sm" className="mt-3">
                            <Button
                                type="submit"
                                size="xs"
                                style={{
                                    backgroundColor: T.teal,
                                    color: '#fff',
                                    borderRadius: T.radiusSm,
                                    fontSize: '12px',
                                    fontWeight: 600,
                                }}
                            >
                                {translate('Add')}
                            </Button>
                            <Button
                                type="reset"
                                size="xs"
                                variant="subtle"
                                color="gray"
                                style={{ fontSize: '12px', borderRadius: T.radiusSm }}
                                onClick={() => { setTimeout(() => { inputRef.current?.focus(); }, 50); }}
                            >
                                {translate('Clear')}
                            </Button>
                        </Flex>
                    </form>
                </div>
            </Popover.Dropdown>
        </Popover>
    );
};


export default AddTaskPopover;