import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { useRef, useState, useEffect } from 'react';
import _pt from 'prop-types';
import { Button } from '../Button/Button.esm.js';
import copyToClipboard from '../../utils/helpers/copyToClipboard.esm.js';

var baseCss = function baseCss(_theme) {
  return {
    "html:not([dir=rtl]) &": {
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0
    },
    "html[dir=rtl] &": {
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0
    }
  };
};

function CopyButton(_ref) {
  var onClick = _ref.onClick,
      content = _ref.content,
      _ref$getButtonLabel = _ref.getButtonLabel,
      getButtonLabel = _ref$getButtonLabel === void 0 ? function (copied) {
    return copied ? "Copied" : "Copy";
  } : _ref$getButtonLabel,
      _ref$getButtonTitle = _ref.getButtonTitle,
      getButtonTitle = _ref$getButtonTitle === void 0 ? function (copied) {
    return copied ? "Copied to clipboard" : "Copy to clipboard";
  } : _ref$getButtonTitle,
      _ref$delay = _ref.delay,
      delay = _ref$delay === void 0 ? 5000 : _ref$delay,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, ["onClick", "content", "getButtonLabel", "getButtonTitle", "delay", "children"]);

  var timeoutRef = useRef(undefined);

  var _React$useState = useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      copied = _React$useState2[0],
      setCopied = _React$useState2[1];

  var copyOnClick = function copyOnClick(e) {
    if (onClick) {
      onClick(e);
    }

    copyToClipboard(content).then(function () {
      setCopied(true);
      timeoutRef.current = window.setTimeout(function () {
        setCopied(false);
      }, delay);
    });
  };

  useEffect(function () {
    return function () {
      if (timeoutRef.current) {
        window.clearTimeout(timeoutRef.current);
      }
    };
  }, []);
  return jsx(Button, _extends({
    css: baseCss,
    title: getButtonTitle(copied),
    onClick: copyOnClick,
    size: "S",
    type: "button",
    variant: "SECONDARY"
  }, props), getButtonLabel(copied), children);
}

CopyButton.propTypes = {
  getButtonTitle: _pt.func,
  content: _pt.string.isRequired,
  delay: _pt.number,
  onClick: _pt.func,
  getButtonLabel: _pt.func,
  type: _pt.oneOf(["button", "submit"])
};
CopyButton.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CopyButton",
  "props": {
    "getButtonLabel": {
      "defaultValue": {
        "value": "copied => (copied ? `Copied` : `Copy`)",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "",
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "(copied: boolean) => string",
        "signature": {
          "arguments": [{
            "name": "copied",
            "type": {
              "name": "boolean"
            }
          }],
          "return": {
            "name": "string"
          }
        }
      }
    },
    "getButtonTitle": {
      "defaultValue": {
        "value": "copied =>\ncopied ? `Copied to clipboard` : `Copy to clipboard`",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "(copied: boolean) => string",
        "signature": {
          "arguments": [{
            "name": "copied",
            "type": {
              "name": "boolean"
            }
          }],
          "return": {
            "name": "string"
          }
        }
      },
      "description": ""
    },
    "delay": {
      "defaultValue": {
        "value": "5000",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "",
      "tsType": {
        "name": "number"
      }
    },
    "content": {
      "type": {
        "name": "string"
      },
      "required": true,
      "description": "",
      "tsType": {
        "name": "string"
      }
    },
    "onClick": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "type": {
      "type": {
        "name": "enum",
        "value": [{
          "value": "`button`",
          "computed": true
        }, {
          "value": "`submit`",
          "computed": true
        }]
      },
      "required": false,
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/CopyButton/CopyButton.tsx"] = {
    name: "CopyButton",
    docgenInfo: CopyButton.__docgenInfo,
    path: "src/components/CopyButton/CopyButton.tsx"
  };
}

export default CopyButton;
//# sourceMappingURL=CopyButton.esm.js.map
