import React from 'react';
import styled from 'styled-components';
import { Option } from './MultiSelectList';
import { Display } from '../../../../../common/Display';
import { DropdownBubble, FadedScroll } from '../../../../..';
export default {
  title: 'Molecules / Input / Select / MultiSelectList'
};
export var ItemDefault = {
  render: function render() {
    return React.createElement(Option, {
      label: "First"
    });
  },
  name: 'Item default'
};
export var ItemSelected = {
  render: function render() {
    return React.createElement(Option, {
      label: "First",
      selected: true
    });
  },
  name: 'Item selected'
};
export var ItemDisabled = {
  render: function render() {
    return React.createElement(Option, {
      label: "First",
      disabled: true
    });
  },
  name: 'Item disabled'
};
var DropdownBubbleWithPadding = styled(DropdownBubble).withConfig({
  displayName: "MultiSelectListstories__DropdownBubbleWithPadding",
  componentId: "sc-1qucl28-0"
})(["padding-top:12px;padding-bottom:12px;width:300px;"]);
var Wrapper = function Wrapper(props) {
  return React.createElement(DropdownBubbleWithPadding, {
    position: props.position,
    placement: props.placement,
    maxHeight: "200px"
  }, React.createElement(FadedScroll, {
    enableMobileFade: true
  }, props.children));
};
export var ListWithDifferentArrowPositions = {
  render: function render() {
    var _Array$fill, _Array$fill2, _Array$fill3, _Array$fill4, _Array$fill5, _Array$fill6;
    return React.createElement(Display, {
      items: [{
        component: React.createElement(Wrapper, {
          position: "left"
        }, React.createElement(Option, {
          label: "Default?"
        }), React.createElement(Option, {
          label: "First",
          selected: true
        }), (_Array$fill = new Array(10).fill(null)) === null || _Array$fill === void 0 ? void 0 : _Array$fill.map(function (_, i) {
          return React.createElement(Option, {
            key: i,
            label: "Disabled",
            disabled: true
          });
        })),
        title: 'Placement Bottom, Arrow Default (Left)'
      }, {
        component: React.createElement(Wrapper, null, React.createElement(Option, {
          label: "Default?"
        }), React.createElement(Option, {
          label: "First",
          selected: true
        }), React.createElement(Option, {
          label: "SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond"
        }), (_Array$fill2 = new Array(10).fill(null)) === null || _Array$fill2 === void 0 ? void 0 : _Array$fill2.map(function (_, i) {
          return React.createElement(Option, {
            key: i,
            label: "Disabled",
            disabled: true
          });
        })),
        title: 'Placement Bottom, Arrow Right'
      }, {
        component: React.createElement(Wrapper, {
          position: "center"
        }, React.createElement(Option, {
          label: "Default?"
        }), React.createElement(Option, {
          label: "First",
          selected: true
        }), React.createElement(Option, {
          label: "Second"
        }), (_Array$fill3 = new Array(10).fill(null)) === null || _Array$fill3 === void 0 ? void 0 : _Array$fill3.map(function (_, i) {
          return React.createElement(Option, {
            key: i,
            label: "Disabled",
            disabled: true
          });
        })),
        title: 'Placement Bottom, Arrow Center'
      }, {
        component: React.createElement(Wrapper, {
          placement: "top"
        }, React.createElement(Option, {
          label: "Default?"
        }), React.createElement(Option, {
          label: "First",
          selected: true
        }), React.createElement(Option, {
          label: "SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond"
        }), (_Array$fill4 = new Array(10).fill(null)) === null || _Array$fill4 === void 0 ? void 0 : _Array$fill4.map(function (_, i) {
          return React.createElement(Option, {
            key: i,
            label: "Disabled",
            disabled: true
          });
        })),
        title: 'Placement Top, Arrow Default (right)'
      }, {
        component: React.createElement(Wrapper, {
          position: "left",
          placement: "top"
        }, React.createElement(Option, {
          label: "Default?"
        }), React.createElement(Option, {
          label: "First",
          selected: true
        }), (_Array$fill5 = new Array(10).fill(null)) === null || _Array$fill5 === void 0 ? void 0 : _Array$fill5.map(function (_, i) {
          return React.createElement(Option, {
            key: i,
            label: "Disabled",
            disabled: true
          });
        })),
        title: 'Placement Top, Arrow Left'
      }, {
        component: React.createElement(Wrapper, {
          position: "center",
          placement: "top"
        }, React.createElement(Option, {
          label: "Default?"
        }), React.createElement(Option, {
          label: "First",
          selected: true
        }), React.createElement(Option, {
          label: "Second"
        }), (_Array$fill6 = new Array(10).fill(null)) === null || _Array$fill6 === void 0 ? void 0 : _Array$fill6.map(function (_, i) {
          return React.createElement(Option, {
            key: i,
            label: "Disabled",
            disabled: true
          });
        })),
        title: 'Placement Top, Arrow Center'
      }]
    });
  }
};