import m from 'mithril';
import { EmptyState, Icons, Icon, Input, Switch } from '@/';
import { Example } from '@shared/examples';

const EXAMPLE_SRC = 'components/empty-state/examples/index.ts';

export class EmptyStateExample {
  private hasIcon = true;
  private hasHeader = true;
  private hasContent = true;
  private fill = true;

  public view() {
    return m(Example, { options: this.renderOptions(), center: false, src: EXAMPLE_SRC }, [
      m(EmptyState, {
        icon: this.hasIcon ? Icons.ARCHIVE : undefined,
        header: this.hasHeader && 'No search results found.',
        content: this.hasContent && m(Input, {
          contentLeft: m(Icon, { name: Icons.SEARCH }),
          placeholder: 'Search results...'
        }),
        fill: this.fill
      })
    ]);
  }

  private renderOptions() {
    return [
      m(Switch, {
        checked: this.hasIcon,
        label: 'Icon',
        onchange: () => this.hasIcon = !this.hasIcon
      }),

      m(Switch, {
        checked: this.hasHeader,
        label: 'Header',
        onchange: () => this.hasHeader = !this.hasHeader
      }),

      m(Switch, {
        checked: this.hasContent,
        label: 'Content',
        onchange: () => this.hasContent = !this.hasContent
      }),

      m(Switch, {
        checked: this.fill,
        label: 'Fill',
        onchange: () => this.fill = !this.fill
      })
    ];
  }
}