import { CarPlay } from '../CarPlay'
import type { GridTemplate } from './GridTemplate'
import type { ListTemplate } from './ListTemplate'
import { Template, TemplateConfig } from './Template'

type TabBarTemplates = ListTemplate | GridTemplate

export interface TabBarTemplateConfig extends TemplateConfig {
  /**
   * The title displayed in the navigation bar while the tab bar template is visible.
   */
  title?: string
  /**
   * The templates to show as tabs.
   */
  templates: TabBarTemplates[]

  onTemplateSelect(template: TabBarTemplates, e: { templateId: string; selectedTemplateId: string }): void
}

/**/
export class TabBarTemplate extends Template<TabBarTemplateConfig> {
  public get type(): string {
    return 'tabbar'
  }

  constructor(public config: TabBarTemplateConfig) {
    super(config)

    CarPlay.emitter.addListener('didSelectTemplate', (e) => {
      if (config.onTemplateSelect && e.templateId === this.id) {
        const template = config.templates.find((tpl) => tpl.id === e.selectedTemplateId)
        if (!template) {
          return
        }
        config.onTemplateSelect(template, e)
      }
    })
  }

  public updateTemplates = (config: TabBarTemplateConfig) => {
    return CarPlay.bridge.updateTabBarTemplates(this.id, this.parseConfig(config))
  }
}