import { PushpinFilled, PushpinOutlined } from "@ant-design/icons";
import { useMutation } from "@apollo/client/react";
import { UPDATE_NOTE } from "../../graphql/notes.queries";

function JobNotesPinToggle({ note }) {
  const [updateNote] = useMutation(UPDATE_NOTE);

  const handlePinToggle = () => {
    updateNote({
      variables: {
        noteId: note.id,
        note: { pinned: !note.pinned }
      },
      refetchQueries: ["GET_JOB_BY_PK", "QUERY_JOB_CARD_DETAILS", "QUERY_PARTS_QUEUE_CARD_DETAILS"]
    });
  };

  return note.pinned ? (
    <PushpinFilled size="large" onClick={handlePinToggle} style={{ color: "gold" }} />
  ) : (
    <PushpinOutlined size="large" onClick={handlePinToggle} />
  );
}

export default JobNotesPinToggle;