import { Button, Dropdown, Menu } from "antd";
import React, { useState } from "react";
import { TemplateList } from "../../utils/TemplateConstants";
import { useTranslation } from "react-i18next";
import { GenerateDocument } from "../../utils/RenderTemplate";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const ProdTemplates = TemplateList("production");
const {
  production_by_technician_one,
  production_by_category_one,
  production_by_repair_status_one,
} = TemplateList("special");

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

export function ProductionListPrint({ bodyshop }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  return (
    <Dropdown
      trigger="click"
      overlay={
        <Menu>
          {Object.keys(ProdTemplates).map((key) => (
            <Menu.Item
              key={key}
              onClick={async () => {
                setLoading(true);
                await GenerateDocument(
                  {
                    name: ProdTemplates[key].key,
                    // variables: { id: contract.id },
                  },
                  {},
                  "p"
                );
                setLoading(false);
              }}
            >
              {ProdTemplates[key].title}
            </Menu.Item>
          ))}
          <Menu.SubMenu
            title={t("reportcenter.templates.production_by_technician_one")}
          >
            {bodyshop.employees.map((e) => (
              <Menu.Item
                key={e.id}
                onClick={async () => {
                  setLoading(true);
                  await GenerateDocument(
                    {
                      name: production_by_technician_one.key,
                      variables: { id: e.id },
                    },
                    {},
                    "p"
                  );
                  setLoading(false);
                }}
              >
                {e.first_name} {e.last_name}
              </Menu.Item>
            ))}
          </Menu.SubMenu>
          <Menu.SubMenu
            title={t("reportcenter.templates.production_by_category_one")}
          >
            {bodyshop.md_categories.map((e) => (
              <Menu.Item
                key={e}
                onClick={async () => {
                  setLoading(true);
                  await GenerateDocument(
                    {
                      name: production_by_category_one.key,
                      variables: { category: e },
                    },
                    {},
                    "p"
                  );
                  setLoading(false);
                }}
              >
                {e}
              </Menu.Item>
            ))}
          </Menu.SubMenu>
          <Menu.SubMenu
            title={t("reportcenter.templates.production_by_repair_status_one")}
          >
            {bodyshop.md_ro_statuses.production_statuses.map((e) => (
              <Menu.Item
                key={e}
                onClick={async () => {
                  setLoading(true);
                  await GenerateDocument(
                    {
                      name: production_by_repair_status_one.key,
                      variables: { status: e },
                    },
                    {},
                    "p"
                  );
                  setLoading(false);
                }}
              >
                {e}
              </Menu.Item>
            ))}
          </Menu.SubMenu>
        </Menu>
      }
    >
      <Button loading={loading}>{t("general.labels.print")}</Button>
    </Dropdown>
  );
}
