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

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 TooltipStories from './Tooltip.stories.mdx';
import { generateChromaticStory } from '../../chromatic/utils';
import Tooltip from './Tooltip';
import Text from '../text/Text';
import Flex from '../flex/Flex';
import Icon from '../icons/Icon';
import Counter from '../counters/Counter';
import Checkbox from '../form-elements/checkbox/Checkbox';
import Button from '../buttons/Button';

var Placement = function Placement() {
  var RenderTooltip = function RenderTooltip(_ref) {
    var placement = _ref.placement;
    return /*#__PURE__*/React.createElement(Tooltip, {
      placement: placement,
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(Tooltip.Element, {
      label: "Report this"
    }), /*#__PURE__*/React.createElement(Tooltip.Trigger, null, /*#__PURE__*/React.createElement(Button, {
      icon: /*#__PURE__*/React.createElement(Icon, {
        color: "adaptive",
        type: "report_flag_outlined"
      }),
      iconOnly: true,
      variant: "solid-light"
    })));
  };

  return /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    style: {
      paddingTop: '100px'
    }
  }, /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    alignItems: "center",
    style: {
      width: '300px',
      gap: '20px'
    }
  }, /*#__PURE__*/React.createElement(RenderTooltip, {
    placement: "top"
  }), /*#__PURE__*/React.createElement(Flex, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['top-end', 'top-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(Flex, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['left', 'right'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(Flex, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['bottom-end', 'bottom-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(RenderTooltip, {
    placement: "bottom"
  })));
};

var TypesOfTriggers = function TypesOfTriggers() {
  var RenderTooltip = function RenderTooltip(_ref2) {
    var trigger = _ref2.trigger;
    return /*#__PURE__*/React.createElement(Tooltip, {
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(Tooltip.Element, {
      label: "Here's tooltip"
    }), /*#__PURE__*/React.createElement(Tooltip.Trigger, null, trigger));
  };

  return /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    style: {
      gap: '30px',
      marginTop: '50px'
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, "Button component:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement(Button, null, "Hover me")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, "Checkbox component:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement(Checkbox, null, "Hover me")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, "<button>", " tag:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement("button", null, "Hover me to trigger the tooltip")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, "<p>", " tag:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement("p", null, "Hover me to trigger the tooltip")
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, "Counter component:"), /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: /*#__PURE__*/React.createElement(Counter, {
      icon: "points",
      size: "xs"
    }, "+15", /*#__PURE__*/React.createElement(Text, {
      as: "span",
      color: "text-gray-60",
      inherited: true
    }, ' ', "pts", ' '))
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '300px'
    }
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", ' ', /*#__PURE__*/React.createElement(RenderTooltip, {
    trigger: "Hover me to trigger the tooltip."
  }), " Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."));
};

var TextLengths = function TextLengths() {
  var RenderShortTooltip = function RenderShortTooltip(_ref3) {
    var placement = _ref3.placement;
    return /*#__PURE__*/React.createElement(Tooltip, {
      placement: placement,
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(Tooltip.Element, {
      label: "0"
    }), /*#__PURE__*/React.createElement(Tooltip.Trigger, null, /*#__PURE__*/React.createElement(Button, {
      icon: /*#__PURE__*/React.createElement(Icon, {
        color: "adaptive",
        type: "report_flag_outlined"
      }),
      iconOnly: true,
      variant: "solid-light"
    })));
  };

  var RenderLongTooltip = function RenderLongTooltip(_ref4) {
    var placement = _ref4.placement;
    return /*#__PURE__*/React.createElement(Tooltip, {
      placement: placement,
      defaultOpen: true
    }, /*#__PURE__*/React.createElement(Tooltip.Element, {
      label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }), /*#__PURE__*/React.createElement(Tooltip.Trigger, null, /*#__PURE__*/React.createElement(Button, {
      icon: /*#__PURE__*/React.createElement(Icon, {
        color: "adaptive",
        type: "report_flag_outlined"
      }),
      iconOnly: true,
      variant: "solid-light"
    })));
  };

  return /*#__PURE__*/React.createElement(Flex, {
    direction: "column"
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "bold"
  }, "Short text:"), /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    style: {
      paddingTop: '50px'
    }
  }, /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    alignItems: "center",
    style: {
      width: '300px',
      gap: '20px'
    }
  }, /*#__PURE__*/React.createElement(RenderShortTooltip, {
    placement: "top"
  }), /*#__PURE__*/React.createElement(Flex, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['top-end', 'top-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderShortTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(Flex, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['left', 'right'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderShortTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(Flex, {
    direction: "row",
    justifyContent: "space-between",
    fullWidth: true
  }, ['bottom-end', 'bottom-start'].map(function (placement) {
    return /*#__PURE__*/React.createElement(RenderShortTooltip, {
      key: placement,
      placement: placement
    });
  })), /*#__PURE__*/React.createElement(RenderShortTooltip, {
    placement: "bottom"
  }))), /*#__PURE__*/React.createElement(Text, {
    weight: "bold",
    style: {
      paddingTop: '100px'
    }
  }, "Long text:"), /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    style: {
      padding: '140px 0'
    },
    fullWidth: true
  }, /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    justifyContent: "center",
    alignItems: "center",
    style: {
      gap: '140px',
      paddingBottom: '140px'
    }
  }, /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "top"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "top-end"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "top-start"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "bottom"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "bottom-end"
  }), /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "bottom-start"
  })), /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "flex-end",
    style: {
      padding: '60px 0'
    },
    fullWidth: true
  }, /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "left"
  })), /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "flex-start",
    style: {
      padding: '60px 0'
    },
    fullWidth: true
  }, /*#__PURE__*/React.createElement(RenderLongTooltip, {
    placement: "right"
  }))));
};

var placement = TooltipStories.placement,
    controlled = TooltipStories.controlled,
    restStories = _objectWithoutProperties(TooltipStories, ["placement", "controlled"]);

export var Default = generateChromaticStory(_objectSpread(_objectSpread({}, restStories), {}, {
  TypesOfTriggers: TypesOfTriggers,
  Placement: Placement,
  TextLengths: TextLengths
}));

var _TooltipStories$defau = TooltipStories.default,
    includeStories = _TooltipStories$defau.includeStories,
    meta = _objectWithoutProperties(_TooltipStories$defau, ["includeStories"]);

export default meta;
export { placement, controlled };