import { AlertFilled, DownOutlined, LoadingOutlined } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Dropdown, Space, Tooltip } from "antd";
import React, { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { UPDATE_JOB } from "../../../graphql/jobs.queries";
import ipcTypes from "../../../ipc.types";
import { selectBodyshop } from "../../../redux/user/user.selectors";
import { antdMessage as message } from "../../../util/antdFeedback";
import GroupVerifySwitch from "../group-verify-switch/group-verify-switch.component";
import JobsGroupModalMolecule from "../jobs-group-modal/jobs-group-modal.molecule";
import { WhichMPIRulesetToApply } from "../../../util/constants";
import SGIRccSwitch from "../sgi-rcc-switch/sgi-rcc-switch.component";
const { ipcRenderer } = window;

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobGroupMolecule);

export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
  const [loading, setLoading] = useState(false);
  const [updateJob] = useMutation(UPDATE_JOB);

  const handleMenuClick = async (value) => {
    ipcRenderer.send(ipcTypes.app.toMain.track, {
      event: "CHANGE_VEHICLE_GROUP",
      vehicle: `${job.v_model_yr} ${job.v_makedesc} ${job.v_model} (${job.v_type})`,
      oldGroup: group,
      newGroup: value.key
    });
    setLoading(true);
    const result = await updateJob({
      variables: { jobId: jobId, job: { group: value.key } }
    });

    if (!result.errors) {
      message.success("Vehicle group updated.");
    } else {
      message.error("Error updating job.");
    }
    setLoading(false);
  };

  const MPIRulesetToApply = WhichMPIRulesetToApply(job.close_date);
  const MPImenu =
    MPIRulesetToApply === "V3"
      ? {
          onClick: handleMenuClick,
          items: [
            { label: "Group 1", key: "Group 1", value: "Group 1" },
            { label: "Group 2", key: "Group 2", value: "Group 2" },
            { label: "Group 3", key: "Group 3", value: "Group 3" },
            { label: "Group 4", key: "Group 4", value: "Group 4" },
            { label: "Group 5", key: "Group 5", value: "Group 5" },
            { label: "Group 6", key: "Group 6", value: "Group 6" },
            { label: "Group 7", key: "Group 7", value: "Group 7" },
            { label: "Group 8", key: "Group 8", value: "Group 8" },
            { label: "Group 9", key: "Group 9", value: "Group 9" },
            { label: "Group 10", key: "Group 10", value: "Group 10" },
            { label: "Group 11", key: "Group 11", value: "Group 11" },
            { label: "Group 12", key: "Group 12", value: "Group 12" },
            { label: "Default", key: "Default", value: "Default" }
          ]
        }
      : {
          onClick: handleMenuClick,
          items: bodyshop.groups.map((g) => ({ key: g, title: g, label: g }))
        };
  const SGImenu = {
    onClick: handleMenuClick,
    items: [{ label: "Default", key: "Default", value: "Default" }]
  };

  const menuToUse = bodyshop.ins_rule_set === "MPI" ? MPImenu : SGImenu;
  return (
    <Space align="center" wrap>
      <Dropdown menu={menuToUse} trigger={["click"]}>
        <a href=" #" onClick={(e) => e.preventDefault()}>
          {group}
          <DownOutlined style={{ marginLeft: ".2rem" }} />
        </a>
      </Dropdown>
      {!group && (
        <div style={{ marginLeft: ".2rem" }}>
          <AlertFilled style={{ color: "tomato" }} className="blink_me" />
          <span style={{ color: "tomato" }}>No group set.</span>
        </div>
      )}
      {bodyshop.ins_rule_set === "MPI" && group && (
        <div style={{ marginLeft: ".2rem" }}>
          <GroupVerifySwitch job={job} loading={loading} loadingCallback={setLoading} />
        </div>
      )}

      {bodyshop.ins_rule_set === "SGI" && (
        <Tooltip title="Is this an RCC job?">
          <SGIRccSwitch job={job} loading={loading} loadingCallback={setLoading} />
        </Tooltip>
      )}
      <JobsGroupModalMolecule job={job} />

      {loading && <LoadingOutlined />}
    </Space>
  );
}
