import { useTreatments } from "@splitsoftware/splitio-react";
import { Button, Card, Tabs } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ShopInfoGeneral from "./shop-info.general.component";
import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
import ShopInfoLaborRates from "./shop-info.laborrates.component";
import ShopInfoOrderStatusComponent from "./shop-info.orderstatus.component";
import ShopInfoPartsScan from "./shop-info.parts-scan";
import ShopInfoRbacComponent from "./shop-info.rbac.component";
import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycenters.component";
import ShopInfoROStatusComponent from "./shop-info.rostatus.component";
import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
import { useHistory, useLocation } from "react-router-dom";
import queryString from "query-string";

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

export function ShopInfoComponent({ bodyshop, form, saveLoading }) {
  const { CriticalPartsScanning } = useTreatments(
    ["CriticalPartsScanning"],
    {},
    bodyshop.imexshopid
  );
  const { t } = useTranslation();
  const history = useHistory();
  const location = useLocation();
  const search = queryString.parse(location.search);

  return (
    <Card
      extra={
        <Button
          type="primary"
          loading={saveLoading}
          onClick={() => form.submit()}
        >
          {t("general.actions.save")}
        </Button>
      }
    >
      <Tabs
        defaultActiveKey={search.subtab}
        onChange={(key) =>
          history.push({
            search: `?tab=${search.tab}&subtab=${key}`,
          })
        }
      >
        <Tabs.TabPane key="general" tab={t("bodyshop.labels.shopinfo")}>
          <ShopInfoGeneral form={form} />
        </Tabs.TabPane>
        <Tabs.TabPane key="speedprint" tab={t("bodyshop.labels.speedprint")}>
          <ShopInfoSpeedPrint form={form} />
        </Tabs.TabPane>
        <Tabs.TabPane key="rbac" tab={t("bodyshop.labels.rbac")}>
          <ShopInfoRbacComponent form={form} />
        </Tabs.TabPane>
        <Tabs.TabPane key="roStatus" tab={t("bodyshop.labels.jobstatuses")}>
          <ShopInfoROStatusComponent form={form} />
        </Tabs.TabPane>
        <Tabs.TabPane key="scheduling" tab={t("bodyshop.labels.scheduling")}>
          <ShopInfoSchedulingComponent form={form} />
        </Tabs.TabPane>
        <Tabs.TabPane
          key="orderStatus"
          tab={t("bodyshop.labels.orderstatuses")}
        >
          <ShopInfoOrderStatusComponent form={form} />
        </Tabs.TabPane>
        <Tabs.TabPane
          key="responsibilityCenters"
          tab={t("bodyshop.labels.responsibilitycenters.title")}
        >
          <ShopInfoResponsibilityCenterComponent form={form} />
        </Tabs.TabPane>

        <Tabs.TabPane key="checklists" tab={t("bodyshop.labels.checklists")}>
          <ShopInfoIntakeChecklistComponent form={form} />
        </Tabs.TabPane>
        <Tabs.TabPane key="laborrates" tab={t("bodyshop.labels.laborrates")}>
          <ShopInfoLaborRates form={form} />
        </Tabs.TabPane>
        {CriticalPartsScanning.treatment === "on" && (
          <Tabs.TabPane key="partsscan" tab={t("bodyshop.labels.partsscan")}>
            <ShopInfoPartsScan form={form} />
          </Tabs.TabPane>
        )}
      </Tabs>
    </Card>
  );
}