# Source: frontend/src/components/pages/MyTeam.component.js

    import {Component} from '../../../lib/vues6.js'
    import {GridCellRenderType} from '../Grid.component.js'
    import {api} from '../../module/api.js'

    const template = `
    <div class="page-my-team">
        <div class="header">
            <div class="left team-name">
                <h2>My Team - </h2><input placeholder="Click to edit team name..." type="text" v-model="team_name">
            </div>
            <div class="right">
                <span class="save-text" style="margin-right: 20px; color: #555555; font-style: italic;">{{ save_text }}</span><button @click="save_changes()">Save</button>
            </div>
        </div>
        <div class="body" style="display: flex; flex-direction: row; margin-left: 10px; padding-bottom: 50px;" v-if="show_body">
            <app-grid
                :column_defs="overall_column_defs"
                :data="overall_data"
                :show_row_numbers="true"
                style="flex: 1;"
            ></app-grid>
            <div class="lineup-grids" style="margin-left: 30px; margin-right: 10px; flex: 1;">
                <h3>Starting Lineup</h3>
                <app-grid
                    :column_defs="lineup_column_defs"
                    :data="starting_players"
                    :show_row_numbers="false"
                ></app-grid>

                <h3>Bench</h3>
                <app-grid
                    :column_defs="lineup_column_defs"
                    :data="bench_players"
                    :show_row_numbers="false"
                ></app-grid>
            </div>
        </div>
    </div>
    `

    /**
     * Component representing the my-team page.
     * @extends Component
     */
    class MyTeamComponent extends Component {
        static get selector() { return 'page-my-team' }
        static get template() { return template }
        static get props() { return [] }

        /**
         * Original team name to compare against.
         */
        _original_team_name = ''

        /**
         * The team name.
         * @type {string}
         */
        team_name = ''

        /**
         * The text next to the save button.
         * @type {string}
         */
        save_text = 'All changes saved.'

        /**
         * If true, the body of the page will be shown. Otherwise, hidden.
         * This is used to refresh the entire component at once.
         * @type {boolean}
         */
        show_body = true

        /**
         * The player currently being moved. If none, then will be set to undefined.
         * @type {undefined}
         */
        moving_player = undefined

        /**
         * Array of players filling starting line up positions. If no player is in
         * a position, then only the "postition" key will be set.
         * @type {object[]}
         */
        starting_players = []

        /**
         * Players on the bench.
         * @type {object[]}
         */
        bench_players = []

        /**
         * Column definitions for the starting/bench lineup grids.
         * @type {object[]}
         */
        lineup_column_defs = [
            {
                header: 'POS',
                key: 'position',
            },
            {
                header: 'Player',
                key: 'name',
                type: GridCellRenderType.HTML,
                renderer: (_, data) => {
                    if ( !data.name ) {
                        return `<i style="color: darkgrey">none</i>`
                    } else {
                        return `
                            <div class="center">
                                <img src="${data.image}" alt="${data.name}" height="50" style="border-radius: 50%">
                                <span>${data.name} (#${data.number})</span>
                            </div>
                        `
                    }
                },
            },
            {
                header: '',
                key: 'name',
                type: GridCellRenderType.Component,
                component: Vue.component('app-action-button'),
                button_color: (row, col) => this.moving_player ? '#CC5746' : '#0582CA',
                button_text: (row, col) => {
                    return this.moving_player ? 'Here' : 'Move'
                },
                button_hidden: (row, col) => {
                    if ( this.moving_player && this.moving_player.name !== row.name ) return false;
                    if ( !row.name ) return true;
                    return this.moving_player && this.moving_player.name === row.name;
                },
                on_click: (row, col) => {
                    if ( !this.moving_player ) {
                        this.moving_player = row;
                    } else {
                        const old_row = {...row};
                        const moved_row = {...this.moving_player};

                        for ( const prop in moved_row ) {
                            if ( prop === 'position' ) continue;
                            row[prop] = moved_row[prop]
                        }

                        for ( const prop in moved_row ) {
                            if ( prop === 'position' ) continue;
                            this.moving_player[prop] = old_row[prop]
                        }

                        this.moving_player = undefined;
                        this.$_vue_inst.mark_dirty();
                    }

                    this.$_vue_inst.update();  // $_vue_inst refers to the Vue.component instance, not the data class.
                },
            },
        ]

        /**
         * Column definitions for the overall team grid.
         * @type {object[]}
         */
        overall_column_defs = [
            {
                header: 'Name',
                key: 'name',
                type: GridCellRenderType.HTML,
                renderer: (_, data) => `
                    <div class="center">
                        <img src="${data.image}" alt="${data.name}" height="50" style="border-radius: 50%">
                        <span>${data.name} (#${data.number})</span>
                    </div>
                `,
            },
            {
                header: 'POS',
                key: 'position',
            },
            {
                header: 'ECR',
                title: 'Expected Coverage Rating',
                key: 'ecr',
            },
        ]

        /**
         * Data for the overall team grid (list of user's team players).
         * @type {object[]}
         */
        overall_data = []

        /**
         * Called when the component is instantiated. Initializes the bench players data.
         * @return {Promise<void>}
         */
        async vue_on_create() {
            console.log('api', api)
            const [my_team, lineup] = await Promise.all([api.get_my_team(), api.get_my_team_current_lineup()])
            this.team_name = this._original_team_name = my_team.team_name
            this.overall_data = await api.get_my_team_players()
            this.bench_players = lineup.benched_players
            this.starting_players = lineup.starting_players

            setTimeout(() => {
                this.update();
            }, 500);
        }

        /**
         * Force re-render the entire component by briefly hiding it.
         */
        update() {
            this.show_body = false;

            this.$nextTick(() => {
                this.show_body = true;
            });
        }

        mark_dirty() {
            this.save_text = 'Unsaved changes'
        }

        /**
         * Fired when the team name changes. Marks the data as needing a save.
         */
        watch_team_name() {
            if ( this.team_name !== this._original_team_name )
                this.mark_dirty()
        }

        async save_changes() {
            this.save_text = 'Saving changes...'

            // Save the team name
            const team_save_result = await api.save_my_team({ team_name: this.team_name })
            this.team_name = this._original_team_name = team_save_result.team_name

            // Save the lineup
            const lineup_data = {
                starting_players: this.starting_players,
                benched_players: this.bench_players,
            }

            const lineup_save_result = await api.save_my_team_lineup(lineup_data)
            this.bench_players = lineup_save_result.benched_players
            this.starting_players = lineup_save_result.starting_players

            this.save_text = 'All changes saved.'
            this.update()
        }
    }

    export default MyTeamComponent