import React from 'react';
import styled from 'styled-components';
import Box from '../../Atoms/Box';
import Flexbox from '../../Atoms/Flexbox';
import Portal from '../../Atoms/Portal';
import Typography from '../../Atoms/Typography';
import { useMedia } from '../../Atoms/Media';
var Dialog = styled.div.withConfig({
  displayName: "ActionModal__Dialog",
  componentId: "sc-1rni2ay-0"
})(["position:relative;border-radius:", ";background-color:", ";padding:", "px;color:", ";", "{padding:", "px;}", "{width:400px;}", "{width:350px;}", "{width:320px;}"], function (_ref) {
  var theme = _ref.theme;
  return theme.borderRadius8;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.color.actionModalBackground;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.spacing.unit(10);
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.color.textLight;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.media.lessThan(theme.breakpoints.md);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.spacing.unit(5);
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.media.greaterThan(theme.breakpoints.md);
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.media.between(theme.breakpoints.sm, theme.breakpoints.md);
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.media.lessThan(theme.breakpoints.sm);
});
var StyledFlexbox = styled(Flexbox).withConfig({
  displayName: "ActionModal__StyledFlexbox",
  componentId: "sc-1rni2ay-1"
})(["margin:auto;position:fixed;z-index:", ";pointer-events:none;left:0;right:0;bottom:", "px;", "{bottom:", "px;}", "{width:720px;}", "{width:936px;}", "{width:1240px;}", "{width:1560px;}"], function (p) {
  return p.theme.zIndex.modal;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.spacing.unit(10);
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.media.lessThan(theme.breakpoints.md);
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.spacing.unit(5);
}, function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.sm);
}, function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
}, function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.lg);
}, function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.xl);
});
var StyledButtonsFlexbox = styled(Flexbox).withConfig({
  displayName: "ActionModal__StyledButtonsFlexbox",
  componentId: "sc-1rni2ay-2"
})(["pointer-events:auto;"]);
export var ActionModal = function ActionModal(_ref13) {
  var illustration = _ref13.illustration,
    title = _ref13.title,
    children = _ref13.children,
    _ref13$cancelButton = _ref13.cancelButton,
    cancelButton = _ref13$cancelButton === void 0 ? null : _ref13$cancelButton,
    confirmButton = _ref13.confirmButton;
  var isSmallerScreen = useMedia(function (theme) {
    return theme.media.lessThan(theme.breakpoints.md);
  });
  var isMobile = useMedia(function (theme) {
    return theme.media.lessThan(theme.breakpoints.sm);
  });
  return React.createElement(Portal, null, React.createElement(StyledFlexbox, {
    container: true,
    justifyContent: isMobile ? 'center' : 'flex-start'
  }, React.createElement(Dialog, null, React.createElement(Flexbox, {
    container: true,
    direction: "column",
    alignItems: illustration ? 'center' : 'flex-start',
    gap: 5
  }, Boolean(illustration) && React.createElement(Flexbox, {
    item: true
  }, illustration), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: "title2",
    weight: "bold",
    color: function color(t) {
      return t.colorTokens.neutral.text_medium;
    }
  }, title))), React.createElement(Box, {
    my: 3
  }, children), React.createElement(StyledButtonsFlexbox, {
    container: true,
    direction: isSmallerScreen ? 'column-reverse' : 'row',
    justifyContent: cancelButton ? 'space-between' : 'flex-end',
    gap: 3
  }, cancelButton, confirmButton))));
};