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

const template = `
<div class="page-league">
  <div class="header">
    <div class="left">
      <h2>League Standings</h2>
    </div>
  </div>
    <app-grid
        :column_defs="column_defs"
        :data="data"
        :show_row_numbers="false"
    ></app-grid>
</div>
`

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

    GridCellRenderType = GridCellRenderType

    /**
     * Column definitions for the league standings grid.
     * @type {object[]}
     */
    column_defs = [
        {
            header: 'Standing',
            type: GridCellRenderType.HTML,
            key: 'standing',
            renderer: (value, row) => {
                return `
                    <h1 id="ranking">
                    Rank: ${row.standing.rank}
                    </h1>
                    <h2 id="record">
                        W/L: ${row.standing.win_loss}
                    </h2>
                `

            }
        },
        {
            header: 'Team',
            type: GridCellRenderType.HTML,
            key: 'team_name',
            renderer: (value, row) => {
                return `
                    <div class="center">
<!--                        <img src="${row.team_image}" alt="${row.team_image}" width="100">-->
                        <span>${row.team_name}</span>
                    </div>
                `
            },
        },
        {
            header: 'Stats',
            key: 'stats',
            type: GridCellRenderType.HTML,
            renderer: (value, row) => {
                const stats = []
                for ( const stat of value ) {
                    stats.push(`
                        <div class="stat">
                            <div class="title">${stat.name}</div>
                            <div>${stat.value}</div>
                        </div>
                    `)
                }

                return `
                    <div class="stats">
                        ${stats.join('\n')}
                    </div>
                `
            },
        },
    ]

    /**
     * Sample data for the league standings grid.
     * @type {object[]}
     */
    data = []

    /**
     * Called when the component is instantiated.
     * @return {Promise<void>}
     */
    async vue_on_create() {
        this.data = await api.get_standings()
    }
}

export default LeagueComponent