import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import * as React from 'react';
import * as SelectMenuStories from './SelectMenu.stories.mdx';
import { generateChromaticStory } from '../../chromatic/utils';
import SelectMenu, { SIZE as SELECT_SIZE } from './SelectMenu';
import Text from '../text/Text';
import Flex from '../flex/Flex';

var onOptionChange = function onOptionChange() {
  return null;
};

export var Sizes = function Sizes(args) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'row'
    }
  }, Object.values(SELECT_SIZE).map(function (size) {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        width: '200px'
      },
      key: size
    }, /*#__PURE__*/React.createElement(SelectMenu, _extends({}, args, {
      defaultExpanded: true,
      size: size,
      onOptionChange: onOptionChange
    })));
  }));
};
export var DifferentPopupLenghts = function DifferentPopupLenghts(args) {
  return /*#__PURE__*/React.createElement(Flex, {
    direction: "row",
    style: {
      gap: '40px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: '320px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: '230px'
    }
  }, /*#__PURE__*/React.createElement(Text, null, "Popup with wide content:"), /*#__PURE__*/React.createElement(SelectMenu, {
    options: [{
      value: 'tv',
      label: 'I heard about Brainly in a TV commercial',
      icon: {
        name: 'physics',
        isSubjectIcon: true
      }
    }, {
      value: 'fb',
      label: 'Social media',
      icon: {
        name: 'history',
        isSubjectIcon: true
      }
    }, {
      value: 'search',
      label: 'Search engine',
      icon: {
        name: 'science',
        isSubjectIcon: true
      }
    }],
    defaultExpanded: true,
    onOptionChange: onOptionChange
  }))), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '320px'
    }
  }, /*#__PURE__*/React.createElement(Text, null, "Popup with short content that stretches to 70% of the input:"), /*#__PURE__*/React.createElement(SelectMenu, _extends({}, args, {
    withIcons: false,
    defaultExpanded: true,
    options: [{
      value: 'tv',
      label: '1'
    }, {
      value: 'fb',
      label: '2'
    }, {
      value: 'search',
      label: '3'
    }],
    placeholder: "Select something from the list",
    onOptionChange: onOptionChange
  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, "Popup with short content and short input:"), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '120px'
    }
  }, /*#__PURE__*/React.createElement(SelectMenu, _extends({}, args, {
    withIcons: false,
    defaultExpanded: true,
    options: [{
      value: 'tv',
      label: '1'
    }, {
      value: 'fb',
      label: '2'
    }, {
      value: 'search',
      label: '3'
    }],
    placeholder: "Age",
    onOptionChange: onOptionChange
  })))));
};

var Hovers = function Hovers(args) {
  var types = [{
    name: 'default'
  }, {
    disabled: true,
    name: 'disabled'
  }];
  return /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    style: {
      gap: '10px'
    }
  }, types.map(function (t) {
    return /*#__PURE__*/React.createElement(Flex, {
      key: t.name,
      style: {
        width: '500px',
        padding: '10px'
      },
      justifyContent: "space-between",
      alignItems: "center"
    }, t.name, /*#__PURE__*/React.createElement(SelectMenu, _extends({}, args, t, {
      onOptionChange: onOptionChange
    })));
  }), types.map(function (t) {
    return /*#__PURE__*/React.createElement("div", {
      key: t.name,
      style: {
        background: 'black'
      }
    }, /*#__PURE__*/React.createElement(Flex, {
      style: {
        width: '500px',
        padding: '10px'
      },
      justifyContent: "space-between",
      alignItems: "center"
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        color: 'white'
      }
    }, "White: ", t.name), /*#__PURE__*/React.createElement(SelectMenu, _extends({}, args, t, {
      color: "white",
      onOptionChange: onOptionChange
    }))));
  }));
};

export var Default = generateChromaticStory(_objectSpread({}, SelectMenuStories), {
  storiesToHover: [Hovers]
});

var _SelectMenuStories$de = SelectMenuStories.default,
    includeStories = _SelectMenuStories$de.includeStories,
    meta = _objectWithoutProperties(_SelectMenuStories$de, ["includeStories"]);

export default meta;