import m from 'mithril';
import { Table, Switch } from '@/';
import { Example } from '@shared/examples';

const EXAMPLE_SRC = 'components/table/examples/index.ts';

export class TableExample {
  private bordered = true;
  private interactive = true;
  private striped = false;

  public view() {
    return m(Example, { options: this.renderOptions(), src: EXAMPLE_SRC }, [
      m(Table, {
        bordered: this.bordered,
        interactive: this.interactive,
        striped: this.striped
      }, [
          m('tr', [
            m('th', 'Heading 1'),
            m('th', 'Heading 2')
          ]),
          m('tr', [
            m('td', 'Cell 1'),
            m('td', 'Cell 2')
          ]),
          m('tr', [
            m('td', 'Cell 1'),
            m('td', 'Cell 2')
          ]),
          m('tr', [
            m('td', 'Cell 1'),
            m('td', 'Cell 2')
          ])
        ])
    ]);
  }

  private renderOptions() {
    return [
      m(Switch, {
        checked: this.bordered,
        label: 'Bordered',
        onchange: () => this.bordered = !this.bordered
      }),
      m(Switch, {
        checked: this.striped,
        label: 'Striped',
        onchange: () => this.striped = !this.striped
      }),
      m(Switch, {
        checked: this.interactive,
        label: 'Interactive',
        onchange: () => this.interactive = !this.interactive
      })
    ];
  }
}