import React from "react";
import { useMutation } from "@apollo/client";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { Dropdown, Menu, notification } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function JobAltTransportChange({ bodyshop, job }) {
  const [updateJob] = useMutation(UPDATE_JOB);
  const { t } = useTranslation();

  const onClick = async ({ key }) => {
    const result = await updateJob({
      variables: {
        jobId: job.id,
        job: { alt_transport: key === "null" ? null : key },
      },
    });

    if (!!!result.errors) {
      //  notification["success"]({ message: t("appointments.successes.saved") });
    } else {
      notification["error"]({
        message: t("jobs.errors.saving", {
          error: JSON.stringify(result.errors),
        }),
      });
    }
  };
  const menu = (
    <Menu selectedKeys={[job && job.alt_transport]} onClick={onClick}>
      {bodyshop.appt_alt_transport &&
        bodyshop.appt_alt_transport.map((alt) => (
          <Menu.Item key={alt}>{alt}</Menu.Item>
        ))}
      <Menu.Divider />
      <Menu.Item key={"null"}>{t("general.actions.clear")}</Menu.Item>
    </Menu>
  );
  return (
    <Dropdown overlay={menu}>
      <a href=" #" onClick={(e) => e.preventDefault()}>
        <DownOutlined />
      </a>
    </Dropdown>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobAltTransportChange);
