import React from 'react';
import {Link} from 'react-router-dom';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import './SeasonSwitch.scss';
import SeasonDetail from '../SeasonDetail/SeasonDetail';
import {IUserListProperties} from "../UserList/UserList";

const SeasonSwitch: React.FC<IUserListProperties> = (props: IUserListProperties) => {
    const seasonId = Number(props.userStats.seasonId)
    const maxSeasonId = Number(props.userStats.maxSeasonId)

    return (
        <div className={"SeasonSwitch"} data-testid="SeasonSwitch">
            {
                seasonId > 1
                && (props.enabled
                  && <Link to={"/season/" + (seasonId - 1)} onClick={() => {
                    console.log("nothing happens")  
                    props.onSeasonIdChange('' + (seasonId - 1))}}>
                        <FontAwesomeIcon icon="arrow-circle-left"/>
                    </Link>
                  || <Link to={""} onClick={(e) => {
                    console.log("nothing happens2")  
                      e.preventDefault()}}>
                      <FontAwesomeIcon icon="arrow-circle-left"/>
                  </Link>)
            }

            <SeasonDetail {...props} />

            {
                seasonId < maxSeasonId
                && (props.enabled
                  ? <Link to={"/season/" + (seasonId + 1)} onClick={() => props.onSeasonIdChange('' + (seasonId + 1))}>
                        <FontAwesomeIcon icon="arrow-circle-right"/>
                    </Link>
                  : <Link to={""} onClick={(e) => e.preventDefault()}>
                      <FontAwesomeIcon icon="arrow-circle-right"/>
                  </Link>)
            }
        </div>
    )
}

export default SeasonSwitch;