import m from 'mithril';
import { Button, Icon, Icons, List, ListItem, PopoverMenu, MenuItem } from '@/';
import { Example } from '@shared/examples';

const EXAMPLE_SRC = 'components/list/examples/complex.ts';

const data = [
  'List item 1',
  'List item 2',
  'List item 3',
  'List item 4'
];

export class ListComplexExample {
  public view() {
    return m(Example, { src: EXAMPLE_SRC }, [
      m(List, data.map(item => m(ListItem, {
        contentLeft: m(Icon, { name: Icons.LINK }),
        contentRight: m(PopoverMenu, {
          closeOnContentClick: true,
          content: [
            m(MenuItem, {
              iconLeft: Icons.EDIT,
              label: 'Edit'
            }),
            m(MenuItem, {
              iconLeft: Icons.TRASH_2,
              label: 'Delete',
              intent: 'negative'
            })
          ],
          trigger: m(Button, {
            iconLeft: Icons.MORE_HORIZONTAL,
            size: 'xs'
          }),
          position: 'bottom-end'
        }),
        label: item
      })))
    ]);
  }
}