class Team{

    id: string
    name: string
    lineup: Player[]

    constructor(rawData: Object) {
        for (let key in rawData){
            this[key] = rawData[key];
        }
        this.lineup = [];
        for (let p of rawData['lineup']){
            if (p['name']){
                this.lineup.push(new Player(p));
            }
        }
    }

    buildMainHtml(){
        let team = $('#team');
        team.html('');

        for (let player of this.lineup){
            team.append(player.teaserHtml);
        }
        team.append('<hr>');

        let link = $('<a>Open Multi op.gg Link</a>');
        link.attr('href', this.opggLink);
        link.attr('target', '_blank');
        team.append(link);
    }

    get teaserHtml(){
        let logo = $('<img alt="">');
        let src = "";
        if (this['custom_fields']['logo'])
            src = this['custom_fields']['logo']['logo_small'];
        logo.attr("src", src);

        let teamTeaser = $('<div></div>');
        teamTeaser.attr('class', 'team-teaser');
        teamTeaser.append(logo);
        teamTeaser.append('<span>' + this.name + '</span>');
        teamTeaser.on('click', () => {
            this.buildMainHtml();
            $('.team-teaser').css('border-color', '');
            teamTeaser.css('border-color', '#26ac39');
        });

        return teamTeaser;
    }

    get opggLink(){
        let link = 'https://euw.op.gg/multi/query=';
        for (let player of this.lineup){
            link += this.formatForLink(player.summoner_name) + '%2C';
        }
        return link;
    }

    formatForLink(name: string){
        return name.replace(/\s+/g, '');
    }

}

class Player{

    name: string
    summoner_name: string

    constructor(rawData: Object) {
        this.name = rawData['name'];
        this.summoner_name = rawData['custom_fields']['summoner_name'];
        if (!this.summoner_name)
            this.summoner_name = this.name;
    }

    get teaserHtml(){
        let playerTeaser = $('<div></div>');
        playerTeaser.attr('class', 'player-teaser');
        playerTeaser.text(this.summoner_name);

        return playerTeaser;
    }

}