import React from 'react';

import { Notice, NoticeTable } from './notice-table';

export default {
  title: 'Tables | NoticeTable',
};

const notices: Notice[] = [
  {
    type: 'error',
    line: 3,
    message: 'This must be fixed now!',
  },
  {
    type: 'warning',
    line: 10,
    message: 'This is a small nitpick',
  },
  {
    type: 'warning',
    line: 40,
    message: "Another small warning because you didn't the right thing",
  },
  {
    type: 'error',
    line: 3212,
    message:
      'This is a really, really, really, long error message and I hope it makes sense ' +
      "because it's just made up of random thoughts and things. But, don't let that fool you " +
      "it's really important and you should fix it as soon as possible!",
  },
];

export const _default = () => (
  <NoticeTable
    notices={notices}
    onClick={n => window.alert(n.message)}
    onVisibilityToggle={v => console.log('Visible?', v)}
  />
);

export const manyItems = () => {
  const notices: Notice[] = [];

  for (let i = 0; i < 100; i++) {
    notices.push({
      type: 'error',
      line: i,
      message: 'This is message ' + i,
    });
  }

  return (
    <NoticeTable
      notices={notices}
      onClick={n => window.alert(n.message)}
      onVisibilityToggle={v => console.log('Visible?', v)}
    />
  );
};
