import React from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { AccountBadgeStack } from './AccountBadgeStack';
import { Display } from '../../../../common/Display';
import Button from '../../../Button';
import { Badge, Typography } from '../../../..';
import ChevronDown8 from '../../../../Atoms/Icon/action/chevronDown/ChevronDown8';
export default {
  title: 'Molecules / Badge / Account / Stack',
  parameters: {
    component: AccountBadgeStack
  }
};
var DisplayContainer = styled.div.withConfig({
  displayName: "AccountBadgeStackstories__DisplayContainer",
  componentId: "sc-qyyd3i-0"
})(["> div:nth-child(3n + 1){padding-left:20px;padding-top:12px;}"]);
var singleArray = [{
  label: 'TJP'
}];
var threeArray = [{
  label: 'KF'
}, {
  label: 'AF'
}, {
  label: 'ISK'
}];
var fiveArray = [{
  label: 'KF'
}, {
  label: 'AF'
}, {
  label: 'ISK'
}, {
  label: 'ISK'
}, {
  label: 'ISK'
}];
var tenArray = [].concat(fiveArray, fiveArray);
export var Default = {
  render: function render() {
    return React.createElement(DisplayContainer, null, React.createElement(Display, {
      title: "Size s",
      items: [{
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray,
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray
        }),
        title: '3 badges, with truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: fiveArray
        }),
        title: '3 badges, with more truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: tenArray,
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: singleArray
        }),
        title: '1 badge'
      }]
    }), React.createElement(Display, {
      title: "Size m",
      items: [{
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "m",
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "m"
        }),
        title: '3 badges, with truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: fiveArray,
          badgeSize: "m"
        }),
        title: '3 badges, with more truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: tenArray,
          badgeSize: "m",
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: singleArray,
          badgeSize: "m"
        }),
        title: '1 badge'
      }]
    }), React.createElement(Display, {
      title: "Size l",
      items: [{
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "l",
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray,
          badgeSize: "l"
        }),
        title: '3 badges, with truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: fiveArray,
          badgeSize: "l"
        }),
        title: '3 badges, with more truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: tenArray,
          badgeSize: "l",
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: singleArray,
          badgeSize: "l"
        }),
        title: '1 badge'
      }]
    }), React.createElement(Display, {
      title: "custom size 40",
      items: [{
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray,
          badgeSize: 40,
          truncated: false
        }),
        title: '3 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: threeArray,
          badgeSize: 40
        }),
        title: '3 badges, with truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: fiveArray,
          badgeSize: 40
        }),
        title: '3 badges, with more truncation'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: tenArray,
          badgeSize: 40,
          truncated: false
        }),
        title: '10 badges'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          items: singleArray,
          badgeSize: 40
        }),
        title: '1 badge'
      }]
    }));
  }
};
export var InsideButton = {
  render: function render() {
    return React.createElement(DisplayContainer, null, React.createElement(Display, {
      title: "Size s",
      items: [{
        component: React.createElement(Button.Pill, {
          size: "m",
          variant: "primary"
        }, React.createElement(Badge.Account.Stack, {
          items: [].concat(singleArray, singleArray)
        })),
        title: '2 badges'
      }, {
        component: React.createElement(Button.Pill, {
          size: "m"
        }, React.createElement(Badge.Account.Stack, {
          items: fiveArray,
          maxElementsInStack: 3
        })),
        title: '3 badges, with truncation'
      }, {
        component: React.createElement("div", {
          style: {
            background: 'white',
            padding: '12px'
          }
        }, React.createElement(Button.Pill, {
          onClick: action('Ouch'),
          size: "m",
          variant: "secondary",
          icon: React.createElement(ChevronDown8, {
            color: "currentColor"
          }),
          iconPlacement: "right"
        }, React.createElement(Badge.Account.Stack, {
          items: [].concat(singleArray, singleArray)
        }))),
        title: '2 badges in secondary button'
      }, {
        component: React.createElement(Button.Pill, {
          size: "m",
          variant: "primary",
          disabled: true
        }, React.createElement(Badge.Account.Stack, {
          items: [].concat(singleArray, singleArray),
          useCurrentColor: true
        })),
        title: '2 badges with current color inherited'
      }]
    }));
  },
  name: 'Inside a button'
};
export var OtherVariants = {
  render: function render() {
    return React.createElement(DisplayContainer, null, React.createElement(Display, {
      title: "With different colors",
      items: [{
        component: React.createElement(Badge.Account.Stack, {
          badgeSize: "m",
          items: [{
            label: 'SEB',
            badgeColor: function badgeColor(t) {
              return t.color.positive;
            }
          }, {
            label: 'HB',
            badgeColor: function badgeColor(t) {
              return t.color.badgeBackground;
            }
          }, {
            label: 'AVA',
            badgeColor: function badgeColor(t) {
              return t.color.negative;
            }
          }, {
            label: 'NN',
            badgeColor: function badgeColor(t) {
              return t.color.cta;
            }
          }]
        }),
        title: 'Other banks'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          badgeSize: "m",
          items: [{
            label: React.createElement(Typography, {
              weight: "bold",
              type: "caption",
              color: function color(t) {
                return t.color.positive;
              }
            }, "TJP")
          }, {
            label: React.createElement(Typography, {
              weight: "bold",
              type: "caption",
              color: function color(t) {
                return t.color.negativeBlackBackground;
              }
            }, "TJP")
          }, {
            label: React.createElement(Typography, {
              weight: "bold",
              type: "tertiary",
              color: function color(t) {
                return t.color.bubbleBackground;
              }
            }, "TJP")
          }, {
            label: React.createElement(Typography, {
              weight: "bold",
              type: "secondary",
              color: function color(t) {
                return t.color.buyHover;
              }
            }, "TJP")
          }]
        }),
        title: 'Custom label'
      }, {
        component: React.createElement(Badge.Account.Stack, {
          badgeSize: "m",
          maxElementsInStack: 2,
          truncationWrapper: function truncationWrapper(_ref) {
            var truncatedItems = _ref.truncatedItems;
            return React.createElement(Typography, {
              weight: "bold",
              type: "primary",
              color: function color(t) {
                return t.color.negative;
              }
            }, truncatedItems.length, "!");
          },
          items: threeArray
        }),
        title: 'Custom truncation item'
      }]
    }));
  },
  name: 'Other variants'
};