import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

# Toast

<Meta title='Toast' component='fw-toast' />

## Props

<Props of='fw-toast' />

## Usage

### Default

<Preview>
  <Story name='Default'>
    {() => `
    <fw-toast id="default_toast" type="success" content="Successfullly triggered" sticky></fw-toast>
    <fw-button onClick="document.querySelector('#default_toast').trigger()">Trigger</fw-button>
    `}
  </Story>
</Preview>

### Type

<Preview>
  <Story name='Type'>
    {() => `
    <fw-toast id="type_toast"></fw-toast>
    <fw-button onClick="document.querySelector('#type_toast').trigger({type:'success', content: 'Successfullly triggered'})">Success</fw-button>
    <fw-button onClick="document.querySelector('#type_toast').trigger({type:'error', content:'something went wrong!'})">Error</fw-button>
    <fw-button onClick="document.querySelector('#type_toast').trigger({type:'warning', content:'This is a warning!'})">Warning</fw-button>
    <fw-button onClick="document.querySelector('#type_toast').trigger({type:'inprogress', content:'Request is in progress'})">Inprogress</fw-button>
    `}
  </Story>
</Preview>

### Position

<Preview>
  <Story name='position'>
    {() => `
    <div style="margin-top: 100px">
      <fw-button onClick="document.querySelector('#topleft').trigger({position: 'top-left'})">top left</fw-button>
      <fw-toast id="topleft" type="success" position="top-left" content="Successfullly triggered"></fw-toast>
      <fw-button onClick="document.querySelector('#topcenter').trigger({position: 'top-center'})">top center</fw-button>
      <fw-toast id="topcenter" type="success" position="top-center" content="Successfullly triggered"></fw-toast>
      <fw-button onClick="document.querySelector('#topright').trigger({position: 'top-right'})">top right</fw-button>
      <fw-toast id="topright" type="success" position="top-right" content="Successfullly triggered"></fw-toast>
    </div>
    `}
  </Story>
</Preview>

### Action Link

<Preview>
  <Story name='Action Link'>
    {() => `
    <fw-button onClick="document.querySelector('#actionlink_toast').trigger({})">Trigger</fw-button>
    <fw-toast id="actionlink_toast" action-link-text="Undo" type="success" content="Record successfullly deleted"></fw-toast>`}
  </Story>
</Preview>

<Preview>
  <Story name='Custom Content'>
    {() => `<div>
     <fw-toast-message type='success' id="custom-toast" timeout="1000000">
      <div>
       <span class="custom-text">Custom content</span>
       <button onclick="alert('clicked')">custom btn</button>
      </div>
    </fw-toast-message>
    <fw-toast id="right" position="top-right" timeout=1000></fw-toast> 
    <fw-button onClick="document.querySelector('#right').trigger({type:'inprogress', contentref:'#custom-toast',timeout:4000})">Custom Content</fw-button>
      </div>
    `}
  </Story>
</Preview>
