import React from 'react';
import styled from 'styled-components';
import { Box, Button, CssGrid, Icon, Illustration, PageWrapper, PromotionBanner } from '../..';
import { Display } from '../../common/Display';
import imageDesktop from './images/example_image_96px.jpg';
import imageMobile from './images/example_image_64px.jpg';
var StyledBackground = styled.div.withConfig({
  displayName: "PromotionBannerstories__StyledBackground",
  componentId: "sc-h74ryt-0"
})(["background-color:", ";"], function (p) {
  return p.theme.color.background;
});
var meta = {
  component: PromotionBanner,
  title: 'Molecules / PromotionBanner'
};
export default meta;
export var DefaultUsage = {
  render: function render() {
    return React.createElement(StyledBackground, null, React.createElement(PromotionBanner, {
      title: "Save with Nordnet One",
      description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet one.",
      badgeContent: React.createElement(Illustration.Robot64, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      mobileBadgeContent: React.createElement(Icon.Robot32, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      scope: "page",
      dismissible: true
    }, React.createElement(Button.Pill, {
      size: "m"
    }, "Compare fund")), React.createElement(PageWrapper, {
      background: function background(t) {
        return t.color.background;
      }
    }, React.createElement(Box, {
      py: 4,
      pb: 10
    }, React.createElement(CssGrid.Container, {
      areas: [['account'], ['values'], ['wnl'], ['rightCol']],
      templateRows: ['auto', 'auto', 'auto', 'auto'],
      md: {
        templateColumns: [4, 8],
        templateRows: ['auto', 'auto', 'auto'],
        areas: [['account', 'values'], ['account', 'wnl'], ['account', 'rightCol']]
      },
      lg: {
        templateColumns: [4, 4, 4],
        templateRows: ['auto', '1fr'],
        areas: [['account', 'values', 'rightCol'], ['account', 'wnl', 'rightCol']]
      }
    }, React.createElement(CssGrid.Item, {
      area: "account"
    }, React.createElement(PromotionBanner, {
      dismissible: true,
      title: "Save with Nordnet One",
      description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
      badgeContent: React.createElement(Illustration.Robot64, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      mobileBadgeContent: React.createElement(Icon.Robot32, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      })
    })), React.createElement(CssGrid.Item, {
      area: "values"
    }, React.createElement("div", {
      style: {
        background: 'green',
        height: '100px'
      }
    }, "content")), React.createElement(CssGrid.Item, {
      area: "wnl"
    }, React.createElement("div", {
      style: {
        background: 'green',
        height: '100px'
      }
    }, "content")), React.createElement(CssGrid.Item, {
      area: "rightCol"
    }, React.createElement(PromotionBanner, {
      title: "Save with Nordnet One",
      description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
      badgeContent: React.createElement(Illustration.Robot64, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      mobileBadgeContent: React.createElement(Icon.Robot32, {
        color: function color(t) {
          return t.color.menuAccent2;
        }
      }),
      dismissible: true
    }))))));
  }
};
export var DifferentVariant = {
  render: function render() {
    return React.createElement(React.Fragment, null, React.createElement(Display, {
      horizontal: true,
      items: [{
        title: 'Full width banner scope="page"',
        component: React.createElement(StyledBackground, null, React.createElement(PromotionBanner, {
          scope: "page",
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: React.createElement(Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          mobileBadgeContent: React.createElement(Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true,
          onClose: function onClose() {
            return alert('Close Promotion Banner');
          }
        }))
      }]
    }), React.createElement(Display, {
      items: [{
        title: 'With title, description and icon, not dismissible',
        component: React.createElement(StyledBackground, null, React.createElement(PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: React.createElement(Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          mobileBadgeContent: React.createElement(Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          })
        }, React.createElement(Button.Pill, {
          iconPlacement: "left",
          onClick: function onClick() {},
          variant: "primary"
        }, "Compare funds")))
      }]
    }), React.createElement(Display, {
      items: [{
        title: 'Background color Blue, Green, White. You can also pass custom color',
        component: React.createElement(StyledBackground, null, React.createElement(PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: React.createElement(Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          mobileBadgeContent: React.createElement(Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }), React.createElement(PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: React.createElement(Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          backgroundColor: "green",
          mobileBadgeContent: React.createElement(Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }), React.createElement(PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: React.createElement(Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          backgroundColor: "white",
          mobileBadgeContent: React.createElement(Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }), React.createElement(PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: React.createElement(Illustration.Robot64, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          backgroundColor: function backgroundColor(t) {
            return t.color.menuAccent2;
          },
          mobileBadgeContent: React.createElement(Icon.Robot32, {
            color: function color(t) {
              return t.color.menuAccent2;
            }
          }),
          dismissible: true
        }))
      }]
    }), React.createElement(Display, {
      items: [{
        title: 'Image badge banner',
        component: React.createElement(StyledBackground, null, React.createElement(PromotionBanner, {
          title: "Save with Nordnet One",
          description: "Everything you need for a low fee, compare and choose the fund that suits you best in Nordnet One.",
          badgeContent: React.createElement("img", {
            src: imageDesktop,
            alt: "hello",
            style: {
              height: 'inherit'
            }
          }),
          mobileBadgeContent: React.createElement("img", {
            src: imageMobile,
            alt: "hello",
            style: {
              height: 'inherit'
            }
          }),
          dismissible: true
        }, React.createElement(Button.Pill, {
          iconPlacement: "left",
          onClick: function onClick() {},
          variant: "primary"
        }, "Compare funds")))
      }]
    }));
  }
};