import m from 'mithril/hyperscript';
//-
import { Node } from './base';

export class InlineLoading extends Node
{
    prepare(vnode, values, context)
    {
        values.txt_loading = gettext("Loading data...");
        values.txt_loaded = gettext("Data loaded.");
        values.txt_failed = gettext("Loading data failed.");
    }

    render_default(vnode, values, context)
    {
        return (
//##
m('div',
  {
    'data-inline-loading': '',
    'class': 'bx--inline-loading',
    role: 'alert',
    aria-live: 'assertive',
  },
  [
    m('div.bx--inline-loading__animation', null,
      [
        m('div',
          {
            'data-inline-loading-spinner': '',
            'class': 'bx--loading bx--loading--small',
          },
          m('svg',
            {
              'class': 'bx--loading__svg',
              viewBox: '0 0 100 100',
            },
            [
              m('circle.bx--loading__background',
                {
                  cx: '50%',
                  cy: '50%',
                  r: 42,
                }),
              m('circle.bx--loading__stroke',
                {
                  cx: '50%',
                  cy: '50%',
                  r: 42,
                }),
            ])),
        m('svg',
          {
            focusable: false,
            preserveAspectRatio: 'xMidYMid meet',
            xmlns: 'http://www.w3.org/2000/svg',
            fill: 'currentColor',
            'class': 'bx--inline-loading__checkmark-container',
            hidden: '',
            'data-inline-loading-finished': '',
            width: 16,
            height: 16,
            viewBox: '0 0 16 16',
            'aria-hidden': true,
          },
          [
            m('path',
              {
                d: 'M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,\
                    11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,\
                    11z',
              }),
            m('path',
              {
                d: 'M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z',
                'data-icon-path': 'inner-path',
                opacity: 0,
              }),
          ]),
        m('svg',
          {
            focusable: false,
            preserveAspectRatio: 'xMidYMid meet',
            xmlns: 'http://www.w3.org/2000/svg',
            fill: 'currentColor',
            'class': 'bx--inline-loading--error',
            hidden: '',
            'data-inline-loading-error': '',
            width: 20,
            height: 20,
            viewBox: '0 0 32 32',
            'aria-hidden': true,
          },
          m('path',
            {
              d: 'M2,16H2A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm23.15,7.75L8.25,\
                  6.85a12,12,0,0,1,16.9,16.9ZM8.24,25.16A12,12,0,0,1,6.84,\
                  8.27L23.73,25.16a12,12,0,0,1-15.49,0Z',
            })),
      ])
    m('p',
      {
        'data-inline-loading-text-active': '',
        'class': 'bx--inline-loading__text',
      },
      values.txt_loading),
    m('p',
      {
        'data-inline-loading-text-finished': '',
        hidden: '',
        'class': 'bx--inline-loading__text',
      },
      values.txt_loaded),
    m('p',
      {
        'data-inline-loading-text-error': '',
        hidden: '',
        'class': 'bx--inline-loading__text',
      },
      values.txt_failed),
  ])
//##
        );
    }
}
