import React from 'react';
import { text } from '@storybook/addon-knobs';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import EmailSelector from './EmailSelector';
import { TextBody } from '../typography';
export default {
  component: EmailSelector,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Form elements/EmailSelector'),
  parameters: {}
};
var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

var validator = function validator(_ref) {
  var email = _ref.email;
  return EMAIL_REGEX.test(email);
};

var suggestions = [{
  email: 'david.brent@dundermiflin.com',
  label: 'David Brent'
}, {
  email: 'david.wallace@dundermiflin.com',
  label: 'David Wallace'
}, {
  email: 'alan.brand@dundermiflin.com',
  label: 'Alan Brand'
}, {
  email: 'robert.mifflin@dundermiflin.com',
  label: 'Robert Mifflin'
}, {
  email: 'robert.dunder@dundermiflin.com',
  label: 'Robert Dunder'
}];
export var basic = function basic() {
  return /*#__PURE__*/React.createElement(EmailSelector, {
    error: text('Error', ''),
    validator: validator,
    defaultSelection: [suggestions[0]],
    suggestions: suggestions
  });
};
export var groupedSuggestions = function groupedSuggestions() {
  return /*#__PURE__*/React.createElement(EmailSelector, {
    error: text('Error', ''),
    validator: validator,
    suggestions: {
      davids: [{
        email: 'david.brent@dundermiflin.com',
        label: 'David Brent'
      }, {
        email: 'david.wallace@dundermiflin.com',
        label: 'David Wallace'
      }],
      roberts: [{
        email: 'robert.mifflin@dundermiflin.com',
        label: 'Robert Mifflin'
      }, {
        email: 'robert.dunder@dundermiflin.com',
        label: 'Robert Dunder'
      }]
    }
  });
};
export var customSuggestions = function customSuggestions() {
  return /*#__PURE__*/React.createElement(EmailSelector, {
    error: text('Error', ''),
    validator: validator,
    suggestions: suggestions,
    renderSuggestion: function renderSuggestion(_ref2) {
      var suggestion = _ref2.suggestion,
          selected = _ref2.selected;
      return /*#__PURE__*/React.createElement(TextBody, {
        padding: 2,
        borderTopWidth: selected ? 1 : 0,
        borderBottomWidth: selected ? 1 : 0
      }, suggestion.email);
    }
  });
};