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 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";

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 { t } = useTranslation();
  return (
    <Card
      extra={
        <Button
          type="primary"
          loading={saveLoading}
          onClick={() => form.submit()}
        >
          {t("general.actions.save")}
        </Button>
      }
    >
      <Tabs>
        <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>
      </Tabs>
    </Card>
  );
}
