import { PlusOutlined } from "@ant-design/icons";
import { useMutation } from "@apollo/client/react";
import { Input, Spin, Tag, Tooltip } from "antd";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors.js";
import { connect } from "react-redux";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

const mapDispatchToProps = () => ({});

export function ChatLabel({ conversation, bodyshop }) {
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(conversation.label);
  const { socket } = useSocket();
  const notification = useNotification();

  const { t } = useTranslation();
  const [updateLabel] = useMutation(UPDATE_CONVERSATION_LABEL);

  const handleSave = async () => {
    setLoading(true);
    try {
      const response = await updateLabel({
        variables: { id: conversation.id, label: value }
      });
      if (response.errors) {
        notification.error({
          title: t("messages.errors.updatinglabel", {
            error: JSON.stringify(response.errors)
          })
        });
      } else {
        if (socket) {
          socket.emit("conversation-modified", {
            type: "label-updated",
            conversationId: conversation.id,
            bodyshopId: bodyshop.id,
            label: value
          });
        }
        setEditing(false);
      }
    } catch (error) {
      notification.error({
        title: t("messages.errors.updatinglabel", {
          error: JSON.stringify(error)
        })
      });
    } finally {
      setLoading(false);
    }
  };
  if (editing) {
    return (
      <div>
        <Input autoFocus value={value} onChange={(e) => setValue(e.target.value)} onBlur={handleSave} allowClear />
        {loading && <Spin size="small" />}
      </div>
    );
  } else {
    return conversation.label && conversation.label.trim() !== "" ? (
      <Tag style={{ cursor: "pointer" }} onClick={() => setEditing(true)}>
        {conversation.label}
      </Tag>
    ) : (
      <Tooltip title={t("messaging.labels.addlabel")}>
        <PlusOutlined style={{ cursor: "pointer" }} onClick={() => setEditing(true)} />
      </Tooltip>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ChatLabel);