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);