import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withKnobs } from "@storybook/addon-knobs";
import Dropdown from "../Dropdown";
import SearchPicker from "./index.js";
import Spinner from "../Spinner";
import Icon from "react-oui-icons";
import { getSearchFunction } from "./mock_api";
import Row from "../Layout/Row";
var searchFunction = getSearchFunction();
var stories = storiesOf("Experimental|SearchPicker", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview",
    style: {
      display: "flex",
      flex: 1,
      height: "100vh"
    }
  }, story());
});
stories.add("Default", function () {
  return React.createElement(SearchPicker, {
    onItemSelected: action("keyboard selection item"),
    searchFunction: searchFunction,
    supportedTypes: ["feature"]
  }, function (_ref) {
    var availableEntities = _ref.availableEntities,
        renderInput = _ref.renderInput,
        isLoading = _ref.isLoading,
        searchQuery = _ref.searchQuery,
        currentFauxFocusIndex = _ref.currentFauxFocusIndex,
        resultsText = _ref.resultsText;
    return React.createElement(Dropdown, {
      width: 600,
      fullWidth: true,
      renderActivator: renderInput
    }, React.createElement(Dropdown.Contents, {
      minWidth: 600,
      isLoading: isLoading
    }, React.createElement(Dropdown.ListItem, {
      ignoreToggle: true
    }, React.createElement("span", {
      className: "micro muted soft--sides"
    }, resultsText.summary)), availableEntities.map(function (item, index) {
      return React.createElement(Dropdown.ListItem, {
        key: index
      }, React.createElement(Dropdown.BlockLink, {
        hasFauxFocus: currentFauxFocusIndex === index,
        onClick: action("click dropdown block link ".concat(item.name))
      }, React.createElement(Dropdown.BlockLinkText, {
        text: item.name
      }), React.createElement(Dropdown.BlockLinkSecondaryText, {
        secondaryText: item.description
      })));
    }), isLoading && React.createElement(Spinner, {
      hasOverlay: true
    })));
  });
}).add("With Create Button", function () {
  return React.createElement(SearchPicker, {
    onItemSelected: action("keyboard selection item"),
    additionalItems: 1,
    searchFunction: searchFunction,
    supportedTypes: ["feature"]
  }, function (_ref2) {
    var availableEntities = _ref2.availableEntities,
        renderInput = _ref2.renderInput,
        isLoading = _ref2.isLoading,
        searchQuery = _ref2.searchQuery,
        currentFauxFocusIndex = _ref2.currentFauxFocusIndex,
        resultsText = _ref2.resultsText;
    return React.createElement(Dropdown, {
      width: 600,
      fullWidth: true,
      renderActivator: renderInput
    }, React.createElement(Dropdown.Contents, {
      minWidth: 600,
      isLoading: isLoading
    }, React.createElement(Dropdown.ListItem, null, React.createElement(Dropdown.BlockLink, {
      hasFauxFocus: currentFauxFocusIndex === 0,
      onClick: action("click create dropdown block link")
    }, React.createElement("div", {
      className: "flex flex-align--center"
    }, "Create new audience"))), React.createElement(Dropdown.ListItem, {
      ignoreToggle: true
    }, React.createElement("span", {
      className: "micro muted soft--sides"
    }, resultsText.summary)), availableEntities.map(function (item, index) {
      return React.createElement(Dropdown.ListItem, {
        key: index
      }, React.createElement(Dropdown.BlockLink, {
        hasFauxFocus: currentFauxFocusIndex === index + 1,
        onClick: action("click dropdown block link ".concat(item.name))
      }, React.createElement(Dropdown.BlockLinkText, {
        text: item.name
      }), React.createElement(Dropdown.BlockLinkSecondaryText, {
        secondaryText: item.description
      })));
    }), isLoading && React.createElement(Spinner, {
      hasOverlay: true
    })));
  });
}).add("In a Dropdown", function () {
  return React.createElement(Dropdown, {
    buttonContent: "Selected Variation Name",
    arrowIcon: "down",
    shouldHideChildrenOnClick: false,
    style: "outline"
  }, function (_ref3) {
    var handleHideChildren = _ref3.handleHideChildren;
    return React.createElement(Dropdown.Contents, {
      minWidth: 600,
      direction: "right"
    }, React.createElement(Dropdown.ListItem, null, React.createElement(Dropdown.BlockLink, {
      hasFauxFocus: false,
      onClick: action("click create dropdown block link")
    }, React.createElement(Row, {
      verticalAlignment: "center",
      paddedContent: "sides"
    }, React.createElement(Icon, {
      name: "add"
    }), React.createElement("p", {
      className: "soft--left flush"
    }, "Create new variation")))), React.createElement(SearchPicker, {
      onItemSelected: action("keyboard selection item"),
      additionalItems: 1,
      searchFunction: searchFunction,
      supportedTypes: ["variation"]
    }, function (_ref4) {
      var availableEntities = _ref4.availableEntities,
          renderInput = _ref4.renderInput,
          isLoading = _ref4.isLoading,
          searchQuery = _ref4.searchQuery,
          currentFauxFocusIndex = _ref4.currentFauxFocusIndex,
          resultsText = _ref4.resultsText;
      return React.createElement(React.Fragment, null, React.createElement(Dropdown.ListItem, null, renderInput()), React.createElement(Dropdown.ListItem, {
        ignoreToggle: true
      }, React.createElement("span", {
        className: "micro muted soft--sides"
      }, resultsText.summary)), availableEntities.map(function (item, index) {
        return React.createElement(Dropdown.ListItem, {
          key: index
        }, React.createElement(Dropdown.BlockLink, {
          hasFauxFocus: currentFauxFocusIndex === index + 1,
          onClick: action("click dropdown block link ".concat(item.name))
        }, React.createElement(Dropdown.BlockLinkText, {
          text: item.name
        }), React.createElement(Dropdown.BlockLinkSecondaryText, {
          secondaryText: item.description
        })));
      }), isLoading && React.createElement(Spinner, {
        hasOverlay: true
      }));
    }));
  });
});