import { Avatar, Button, Flex, Select, Text, Textarea, Timeline } from '@mantine/core';
import { IconChevronDown, IconPointFilled } from '@tabler/icons-react';
import React, { Fragment, useState } from 'react';
import { useDisclosure } from '@mantine/hooks';
import { useDispatch, useSelector } from "react-redux";
import { createComment } from "../../../Settings/store/taskSlice";
import ActivityLogs from "./ActivityLogs";
import dayjs from 'dayjs'

const TaskActivity = ({ task, selectedValue, hideInput, hideList }) => {

  const dateTimeFormat = 'DD MMM YYYY hh:mm A'

  if (hideList) return null;

  return (
    <Fragment>
      <Timeline color="gray.3" bulletSize={40} lineWidth={2} style={{ textAlign: 'left', marginTop: '16px' }} classNames={{ itemBullet: 'bg-white' }}>
        {task.logActivities && task.logActivities.length > 0 ? (
          task.logActivities && task.logActivities.length > 0 && task.logActivities.map((activity, index) => (

            <Timeline.Item
              className="mb-4"
              key={activity.id + index}
              bullet={
                <Avatar size={40} radius="xl" src={activity.avatar} alt={activity.user_name} className="border-[3px] border-white shadow-sm" />
              }
            >
              <div className="bg-white border border-[#E2E8F0] shadow-sm rounded-xl p-4 ml-2 mt-[-10px]">
                <div className="flex justify-between items-start mb-2">
                  <div className="flex items-center gap-2">
                    <Text fw={600} fz={15} c="#0F172A">{activity.user_name}</Text>
                    <span className="px-2 py-0.5 rounded-full text-[10px] uppercase font-bold tracking-wide leading-none bg-[#ECFDF5] text-[#059669]">
                      STATUS UPDATE
                    </span>
                  </div>
                  <Text size="xs" c="#64748B">{activity.created_at ? dayjs(activity.created_at).format(dateTimeFormat) : ''}</Text>
                </div>
                <div className="text-sm text-[#475569] bg-[#F8FAFC] p-3 rounded-md w-full border border-[#E2E8F0] mt-2">
                  <ActivityLogs activity={activity} />
                </div>
              </div>
            </Timeline.Item>
          ))
        ) : (
          <Timeline.Item>No Activities</Timeline.Item>
        )}
      </Timeline>
    </Fragment>
  );
};

export default TaskActivity;