como passo pra settempProcedimento esses dados tbm

 <label className={EstiloNovoAtendimento.labelStatus}>
          Status de pagamento:
        </label>
        <div className={EstiloNovoAtendimento.divflex}>
          {procedure.expectedValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Previsto
            </label>
          )}
          {procedure.glossedValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Glosado
            </label>
          )}
          {procedure.paidValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              valor Pago
            </label>
          )}
          {procedure.lostValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Valor Perdido
            </label>
          )}
        </div>

// CardProcedimento.tsx
import React, { useEffect, useState } from "react";
import EstiloNovoAtendimento from "./NovoAtendimento.module.css";
import { AppointmentRequestDTO, ProcedureDTO } from "./types";
import Anexo from "../ui/Anexo";
import { useApi } from "../../lib/doctorApi";

interface Procedimento {
  procedure: ProcedureDTO;
  index: number;
  handleExcluir: (id: string) => void;
  updateProcedimento: (index: number, novosDados: ProcedureDTO) => void;
  isNewAppointment?: boolean;
  atendimento: AppointmentRequestDTO; // Passa o objeto atendimento completo
}

const CardProcedimento: React.FC<Procedimento> = ({
  procedure,
  index,
  updateProcedimento,
  handleExcluir,
  isNewAppointment = false,
  atendimento,
}) => {
  const [procedimento, setProcedimento] = useState<ProcedureDTO>({
    ...procedure,
  });
  const [expectedValue, setExpectedValue] = useState("");
  const [glossedValue, setGlossedValue] = useState("");
  const [paidValue, setPaidValue] = useState("");
  const [lostValue, setLostValue] = useState("");
  const [isEditing, setIsEditing] = useState(false);
  const [tempProcedimento, setTempProcedimento] = useState<ProcedureDTO>({
    ...procedure,
  });

  const api = useApi(); // `useApi` é tratado como estável.
  const [error, setError] = useState<string | null>(null);

  const dataChange: { [key: string]: Function } = {
    expectedValue: setExpectedValue,
    glossedValue: setGlossedValue,
    paidValue: setPaidValue,
    lostValue: setLostValue,
  };

  useEffect(() => {
    setProcedimento({ ...procedure });
    setTempProcedimento({ ...procedure });
  }, []);

  useEffect(() => {
    if (!isEditing && !isNewAppointment) {
      updateProcedimento(index, procedimento);
    }
  }, [procedimento, isEditing, isNewAppointment]);

  useEffect(() => {
    if (isNewAppointment) {
      setIsEditing(true);
    }
  }, [isNewAppointment]);

  // Mapeamento de status
  const statusMap: { [key: string]: string } = {
    draft: "Rascunho",
    glossed: "Glosado",
    validated: "Validado",
    toDerive: "Para Faturar",
    derived: "Faturado",
    lost: "Perdido",
    finished: "Finalizado",
  };

  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    if (isEditing || isNewAppointment) {
      setTempProcedimento((prev) => ({
        ...prev,
        [name]: value,
      }));
    } else {
      setProcedimento((prev) => ({
        ...prev,
        [name]: value,
      }));
    }
  };

  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value;
    const name = e.target.name;

    let numericValue = inputValue.replace(/\D/g, "");
    if (numericValue === "") {
      numericValue = "0";
    }

    const formattedValue = (parseFloat(numericValue) / 100)
      .toFixed(2)
      .replace(".", ",");

    if (dataChange[name]) {
      dataChange[name](formattedValue);
    }

    const parsedValue = parseFloat(
      formattedValue.toString().split(".").join("").split(",").join(".")
    );

    if (isEditing || isNewAppointment) {
      setTempProcedimento((prev) => ({
        ...prev,
        [name]: parsedValue,
      }));
    } else {
      setProcedimento((prev) => ({
        ...prev,
        [name]: parsedValue,
      }));
    }
  };

  const { statusOfActivity = [] } = procedure; // Desestruturação com valor padrão

  const handleStartEdit = () => {
    if (!isNewAppointment && isEditing) {
      handleCancelEdit();
    } else {
      setTempProcedimento({ ...procedimento });
      setIsEditing(true);
    }
  };

  const handleConfirmEdit = async () => {
    setProcedimento(tempProcedimento);
    updateProcedimento(index, tempProcedimento);
    try {
      const requestData = {
        atendimento,
        cbhpmCode: tempProcedimento.cbhpmCode,
        cbhpmName: tempProcedimento.cbhpmName,
        expectedValue: tempProcedimento.expectedValue,
        glossedValue: tempProcedimento.glossedValue,
        lostValue: tempProcedimento.lostValue,
        paidValue: tempProcedimento.paidValue,
        paymentStatus: tempProcedimento.paymentStatus || [], // Mantenha o mesmo formato
        statusOfActivity: tempProcedimento.statusOfActivity || "",
        attachments: tempProcedimento.attachments || [], // Correspondendo à estrutura vista
        // Se precisar de outras propriedades, insira aqui conforme necessário
      };

      const response = await api.post(
        `appointment/${atendimento.id}/update`,
        requestData
      );
      console.log(requestData);
      console.log(atendimento.id);
      // Debug: Confirma a atualização e a resposta
      console.log("Procedimento atualizado com sucesso:", response.data);
      // Aqui você pode, opcionalmente, recarregar a lista de procedimentos
      // fetchAppointments(); // Descomente se necessário
    } catch (error) {
      console.error("Erro ao atualizar procedimento:", error);
      setError(error instanceof Error ? error.message : "Erro desconhecido");
    }

    // Finaliza o processo de edição
    setIsEditing(false);
  };

  const handleCancelEdit = () => {
    setTempProcedimento({ ...procedimento });
    setIsEditing(false);
  };

  return (
    <div className={EstiloNovoAtendimento.Card}>
      <div className={EstiloNovoAtendimento.CardTop}>
        <div>
          <span className={EstiloNovoAtendimento.id}>ID</span>
        </div>
        {!isNewAppointment && (
          <div className={EstiloNovoAtendimento.buttonCard}>
            <button
              onClick={handleStartEdit}
              className={isEditing ? EstiloNovoAtendimento.editing : ""}
            >
              <img
                src="/lapisEditor.png"
                alt="Editar"
                className={EstiloNovoAtendimento.icon}
              />
            </button>
            <button
              onClick={() => handleExcluir(procedure.id)}
              disabled={isEditing}
            >
              <img
                src="/lixeira.png"
                alt="Excluir"
                className={EstiloNovoAtendimento.icon}
              />
            </button>
          </div>
        )}
      </div>

      <div className={EstiloNovoAtendimento.divDoCard}>
        <div className={EstiloNovoAtendimento.organizadorCard}>
          <span>Código personalizado da CBHPM</span>
          <input
            className={`${EstiloNovoAtendimento.inputCard} ${
              isEditing || isNewAppointment ? EstiloNovoAtendimento.editing : ""
            }`}
            type="text"
            name="cbhpmCode"
            value={
              isEditing ? tempProcedimento.cbhpmCode : procedimento.cbhpmCode
            }
            placeholder="Digite o Código..."
            disabled={!isEditing && !isNewAppointment}
            onChange={handleTextChange}
          />
        </div>
        <div className={EstiloNovoAtendimento.organizadorCard}>
          <span>Nome personalizado da CBHPM</span>
          <input
            className={`${EstiloNovoAtendimento.inputCard} ${
              isEditing || isNewAppointment ? EstiloNovoAtendimento.editing : ""
            }`}
            type="text"
            name="cbhpmName"
            value={
              isEditing ? tempProcedimento.cbhpmName : procedimento.cbhpmName
            }
            placeholder="Digite o Nome..."
            disabled={!isEditing && !isNewAppointment}
            onChange={handleTextChange}
          />
        </div>

        <div className={EstiloNovoAtendimento.divflex}>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Previsto
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditing || isNewAppointment
                  ? EstiloNovoAtendimento.editing
                  : ""
              }`}
              type="text"
              name="expectedValue"
              value={
                isEditing
                  ? tempProcedimento.expectedValue
                  : procedimento.expectedValue
              }
              placeholder=""
              disabled={!isEditing && !isNewAppointment}
              onChange={handleValueChange}
            />
          </div>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Glosado
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditing || isNewAppointment
                  ? EstiloNovoAtendimento.editing
                  : ""
              }`}
              type="text"
              name="glossedValue"
              value={
                isEditing
                  ? tempProcedimento.glossedValue
                  : procedimento.glossedValue
              }
              placeholder=""
              disabled={!isEditing && !isNewAppointment}
              onChange={handleValueChange}
            />
          </div>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Perdido
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditing || isNewAppointment
                  ? EstiloNovoAtendimento.editing
                  : ""
              }`}
              type="text"
              name="lostValue"
              value={
                isEditing ? tempProcedimento.lostValue : procedimento.lostValue
              }
              placeholder=""
              disabled={!isEditing && !isNewAppointment}
              onChange={handleValueChange}
            />
          </div>
          <div className={EstiloNovoAtendimento.valores}>
            <label className={EstiloNovoAtendimento.labelinput}>
              Valor Pago
            </label>
            <input
              className={`${EstiloNovoAtendimento.inputValor234} ${
                isEditing || isNewAppointment
                  ? EstiloNovoAtendimento.editing
                  : ""
              }`}
              type="text"
              name="paidValue"
              value={
                isEditing ? tempProcedimento.paidValue : procedimento.paidValue
              }
              placeholder=""
              disabled={!isEditing && !isNewAppointment}
              onChange={handleValueChange}
            />
          </div>
        </div>

        <Anexo
          attachments={
            isEditing ? tempProcedimento.attachments : procedimento.attachments
          }
          setAttachments={(novosAnexos) => {
            if (isEditing) {
              setTempProcedimento((prev) => ({
                ...prev,
                attachments: novosAnexos,
              }));
            } else {
              setProcedimento((prev) => ({
                ...prev,
                attachments: novosAnexos,
              }));
            }
          }}
        />

        <label className={EstiloNovoAtendimento.labelStatus}>
          Status de pagamento:
        </label>
        <div className={EstiloNovoAtendimento.divflex}>
          {procedure.expectedValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Previsto
            </label>
          )}
          {procedure.glossedValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Glosado
            </label>
          )}
          {procedure.paidValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              valor Pago
            </label>
          )}
          {procedure.lostValue > 0 && (
            <label className={EstiloNovoAtendimento.statusPagamento}>
              <img
                src="/cifrao.png"
                alt=""
                className={EstiloNovoAtendimento.iconStatus}
              />
              Valor Perdido
            </label>
          )}
        </div>

        <label className={EstiloNovoAtendimento.labelStatus}>
          Status de atividade:
        </label>
        <div className={EstiloNovoAtendimento.divflex}>
          {Object.keys(statusMap).map((statusItem) => (
            <label
              key={statusItem}
              className={`${EstiloNovoAtendimento.labelBorda}`}
            >
              <input
                type="checkbox"
                className={EstiloNovoAtendimento.customCheckbox}
                value={statusItem}
                checked={
                  isEditing
                    ? tempProcedimento.statusOfActivity === statusItem
                    : statusOfActivity === statusItem
                }
                disabled={!isEditing && !isNewAppointment}
                onChange={(e) => {
                  const isChecked = e.target.checked;
                  if (isEditing || isNewAppointment) {
                    setTempProcedimento((prev) => ({
                      ...prev,
                      statusOfActivity: isChecked
                        ? (statusItem as ProcedureDTO["statusOfActivity"])
                        : "draft",
                    }));
                  } else {
                    setProcedimento((prev) => ({
                      ...prev,
                      statusOfActivity: isChecked
                        ? (statusItem as ProcedureDTO["statusOfActivity"])
                        : "draft",
                    }));
                    updateProcedimento(index, {
                      ...procedure,
                      statusOfActivity: isChecked
                        ? (statusItem as ProcedureDTO["statusOfActivity"])
                        : "draft",
                    });
                  }
                }}
              />
              <span
                className={`${EstiloNovoAtendimento.labelAtividade} ${
                  isEditing || isNewAppointment
                    ? EstiloNovoAtendimento.editing
                    : ""
                }`}
              >
                {statusMap[statusItem]}
              </span>
            </label>
          ))}
        </div>
      </div>
      {isEditing && !isNewAppointment && (
        <div className={EstiloNovoAtendimento.CardBotton}>
          <div className={EstiloNovoAtendimento.botoesEdicao}>
            <button
              onClick={handleConfirmEdit}
              className={EstiloNovoAtendimento.botaoConfirmar}
            >
              Confirmar
            </button>
            <button
              onClick={handleCancelEdit}
              className={EstiloNovoAtendimento.botaoCancelar}
            >
              Cancelar
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default CardProcedimento;