import { HomeFilled } from "@ant-design/icons";
import { Breadcrumb, Col, Row } from "antd";
import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { selectBreadcrumbs } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import GlobalSearch from "../global-search/global-search.component";
import GlobalSearchOs from "../global-search/global-search-os.component";
import "./breadcrumbs.styles.scss";
import { useSplitTreatments } from "@splitsoftware/splitio-react";

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

export function BreadCrumbs({ breadcrumbs, bodyshop }) {
  const {
    treatments: { OpenSearch }
  } = useSplitTreatments({
    attributes: {},
    names: ["OpenSearch"],
    splitKey: bodyshop && bodyshop.imexshopid
  });
  // TODO - Client Update - Technically key is not doing anything here
  return (
    <Row className="breadcrumb-container">
      <Col xs={24} sm={24} md={16}>
        <Breadcrumb
          separator=">"
          items={[
            {
              key: "home",
              title: (
                <Link to={`/manage/`}>
                  <HomeFilled /> {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) || ""}
                </Link>
              )
            },
            ...breadcrumbs.map((item) =>
              item.link
                ? {
                    key: item.label,
                    title: <Link to={item.link}>{item.label}</Link>
                  }
                : {
                    key: item.label,
                    title: item.label
                  }
            )
          ]}
        />
      </Col>
      <Col xs={24} sm={24} md={8}>
        {OpenSearch.treatment === "on" ? <GlobalSearchOs /> : <GlobalSearch />}
      </Col>
    </Row>
  );
}

export default connect(mapStateToProps, null)(BreadCrumbs);