import { HomeFilled } from "@ant-design/icons";
import { Breadcrumb, Row, Col } 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 "./breadcrumbs.styles.scss";

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

export function BreadCrumbs({ breadcrumbs, bodyshop }) {
  return (
    <Row className="breadcrumb-container">
      <Col xs={24} sm={24} md={16}>
        <Breadcrumb separator=">">
          <Breadcrumb.Item>
            <Link to={`/manage`}>
              <HomeFilled />{" "}
              {(bodyshop && bodyshop.shopname && `(${bodyshop.shopname})`) ||
                ""}
            </Link>
          </Breadcrumb.Item>
          {breadcrumbs.map((item) =>
            item.link ? (
              <Breadcrumb.Item key={item.label}>
                <Link to={item.link}>{item.label} </Link>
              </Breadcrumb.Item>
            ) : (
              <Breadcrumb.Item key={item.label}>{item.label}</Breadcrumb.Item>
            )
          )}
        </Breadcrumb>
      </Col>
      <Col xs={24} sm={24} md={8}>
        <GlobalSearch />
      </Col>
    </Row>
  );
}
export default connect(mapStateToProps, null)(BreadCrumbs);