import React, { Component } from 'react';
import PropTypes from 'prop-types';
import connect from 'react-redux/es/connect/connect';

import collapsible from 'components/common/hoc/collapsible';
import dateUtils from 'utils/date';
import Feature from 'components/common/feature';
import { fetchPlayersAbroad as fetchPlayersAbroadAction } from 'redux/actions/players-abroad';

import PlayersListContainer from './players-list-container';

const baseApiUrl = `/players-abroad`;

class PlayersAbroadWrapper extends Component {
    render() {
        const { isCollapsed, onCollapsibleClick, sport, fetchPlayersAbroad } = this.props;

        if (sport !== 'football') {
            return null;
        }

        return (
            <Feature name="players-abroad">
                <div className="schedule-tournament">
                    <div
                        onClick={onCollapsibleClick}
                        className="schedule-tournament-header players-abroad-header collapsible-header"
                    >
                        <i className="players-abroad-icon" />
                        <div className="tournament-name players-abroad-name">Norske spillere i utlandet</div>
                    </div>
                    {!isCollapsed && (
                        <PlayersListContainer
                            baseApiUrl={baseApiUrl}
                            date={dateUtils.formatDatetimeWithTimezone(`${this.props.date}T12:00:00`)}
                            fetchPlayersAbroad={fetchPlayersAbroad}
                        />
                    )}
                </div>
            </Feature>
        );
    }
}

PlayersAbroadWrapper.propTypes = {
    date: PropTypes.string.isRequired,
    onCollapsibleClick: PropTypes.func,
    isCollapsed: PropTypes.bool,
    sport: PropTypes.string,
    fetchPlayersAbroad: PropTypes.func
};

function mapState(state) {
    const { players } = state;
    return {
        players
    };
}

export default collapsible(
    connect(
        mapState,
        { fetchPlayersAbroad: fetchPlayersAbroadAction }
    )(PlayersAbroadWrapper),
    () => 'players-abroad'
);

// export default collapsible(PlayersAbroadWrapper, () => 'players-abroad');