import { Tabs } from "antd";
import React, { useEffect } from "react";
import { useHistory, useLocation } from "react-router-dom";
import queryString from "query-string";
import { useTranslation } from "react-i18next";
import ShopEmployeesContainer from "../../components/shop-employees/shop-employees.container";
import ShopInfoContainer from "../../components/shop-info/shop-info.container";
import ShopCsiConfig from "../../components/shop-csi-config/shop-csi-config.component";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  setSelectedHeader,
  setBreadcrumbs,
} from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ShopInfoUsersComponent from "../../components/shop-users/shop-users.component";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});

export function ShopPage({ bodyshop, setSelectedHeader, setBreadcrumbs }) {
  const { t } = useTranslation();
  const history = useHistory();
  const search = queryString.parse(useLocation().search);

  useEffect(() => {
    document.title = t("titles.shop");
    setSelectedHeader("shop");
    setBreadcrumbs([
      {
        link: "/manage/shop",
        label: t("titles.bc.shop", { shopname: bodyshop.shopname }),
      },
    ]);
  }, [t, setSelectedHeader, setBreadcrumbs, bodyshop.shopname]);

  return (
    <RbacWrapper action="shop:config">
      <Tabs
        defaultActiveKey={search.tab}
        onChange={(key) => history.push({ search: `?tab=${key}` })}
      >
        <Tabs.TabPane tab={t("bodyshop.labels.shopinfo")} key="info">
          <ShopInfoContainer />
        </Tabs.TabPane>
        <Tabs.TabPane tab={t("bodyshop.labels.employees")} key="employees">
          <ShopEmployeesContainer />
        </Tabs.TabPane>
        <Tabs.TabPane tab={t("bodyshop.labels.licensing")} key="licensing">
          <ShopInfoUsersComponent />
        </Tabs.TabPane>
        <Tabs.TabPane tab={t("bodyshop.labels.csiq")} key="csiq">
          <ShopCsiConfig />
        </Tabs.TabPane>
      </Tabs>
    </RbacWrapper>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(ShopPage);