import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import dayjs from "../../utils/day";
import ScoreboardDayStat from "../scoreboard-day-stats/scoreboard-day-stats.component";
import { Col, Row } from "antd";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function ScoreboardLastDays({ bodyshop, sbEntriesByDate }) {
  const { lastNumberWorkingDays } = bodyshop.scoreboard_target;

  const ArrayOfDate = [];
  for (var i = lastNumberWorkingDays - 1; i >= 0; i--) {
    ArrayOfDate.push(dayjs().businessDaysSubtract(i, "day").format("YYYY-MM-DD"));
  }

  return (
    <Row>
      {ArrayOfDate.map((a) => (
        <Col span={2} key={a}>
          {sbEntriesByDate ? <ScoreboardDayStat date={a} entries={sbEntriesByDate[a] || []} /> : <LoadingSkeleton />}
        </Col>
      ))}
    </Row>
  );
}

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