function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import React from 'react';
import styled from 'styled-components';
import { IntlProvider } from 'react-intl';
import { DistributionBar } from './DistributionBar';
import { Flag, Flexbox, Typography, Link, Number, TruncateWithTooltip, Icon } from '../../index';
export default {
  title: 'Molecules / DistributionBar'
};
var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "DistributionBarstories__StyledFlexbox",
  componentId: "sc-9o6juc-0"
})(["min-width:0;"]);
var StyledImage = styled.img.withConfig({
  displayName: "DistributionBarstories__StyledImage",
  componentId: "sc-9o6juc-1"
})(["width:24px;border-radius:50%;"]);
export var Showcase = function Showcase() {
  var instrumentList = [{
    label: 'Unity Software Inc',
    link: 'linkto',
    country: 'NO',
    weight: 1000,
    currency: 'SEK'
  }, {
    label: 'Investor B',
    weight: 700
  }, {
    label: 'Volvo B',
    link: 'linkto',
    country: 'SE',
    weight: 500,
    currency: 'SEK'
  }, {
    label: 'Instrument 3',
    country: 'US',
    weight: 0,
    percentage: true
  }];
  var highestValue = Math.max.apply(Math, _toConsumableArray(instrumentList.map(function (instrument) {
    return instrument.weight;
  })));
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Flexbox, {
    container: true,
    gap: 3,
    direction: "column"
  }, React.createElement(Flexbox, {
    container: true,
    item: true,
    direction: "column",
    gap: 1
  }, React.createElement(Typography, null, "Showcase different properties"), instrumentList.map(function (item) {
    return React.createElement(DistributionBar, {
      key: item.label,
      label: item.link ? React.createElement(Link, {
        to: item.link,
        color: "inherit"
      }, item.label) : item.label,
      weight: item.weight / highestValue * 100,
      icon: item.country ? React.createElement(Flag, {
        size: "m",
        country: item.country
      }) : undefined
    }, React.createElement(StyledFlexbox, {
      container: true
    }, React.createElement(TruncateWithTooltip, {
      label: React.createElement(Number, {
        value: item.weight,
        currency: item.currency
      })
    }, React.createElement(Typography, {
      type: "secondary",
      textAlign: "right"
    }, React.createElement(Number, {
      value: item.weight,
      currency: item.currency,
      percentage: item.percentage
    })))));
  })), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, null, "Custom icon"), React.createElement(DistributionBar, {
    label: "Label",
    weight: 10,
    icon: React.createElement(Icon.Global16, null)
  })), React.createElement(Flexbox, {
    item: true,
    container: true,
    gap: 2,
    direction: "column"
  }, React.createElement(Typography, null, "Custom large image with adjusted padding"), React.createElement(DistributionBar, {
    label: "Cool cat company",
    weight: 0,
    iconPadding: {
      pl: 1
    },
    icon: React.createElement(Flexbox, {
      container: true,
      alignItems: "center",
      justifyContent: "center",
      height: "100%"
    }, React.createElement(StyledImage, {
      alt: "Image of shareville cat",
      src: "https://shareville-static-test.s3.amazonaws.com/img/avatars/cat_120x120.jpg"
    }))
  }), React.createElement(DistributionBar, {
    label: "Tesla",
    weight: 100,
    iconPadding: {
      pl: 1
    },
    icon: React.createElement(Flexbox, {
      container: true,
      alignItems: "center",
      justifyContent: "center",
      height: "100%"
    }, React.createElement(StyledImage, {
      alt: "Image of Tesla logo",
      src: "https://cdn.pixabay.com/photo/2022/08/25/00/32/tesla-logo-7408969_1280.png"
    }))
  }), React.createElement(DistributionBar, {
    label: "Apple",
    weight: 0,
    iconPadding: {
      pl: 1
    },
    icon: React.createElement(Flexbox, {
      container: true,
      alignItems: "center",
      justifyContent: "center",
      height: "100%"
    }, React.createElement(StyledImage, {
      alt: "Image of Apple logo",
      src: "https://banner2.cleanpng.com/20180330/oke/kisspng-apple-logo-computer-icons-apple-logo-5abdfcd3232e52.3373911715224004671441.jpg"
    }))
  })), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, null, "Link Name"), React.createElement(DistributionBar, {
    label: React.createElement(Link, {
      to: "/",
      color: "inherit"
    }, "Link to something"),
    weight: 0,
    icon: React.createElement(Flag, {
      size: "m",
      country: "SE"
    })
  })), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, null, "Truncate name and truncated children"), React.createElement(DistributionBar, {
    label: "Loooooooooooooooooooong naaaaaaaaaaaame",
    weight: 0,
    icon: React.createElement(Flag, {
      size: "m",
      country: "SE"
    })
  }, React.createElement(StyledFlexbox, {
    container: true,
    justifyContent: "flex-end"
  }, React.createElement(TruncateWithTooltip, {
    label: React.createElement(Number, {
      value: 10000000000000,
      currency: "SEK"
    })
  }, React.createElement(Typography, {
    type: "secondary",
    weight: "bold",
    textAlign: "right"
  }, React.createElement(Number, {
    value: 10000000000000,
    currency: "SEK"
  })))))), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, null, "Space children"), React.createElement(DistributionBar, {
    label: "Instrument name 1",
    weight: 69,
    icon: React.createElement(Flag, {
      size: "m",
      country: "SE"
    })
  }, React.createElement(Flexbox, {
    container: true,
    width: "50%",
    justifyContent: "space-between"
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: "secondary"
  }, "very start")), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: "secondary"
  }, "very end"))))), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, null, "Multiple columns"), React.createElement(DistributionBar, {
    label: "Instrument name 1 Instrument name 1 Instrument name 1 Instrument name 1",
    labelProps: {
      container: true,
      md: {
        gutter: 0
      }
    },
    weight: 70,
    icon: React.createElement(Flag, {
      size: "m",
      country: "SE"
    })
  }, React.createElement(Flexbox, {
    container: true
  }, React.createElement("div", null, "GAV"), React.createElement("div", null, "10%"), React.createElement("div", null, "Another Column")))), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, null, "Animation Waterfall"), React.createElement(Flexbox, {
    container: true,
    direction: "column",
    gap: 2
  }, Array.from(Array(10).keys()).map(function (item, i) {
    return React.createElement(DistributionBar, {
      key: "Instrument name ".concat(i + 1),
      label: "Instrument name ".concat(i + 1),
      weight: Math.floor(Math.random() * 101),
      delay: 0 + i / 5,
      icon: React.createElement(Flag, {
        size: "m",
        country: "SE"
      })
    }, React.createElement(Flexbox, {
      container: true,
      width: "81px",
      justifyContent: "flex-end"
    }, React.createElement(Number, {
      value: Math.floor(Math.random() * 101),
      percentage: true,
      decimals: 2
    })), React.createElement(Flexbox, {
      container: true,
      width: "81px",
      justifyContent: "flex-end"
    }, React.createElement(Number, {
      value: Math.floor(Math.random() * 101),
      percentage: true,
      decimals: 2
    })));
  })))));
};