import React, { useMemo } from "react";
import { Row, Col, Tag, Tooltip } from "antd";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobPartsQueueCount);

export function JobPartsQueueCount({ bodyshop, parts }) {
  const partsStatus = useMemo(() => {
    if (!parts) return null;
    return parts.reduce(
      (acc, val) => {
        if (val.part_type === "PAS" || val.part_type === "PASL") return acc;
        acc.total = acc.total + val.count;
        acc[val.status] = acc[val.status] + val.count;

        return acc;
      },
      {
        total: 0,
        null: 0,
        [bodyshop.md_order_statuses.default_bo]: 0,
        [bodyshop.md_order_statuses.default_ordered]: 0,
        [bodyshop.md_order_statuses.default_received]: 0,
        [bodyshop.md_order_statuses.default_returned]: 0,
      }
    );
  }, [bodyshop, parts]);

  if (!parts) return null;

  return (
    <Row>
      <Col span={4}>
        <Tooltip title="Total">
          <Tag>{partsStatus.total}</Tag>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip title="No Status">
          <Tag color="gold">{partsStatus["null"]}</Tag>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip title={bodyshop.md_order_statuses.default_ordered}>
          <Tag color="blue">
            {partsStatus[bodyshop.md_order_statuses.default_ordered]}
          </Tag>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip title={bodyshop.md_order_statuses.default_received}>
          <Tag color="green">
            {partsStatus[bodyshop.md_order_statuses.default_received]}
          </Tag>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip title={bodyshop.md_order_statuses.default_returned}>
          <Tag color="orange">
            {partsStatus[bodyshop.md_order_statuses.default_returned]}
          </Tag>
        </Tooltip>
      </Col>
      <Col span={4}>
        <Tooltip title={bodyshop.md_order_statuses.default_bo}>
          <Tag color="red">
            {partsStatus[bodyshop.md_order_statuses.default_bo]}
          </Tag>
        </Tooltip>
      </Col>
    </Row>
  );
}