import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import markdown from './README.mdx';
import AuthLayout, { BackgroundContent } from './AuthLayout';
import Button from './../Button';
import TextInput from './../TextInput';
import Text from './../Text';
import Link from './../Link';
import FormGroup from './../FormGroup'; // import Icon from './../Icon';

import { ArrowLeftGlyph, WfpLogoStandardBlackEnGlyph } from '@wfp/icons-react';
export default {
  title: 'Components/Content Related/AuthLayout',
  component: AuthLayout,
  subcomponents: {
    BackgroundContent: BackgroundContent
  },
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(AuthLayout, _extends({}, args, {
    backgroundContent: /*#__PURE__*/React.createElement(BackgroundContent, {
      style: {
        background: '#007DBC',
        color: '#fff',
        padding: '3rem'
      }
    }, "Image can be placed here or just give a background with content like this")
  }), /*#__PURE__*/React.createElement("div", null, "Forms will be here"));
}; // TODO

export var RegularNoImage = function RegularNoImage(args) {
  return /*#__PURE__*/React.createElement(AuthLayout, args, /*#__PURE__*/React.createElement(FormGroup, {
    style: {
      width: '80%'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    icon: ArrowLeftGlyph,
    iconReverse: true,
    kind: "secondary",
    style: {
      marginBottom: '3rem'
    }
  }, "Back to lorem"), /*#__PURE__*/React.createElement(TextInput, {
    labelText: "The labelText",
    name: "inputname",
    placeholder: "placeholder"
  }), /*#__PURE__*/React.createElement(TextInput, {
    labelText: "The labelText",
    name: "inputname",
    placeholder: "placeholder"
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Link, {
    href: "https://www.wfp.org"
  }, "Another link"), /*#__PURE__*/React.createElement(Button, {
    kind: "primary",
    style: {
      marginLeft: '2rem'
    }
  }, "Register"))));
};
RegularNoImage.args = {
  backgroundContent: /*#__PURE__*/React.createElement(BackgroundContent, {
    style: {
      background: 'linear-gradient(0.13deg, #357DB6 0.17%, #5DB2C2 99.95%)',
      color: '#fff',
      padding: '3rem'
    }
  }, /*#__PURE__*/React.createElement(WfpLogoStandardBlackEnGlyph, {
    description: "WFP",
    fill: "#fff",
    style: {
      marginBottom: '4rem'
    }
  }), /*#__PURE__*/React.createElement(Text, {
    kind: "h1"
  }, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,diam nonumy eirmod."), /*#__PURE__*/React.createElement("p", {
    style: {
      marginTop: '2rem'
    }
  }, "- Author"))
};
export var WithImage = function WithImage(args) {
  return /*#__PURE__*/React.createElement(AuthLayout, args, /*#__PURE__*/React.createElement(FormGroup, {
    style: {
      width: '80%'
    }
  }, /*#__PURE__*/React.createElement(Button, {
    icon: ArrowLeftGlyph,
    iconReverse: true,
    kind: "secondary",
    style: {
      marginBottom: '3rem'
    }
  }, "Back to lorem"), /*#__PURE__*/React.createElement(TextInput, {
    labelText: "The labelText",
    name: "inputname",
    placeholder: "placeholder"
  }), /*#__PURE__*/React.createElement(TextInput, {
    labelText: "The labelText",
    name: "inputname",
    placeholder: "placeholder"
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Link, {
    href: "https://www.wfp.org"
  }, "Another link"), /*#__PURE__*/React.createElement(Button, {
    kind: "primary",
    style: {
      marginLeft: '2rem'
    }
  }, "Register"))));
};
WithImage.args = {
  image: 'http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg'
};