import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Switch } from "antd";
import { antdMessage as message } from "../../../util/antdFeedback";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { UPDATE_JOB } from "../../../graphql/jobs.queries";
import { toggleSGIRcc } from "../../../redux/reporting/reporting.actions";

const mapStateToProps = createStructuredSelector({});

const mapDispatchToProps = (dispatch) => ({
  toggleSGIRcc: (jobId) => dispatch(toggleSGIRcc(jobId))
});

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

export function SGIRccSwitch({ job, loading, loadingCallback, toggleSGIRcc }) {
  const [updateJob] = useMutation(UPDATE_JOB);

  const handleChange = async (val) => {
    if (loadingCallback) loadingCallback(true);
    const result = await updateJob({
      variables: { jobId: job.id, job: { sgi_rcc: val } }
    });

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

  return (
    <Switch
      checkedChildren="Has RCC"
      unCheckedChildren="No RCC"
      disabled={loading}
      checked={job.sgi_rcc}
      onChange={handleChange}
      title="Replacement Cost Coverage?"
    />
  );
}
