import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import { Stat } from "./stat";

import { getStats } from "../../actions/admins";

const StatsConnected = ({ stats, getStats }) => {
  useEffect(() => {
    getStats();
  }, [getStats]);

  return (
    <div className="row d-flex flex-wrap">
      <Stat
        name="Movies"
        count={stats.get("movies_count")}
        torrentCount={stats.get("movies_torrents_count")}
        torrentCountById={stats.get("movies_torrents_count_by_id")}
      />
      <Stat
        name="Shows"
        count={stats.get("shows_count")}
        torrentCount={stats.get("episodes_torrents_count")}
        torrentCountById={stats.get("shows_torrents_count_by_id")}
      />
      <Stat
        name="Episodes"
        count={stats.get("episodes_count")}
        torrentCount={stats.get("episodes_torrents_count")}
        torrentCountById={stats.get("episodes_torrents_count_by_id")}
      />
    </div>
  );
};
StatsConnected.propTypes = {
  stats: PropTypes.object,
  getStats: PropTypes.func
};

const mapStateToProps = state => ({
  stats: state.adminStore.get("stats")
});

export const Stats = connect(mapStateToProps, { getStats })(StatsConnected);