import { Button } from "@mui/material";
import Field from "./Field";
import { useState } from "react";
import { request } from "@/services/response";
import { alert } from "@/helper";

function SendAnswer({ data }) {
  const [comment, setComment] = useState("");
  const [loading, setLoading] = useState(false);

  const resetData = () => {
    setComment("");
    setLoading(false);
    data.is_open_answer = false;
  };

  const sendReq = () => {
    setLoading(true);
    const body = {
      comment,
      doctor_id: data?.doctor?.id,
      parent: data?.parent,
    };

    request
      .postDoctorComment(body)
      .then(() => {
        alert(
          "success",
          "کامنت شما با موفقیت ثبت شد و پس از تأیید نمایش داده می‌شود."
        );
        resetData();
      })
      .catch(() => {
        alert("error", "خطایی رخ داد! لطفاً دوباره تلاش کنید.");
        resetData();
      });
  };

  return (
    <div
      className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
          ${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
    >
      <Field
        type="text"
        value={comment}
        title="پاسخ شما..."
        isPlaceHolder={true}
        updateValue={(val) => setComment(val)}
      />
      <Button
        loading={loading}
        onClick={sendReq}
        variant="contained"
        className="!p-2 !h-10 !text-[12px] !font-medium sm:!py-[10px] md:!px-[12px] !rounded-[8px]
        !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
      >
        ارسال پاسخ
      </Button>
    </div>
  );
}

export default SendAnswer;