import React from 'react';

import { renderToHtml } from '../../services';

import {
  GuideSectionTypes,
} from '../../components';

import {
  EuiButton,
  EuiCode,
} from '../../../../src/components';

import ToastList, { addToast } from './toast_list';
const toastListSource = require('!!raw-loader!./toast_list');
const toastListHtml = renderToHtml(ToastList);

import Default from './default';
const defaultSource = require('!!raw-loader!./default');
const defaultHtml = renderToHtml(Default);

import Info from './info';
const infoSource = require('!!raw-loader!./info');
const infoHtml = renderToHtml(Info);

import Success from './success';
const successSource = require('!!raw-loader!./success');
const successHtml = renderToHtml(Success);

import Warning from './warning';
const warningSource = require('!!raw-loader!./warning');
const warningHtml = renderToHtml(Warning);

import Danger from './danger';
const dangerSource = require('!!raw-loader!./danger');
const dangerHtml = renderToHtml(Danger);

export const ToastExample = {
  title: 'Toast',
  sections: [{
    title: 'ToastList',
    source: [{
      type: GuideSectionTypes.JS,
      code: toastListSource,
    }, {
      type: GuideSectionTypes.HTML,
      code: toastListHtml,
    }],
    demo: (
      <div style={{ width: 320 }}>
        <EuiButton onClick={addToast}>
          Add toast to global toast list
        </EuiButton>

        <ToastList />
      </div>
    ),
  }, {
    title: 'Default',
    source: [{
      type: GuideSectionTypes.JS,
      code: defaultSource,
    }, {
      type: GuideSectionTypes.HTML,
      code: defaultHtml,
    }],
    text: (
      <div>
        <p>
          <EuiCode>EuiToast</EuiCode> allows for small notes that appear in
          the bottom right of the screen. They should be used for emphemeral,
          live actions (think <strong>save complete</strong> or
          <strong>something just finished right now</strong>).
        </p>
        <p>They should not be used for historical actions
          (<strong>your report built 30 minutes ago</strong>).
          This means that a user should never be greated with toasts when
          starting a session. Toasts should be brief and avoid long paragraphs
          of text or titling.
        </p>
      </div>
    ),
    demo: (
      <div style={{ width: 320 }}>
        <Default />
      </div>
    ),
  }, {
    title: 'Info',
    source: [{
      type: GuideSectionTypes.JS,
      code: infoSource,
    }, {
      type: GuideSectionTypes.HTML,
      code: infoHtml,
    }],
    text: (
      <p>
        Setting <EuiCode>type=&quot;info&quot;</EuiCode>.
      </p>
    ),
    demo: (
      <div style={{ width: 320 }}>
        <Info />
      </div>
    ),
  }, {
    title: 'Success',
    source: [{
      type: GuideSectionTypes.JS,
      code: successSource,
    }, {
      type: GuideSectionTypes.HTML,
      code: successHtml,
    }],
    text: (
      <p>
        Setting <EuiCode>type=&quot;success&quot;</EuiCode>.
      </p>
    ),
    demo: (
      <div style={{ width: 320 }}>
        <Success />
      </div>
    ),
  }, {
    title: 'Warning',
    source: [{
      type: GuideSectionTypes.JS,
      code: warningSource,
    }, {
      type: GuideSectionTypes.HTML,
      code: warningHtml,
    }],
    text: (
      <p>
        Setting <EuiCode>type=&quot;warning&quot;</EuiCode>.
      </p>
    ),
    demo: (
      <div style={{ width: 320 }}>
        <Warning />
      </div>
    ),
  }, {
    title: 'Danger',
    source: [{
      type: GuideSectionTypes.JS,
      code: dangerSource,
    }, {
      type: GuideSectionTypes.HTML,
      code: dangerHtml,
    }],
    text: (
      <p>
        Setting <EuiCode>type=&quot;danger&quot;</EuiCode>.
      </p>
    ),
    demo: (
      <div style={{ width: 320 }}>
        <Danger />
      </div>
    ),
  }],
};
