import { message as Message, createMessage } from '../deploy/message.js';

export default {
  title: 'ui/message',
  tags: ['autodocs'],
  description: 'Message component',
  render: ({ label, fn, ...args }) => {
    const div = createMessage(label, { type: 'success' });
    div.addEventListener('click', () => {
      Message.success('Hello World', 2000);
    });
    div.style.border = '1px solid #000';
    const uiMessage = document.createElement('div');
    uiMessage.style = 'display: flex;gap:10px; flex-direction: column;background: #f0f0f0; padding: 20px';
    uiMessage.appendChild(div);

    const info = createMessage('Info', { type: 'info' });
    info.style.border = '1px solid #000';
    info.addEventListener('click', () => {
      Message.info('Hello World', 1000);
    });
    uiMessage.appendChild(info);

    const error = createMessage('Error', { type: 'error' });
    error.style.border = '1px solid #000';
    error.addEventListener('click', () => {
      Message.error('Hello World', 1500);
    });
    uiMessage.appendChild(error);

    const warning = createMessage('Warning', { type: 'warning' });
    warning.style.border = '1px solid #000';
    warning.addEventListener('click', () => {
      Message.warning('Hello World', 3000);
    });
    uiMessage.appendChild(warning);

    const loading = createMessage('Loading', { type: 'loading' });
    loading.style.border = '1px solid #000';
    loading.addEventListener('click', () => {
      Message.loading('Hello World');
    });
    uiMessage.appendChild(loading);

    return uiMessage;
  },
};

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Success = {
  args: {
    label: 'Success',
    fn: Message.success,
  },
};