import React, { useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import TaskName from './TaskName';
import TaskAssignTo from './TaskAssignTo';
import TaskFollower from './TaskFollower';
import TaskDueDate from './TaskDueDate';
import TaskPriority from './TaskPriority';
import TaskStatus from './TaskStatus';
import TaskTag from './TaskTag';
import { Grid, } from "@mantine/core";
import { convertTask, openTaskEditDrawer, setEditableTask } from "../../../../Settings/store/taskSlice";
import TaskActionsMenu from './TaskActionsMenu';
import { translate } from '../../../../../utils/i18n';
import TaskSerial from './TaskSerial';

const SubtaskContent = ({ taskData, subtask, view, autoFocus }) => {
  const dispatch = useDispatch();
  const { taskEditDrawerOpen } = useSelector((state) => state.settings.task);
  const { loggedUserId } = useSelector((state) => state.auth.user);
  const { loggedInUser } = useSelector((state) => state.auth.session);

  const isCompleted = subtask && subtask.status === 'COMPLETED';

  const handleEditSubTaskDrawerOpen = () => {
    if (!taskEditDrawerOpen) {
      dispatch(openTaskEditDrawer());
    }
    dispatch(setEditableTask(subtask && subtask));
  };

  return (
    <>

      {view === 'cardView' ? (
        <div onClick={() => { handleEditSubTaskDrawerOpen() }} className="sabtask mb-2" >
          <div className="flex single-task-content sub-task items-center gap-2 justify-between">
            <TaskName task={subtask && subtask} taskId={subtask && subtask.id} view='cardView' isSubtask nameOfTask={subtask && subtask.name ? subtask.name : "Untitled Subtask"} autoFocus={autoFocus} />
            <div className="flex items-center gap-2">
              <TaskDueDate
                taskId={subtask && subtask.id}
                startDate={subtask && subtask.start_date ? subtask.start_date : null}
                dueDate={subtask && subtask.end_date ? subtask.end_date : null}
                startDateIsVisible={subtask && subtask.start_date_is_visible}
                dueDateIsVisible={subtask && subtask.end_date_is_visible}
              />
              <TaskAssignTo
                taskId={subtask && subtask.id}
                view='cardView'
                assigned={subtask && subtask.assigned_to ? subtask.assigned_to : null}
                assignedMember={(props) => {
                  console.log('')
                }} />
            </div>
          </div>
        </div>

      ) : (

        <div onClick={() => { handleEditSubTaskDrawerOpen() }} className="sabtask w-full hover:bg-gray-50 transition-colors border-t border-gray-100 cursor-pointer"
          style={{ background: subtask && subtask.status == 'COMPLETED' ? '#c9f7d6' : '' }}
        >
          <div className="flex w-full items-center py-2">
            <div className="min-w-[19px] min-h-[30px]"></div>
            <div className="single-task-content sub-task w-full">
              <Grid columns={24} align="center">
                {taskData && taskData.is_serial_enable && (
                  <Grid.Col className="flex items-center w-full !py-0 !pl-0" span={1.5}>
                    <TaskSerial task={taskData && taskData} subtask={subtask && subtask} taskId={subtask && subtask.id} isSubtask />
                  </Grid.Col>
                )}

                <Grid.Col className="flex items-center w-full !py-0 !pl-0" span={taskData && taskData.is_serial_enable ? 8.0 : 9.5}>
                  <div className="flex items-center w-full" style={{ marginLeft: taskData && taskData.is_serial_enable ? '-40px' : '6px' }}>
                    <TaskName task={subtask && subtask} taskId={subtask && subtask.id} isSubtask nameOfTask={subtask && subtask.name ? subtask.name : "Untitled Subtask"} disabled={isCompleted} autoFocus={autoFocus} />
                  </div>
                </Grid.Col>
                <Grid.Col className="assign-to flex items-center w-full !py-0" span={3.0} style={{ marginLeft: '-5px' }}>
                  <div onClick={(e) => e.stopPropagation()} className="pl-1 w-full flex justify-end">
                    <TaskAssignTo
                      taskId={subtask && subtask.id}
                      assigned={subtask && subtask.assigned_to ? subtask.assigned_to : null}
                      assignedMember={(props) => {
                        console.log('')
                      }}
                      disabled={isCompleted}
                      createdBy_id={subtask?.createdBy_id}
                      assignedTo_id={subtask?.assignedTo_id}
                    />
                  </div>
                </Grid.Col>
                <Grid.Col className="due-date flex items-center w-full !py-0 !pl-2" span={3.0}>
                  <div className="w-full flex justify-center" onClick={(e) => e.stopPropagation()} >
                    <TaskDueDate
                      taskId={subtask && subtask.id}
                      startDate={subtask && subtask.start_date ? subtask.start_date : null}
                      dueDate={subtask && subtask.end_date ? subtask.end_date : null}
                      startDateIsVisible={subtask && subtask.start_date_is_visible}
                      dueDateIsVisible={subtask && subtask.end_date_is_visible}
                      disabled={isCompleted}
                      createdBy_id={subtask?.createdBy_id}
                      assignedTo_id={subtask?.assignedTo_id}
                    />
                  </div>
                </Grid.Col>
                <Grid.Col className="priority flex items-center w-full !py-0 !pl-2" span={2.5}>
                  <div className="w-full flex justify-start" onClick={(e) => e.stopPropagation()}>
                    <TaskPriority taskId={subtask && subtask.id} priority={subtask && subtask.priority ? subtask.priority : null} disabled={isCompleted} createdBy_id={subtask?.createdBy_id} assignedTo_id={subtask?.assignedTo_id} />
                  </div>
                </Grid.Col>
                <Grid.Col className="status flex items-center w-full !py-0 !pl-2" span={2.5}>
                  <div className="w-full flex justify-start" onClick={(e) => e.stopPropagation()}>
                    <TaskStatus taskId={subtask && subtask.id} status={subtask && subtask.internal_status ? subtask.internal_status : null} disabled={isCompleted} taskDbStatus={subtask?.status} createdBy_id={subtask?.createdBy_id} assignedTo_id={subtask?.assignedTo_id} />
                  </div>
                </Grid.Col>
                <Grid.Col className="tags flex items-center w-full !py-0 !pl-2" span={3.5}>
                  <div className="w-full flex items-center" onClick={(e) => e.stopPropagation()}>
                    <TaskTag taskId={subtask && subtask.id} taskTags={subtask && subtask.tags ? subtask.tags : null} disabled={isCompleted} createdBy_id={subtask?.createdBy_id} assignedTo_id={subtask?.assignedTo_id} />
                  </div>
                </Grid.Col>
              </Grid>
            </div>
            <div className="flex items-center justify-end min-w-28">
              <div className="w-full flex items-center cursor-pointer justify-end pt-1" onClick={(e) => e.stopPropagation()}>
                <TaskActionsMenu actions={['view', 'convert', 'subtask-complete', 'ganttTask', 'delete']} isSubtask taskData={subtask && subtask} />
              </div>
            </div>
          </div>
        </div>

      )}

    </>
  );
};

export default SubtaskContent;