import { Button, Card, Tabs } from "antd";
import queryString from "query-string";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { useSocket } from "../../contexts/SocketIO/useSocket.js";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ShopInfoGeneral from "../shop-info/shop-info.general.component";
import ShopInfoResponsibilityCenterComponent from "../shop-info/shop-info.responsibilitycenters.component";
import ShopInfoOrderStatusComponent from "../shop-info/shop-info.orderstatus.component";
import ShopInfoNotificationsAutoadd from "../shop-info/shop-info.notifications-autoadd.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

const mapDispatchToProps = () => ({});

export function PartsShopInfoComponent({ bodyshop, form, saveLoading }) {
  const { scenarioNotificationsOn } = useSocket();
  const { t } = useTranslation();
  const history = useNavigate();
  const location = useLocation();
  const search = queryString.parse(location.search);

  // Only include the 4 specific sections requested for parts settings
  const tabItems = [
    {
      key: "general",
      label: t("bodyshop.labels.shopinfo"), // Business Information
      children: <ShopInfoGeneral form={form} />,
      id: "tab-parts-general"
    },
    {
      key: "responsibilityCenters",
      label: t("bodyshop.labels.responsibilitycenters.title"), // Parts Locations
      children: <ShopInfoResponsibilityCenterComponent form={form} />,
      id: "tab-parts-responsibilitycenters"
    },
    {
      key: "orderStatus",
      label: t("bodyshop.labels.orderstatuses"), // Parts Orders Comments
      children: <ShopInfoOrderStatusComponent form={form} />,
      id: "tab-parts-orderstatus"
    }
  ];

  // Only add notifications tab if scenario notifications are enabled (Preset To Emails)
  if (scenarioNotificationsOn) {
    tabItems.push({
      key: "notifications_autoadd",
      label: t("bodyshop.labels.notifications.followers"), // Preset To Emails
      children: <ShopInfoNotificationsAutoadd form={form} bodyshop={bodyshop} />,
      id: "tab-parts-notifications"
    });
  }

  return (
    <Card
      extra={
        <Button type="primary" loading={saveLoading} onClick={() => form.submit()} id="parts-shop-info-save-button">
          {t("general.actions.save")}
        </Button>
      }
    >
      <Tabs
        defaultActiveKey={search.subtab || "general"}
        onChange={(key) =>
          history({
            search: `?tab=${search.tab}&subtab=${key}`
          })
        }
        items={tabItems}
      />
    </Card>
  );
}

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