import { IUser } from '@api-client/core/models/store/User.js'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import { reactive } from '../../../src/decorators/index.js'
import { UserKind } from '@api-client/core/models/kinds.js'
import { html, TemplateResult } from 'lit'
import '../../../src/elements/user/ui-user-avatar.js'

class ComponentDemoPage extends DemoPage {
  @reactive() accessor user1: IUser
  @reactive() accessor user2: IUser

  constructor() {
    super()
    this.componentName = 'User Avatar'
    this.user1 = {
      key: '1',
      name: 'John Doe',
      email: [{ email: 'john.doe  @example.com', verified: true }],
      picture: {
        url: 'https://i.pravatar.cc/300',
      },
      kind: UserKind,
      status: 'active',
      grantType: 'editor',
      created: new Date('2023-01-01T00:00:00Z').getTime(),
      updated: new Date('2023-01-02T00:00:00Z').getTime(),
    }
    this.user2 = {
      key: '2',
      name: 'John Doe',
      email: [{ email: 'john.doe  @example.com', verified: true }],
      kind: UserKind,
      status: 'active',
      grantType: 'editor',
      created: new Date('2023-01-01T00:00:00Z').getTime(),
      updated: new Date('2023-01-02T00:00:00Z').getTime(),
    }
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="../">Back</a>
      <section class="centered">
        <h3>Full data</h3>
        <ui-user-avatar .user="${this.user1}"></ui-user-avatar>
        <h3>No image</h3>
        <ui-user-avatar .user="${this.user2}"></ui-user-avatar>
        <h3>No user</h3>
        <ui-user-avatar></ui-user-avatar>
        <h3>Custom size</h3>
        <ui-user-avatar style="width: 128px; height: 128px" .user="${this.user1}"></ui-user-avatar>
        <h3>Icon type</h3>
        <ui-user-avatar .user="${this.user1}" type="icon"></ui-user-avatar>
      </section>
    `
  }
}

const instance = new ComponentDemoPage()
instance.render()
