import React, {useEffect, useState} from "react";
import {useProfile} from "../../hooks/useProfile";
import moment from "moment";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {TasksRepository} from "../../repositories/TaskRepository";
import showToast from "../../services/toastService";


const schema = z.object({
    comment: z.string().min(1, "Comment cannot be empty"),
  });

const ReportTaskComments = ( {commentsData, closeModal} ) =>
{
  const [loading,setloading]=useState(false)
  const {profile} = useProfile()
  const [comments,setComment] = useState([])
    const {
      register,
      handleSubmit,
      formState: { errors },reset
    } = useForm({
      resolver: zodResolver(schema),
    });

  useEffect( () =>
  {
    setComment(commentsData?.comments
    )
  }, [commentsData] )
  const isLoggedUser = ( usrId ) => profile?.employeeInfo.id;

  const onSubmit = async(data) =>
  {
    let sendComment = {
      ...data,
      taskAllocationId: commentsData?.id,
      commentDate: new Date().toISOString(),
      
    }

    try
    {
      setloading(true)
      // const resp = await TasksRepository.taskComments( sendComment );
      // console.timeLog( resp )
      reset()
      setloading(false)
      showToast( "Successfully Sent", "success" )
      closeModal()
    } catch ( err )
    {
      setloading(false)
      showToast(error.response.data?.message || "Something wrong","error")
   }
  
  }
  return (
    <div
      className="modal-dialog modal-md modal-simple report-task-comments-modal"
      role="document"
    >
      <div className="modal-content">
        <div className="modal-body px-1">
          <button
            type="button"
            className="btn-close"
            onClick={closeModal}
            aria-label="Close"
          ></button>
          <div className="container  ">

            {
             comments && comments.map( ( data ) =>
             (
                <div className="text-start" key={data.id}>  
                <div class={`li-wrapper d-flex justify-content-${isLoggedUser(data?.employee?.id) ? "end":"start"} align-items-start`}>
                      <div class="avatar avatar-xs me-1">
                        <span class="avatar-initial rounded-circle bg-label-success">
                          M
                        </span>
                      </div>
                      <div class="text-start py-0">
                        <p class="mb-0">
                       <strong>{ `${data?.employee?.firstName} ${data?.employee?.lastName}`}</strong>
                        </p>
                     <small style={{fontSize: "10px"}}>{ moment(data?.commentDate).fromNow()}</small>
                      </div>
                  </div> 
                 <p className={`ms-${ isLoggedUser( data?.employee?.id ) ? "0 text-end me-6" : "6 " } mt-1`}>{ data?.comment
                 }</p>
                </div>
             ))
          }
            {/* by other users */}
            {/* <div className="text-start">  
            <div class="li-wrapper d-flex justify-content-start align-items-start">
                  <div class="avatar avatar-xs me-1">
                    <span class="avatar-initial rounded-circle bg-label-success">
                      M
                    </span>
                  </div>
                  <div class="text-start py-0">
                    <p class="mb-0">
                      <strong>Mahajan</strong>
                    </p>
                    <small style={{ fontSize: "10px" }}>2 hour ago</small>
                  </div>
              </div> 
              <p className="ms-6 mt-1">Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hov </p>
            </div> */}

            {/* by login usrer */}
            {/* <div className="text-start">  
            <div class="li-wrapper d-flex justify-content-end align-items-start">
                  <div class="avatar avatar-xs me-1">
                    <span class="avatar-initial rounded-circle bg-label-success">
                      M
                    </span>
                  </div>
                  <div class="text-start py-0">
                    <p class="mb-0">
                      <strong>Pramod Mahajan</strong>
                    </p>
                    <small style={{ fontSize: "10px" }}>2 hour ago</small>
                  </div>
              </div> 
              <p className="ms-6 mt-1">Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hov </p>
            </div> */}
            <form onSubmit={handleSubmit( onSubmit )}>
            <textarea
              {...register("comment")}
              className="form-control"
              id="exampleFormControlTextarea1"
              rows="1"
              placeholder="Enter comment"
            />
            {errors.comment && (
              <div className="danger-text">{errors.comment.message}</div>
              )}
              <div class="text-end my-1">
           
           <button type="button" class="btn btn-sm btn-secondary" onClick={closeModal} data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-sm btn-primary ms-2">{ loading ? "Sending...":"Comment"}</button>
         </div>
            </form>
            
            
          </div>
        </div>
      </div>
    </div>
  );
};

export default ReportTaskComments;
