import './theme-chooser-sk-demo.scss';
import { render, html, TemplateResult } from 'lit-html';
import { $$ } from 'common-sk/modules/dom';
import { DARKMODE_LOCALSTORAGE_KEY } from './theme-chooser-sk';
import 'elements-sk/icon/menu-icon-sk';
import '../app-sk';

// Force the element to use the default mode set in the elements attribute.
window.localStorage.removeItem(DARKMODE_LOCALSTORAGE_KEY);

// eslint-disable-next-line import/first
import './theme-chooser-sk';

 interface example {
    background: string;
     color: string;
}

const examples: example[] = [
  {
    background: '--background',
    color: '--on-background',
  },
  {
    background: '--primary',
    color: '--on-primary',
  },
  {
    background: '--on-primary',
    color: '--primary',
  },
  {
    background: '--primary-variant',
    color: '--on-primary',
  },
  {
    background: '--on-primary',
    color: '--primary-variant',
  },
  {
    background: '--secondary',
    color: '--on-secondary',
  },
  {
    background: '--on-secondary',
    color: '--secondary',
  },
  {
    background: '--primary-highlight',
    color: '--on-highlight',
  },
  {
    background: '--secondary-highlight',
    color: '--on-highlight',
  },
  {
    background: '--surface',
    color: '--on-surface',
  },
  {
    background: '--surface-1dp',
    color: '--on-surface',
  },
  {
    background: '--surface-2dp',
    color: '--on-surface',
  },
  {
    background: '--surface',
    color: '--primary',
  },
  {
    background: '--surface-1dp',
    color: '--primary',
  },
  {
    background: '--surface-2dp',
    color: '--primary',
  },
  {
    background: '--surface',
    color: '--secondary',
  },
  {
    background: '--surface-1dp',
    color: '--secondary',
  },
  {
    background: '--surface-2dp',
    color: '--secondary',
  },
  {
    background: '--disabled',
    color: '--on-disabled',
  },
  {
    background: '--error',
    color: '--on-error',
  },
  {
    background: '--failure',
    color: '--on-failure',
  },
  {
    background: '--failure-alpha',
    color: '--on-failure',
  },
  {
    background: '--warning',
    color: '--on-warning',
  },
  {
    background: '--warning-alpha',
    color: '--on-warning',
  },
  {
    background: '--success',
    color: '--on-success',
  },
  {
    background: '--success-alpha',
    color: '--on-success',
  },
  {
    background: '--unexpected',
    color: '--on-surface',
  },
  {
    background: '--unexpected-alpha',
    color: '--on-surface',
  },
  {
    background: '--untriaged',
    color: '--surface',
  },
  {
    background: '--surface',
    color: '--untriaged',
  },
  {
    background: '--positive',
    color: '--surface',
  },
  {
    background: '--surface',
    color: '--positive',
  },

  {
    background: '--negative',
    color: '--surface',
  },
  {
    background: '--surface',
    color: '--negative',
  },
];

const template = (context: example[]): TemplateResult => html`
    ${context.map((ex: example): TemplateResult => html`
    <tr style="background: var(${ex.background})">
      <td style="color: var(${ex.color})">background: var(${ex.background});</td>
      <td style="color: var(${ex.color})">color: var(${ex.color});</td>
    </tr>`)}
`;

render(template(examples), $$('#demotable')!);