import { darkTheme, lightTheme } from '@nordnet/design-tokens';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { Button, Flexbox } from '../..';
import { DRAG_BOTTOM_HEIGHT, TRANSITION_DURATION } from './constants';
var getNeutralColor = function getNeutralColor(colorToken, theme, invertedColors) {
  if (invertedColors) {
    return theme.isDarkMode ? lightTheme.color.neutral[colorToken] : darkTheme.color.neutral[colorToken];
  }
  return theme.colorTokens.neutral[colorToken];
};
var getActionColor = function getActionColor(colorToken, theme, invertedColors) {
  if (invertedColors) {
    return theme.isDarkMode ? lightTheme.color.action[colorToken] : darkTheme.color.action[colorToken];
  }
  return theme.colorTokens.action[colorToken];
};
export var StyledIconButton = styled(Button.Icon).withConfig({
  displayName: "BottomSheetstyles__StyledIconButton",
  componentId: "sc-ka5sdk-0"
})(["background-color:", ";color:", ";svg{color:", ";}&:hover{background-color:", ";svg{color:", ";}}&:active{background-color:", ";svg{color:", ";}}"], function (p) {
  return getNeutralColor('background_strong', p.theme, p.$invertedColors);
}, function (p) {
  return getNeutralColor('icon_default', p.theme, p.$invertedColors);
}, function (p) {
  return getNeutralColor('icon_default', p.theme, p.$invertedColors);
}, function (p) {
  return getNeutralColor('background_strong', p.theme, p.$invertedColors);
}, function (p) {
  return getActionColor('icon_hover', p.theme, p.$invertedColors);
}, function (p) {
  return getNeutralColor('background_weak', p.theme, p.$invertedColors);
}, function (p) {
  return getActionColor('icon_pressed', p.theme, p.$invertedColors);
});
export var Backdrop = styled(Flexbox).withConfig({
  displayName: "BottomSheetstyles__Backdrop",
  componentId: "sc-ka5sdk-1"
})(["background-color:", ";height:100%;left:0;position:fixed;top:0;width:100%;z-index:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.colorTokens.neutral.background_overlay;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.zIndex.overlay;
});
var getHeight = function getHeight(height, fullScreenMobile) {
  if (fullScreenMobile) {
    return "height: calc(100% + ".concat(DRAG_BOTTOM_HEIGHT, "px)");
  }
  if (height && typeof height === 'number') {
    return "height: ".concat(height + DRAG_BOTTOM_HEIGHT, "px");
  }
  if (height && typeof height === 'string') {
    return "height: calc(".concat(height, " + ").concat(DRAG_BOTTOM_HEIGHT, "px)");
  }
  return '';
};
export var StyledBottomSheet = styled(motion.div).withConfig({
  displayName: "BottomSheetstyles__StyledBottomSheet",
  componentId: "sc-ka5sdk-2"
})(["background-color:", ";border-radius:", ";margin-bottom:-", "px;border-bottom:", "px solid ", ";box-sizing:border-box;color:", ";", ";transition:height ", "s ease-out;left:0;padding:", "px ", "px ", "px;position:fixed;bottom:-100%;width:100%;z-index:", ";"], function (p) {
  return getNeutralColor('background_default', p.theme, p.$invertedColors);
}, function (_ref3) {
  var theme = _ref3.theme;
  return "".concat(theme.borderRadius20, " ").concat(theme.borderRadius20, " 0 0");
}, DRAG_BOTTOM_HEIGHT, DRAG_BOTTOM_HEIGHT, function (p) {
  return getNeutralColor('background_default', p.theme, p.$invertedColors);
}, function (p) {
  return getNeutralColor('text_default', p.theme, p.$invertedColors);
}, function (p) {
  return getHeight(p.height, p.$fullScreenMobile);
}, TRANSITION_DURATION, function (p) {
  return p.theme.spacing.unit(2);
}, function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(3);
}, function (p) {
  return p.theme.zIndex.overlayInModal;
});
export var Handle = styled.div.withConfig({
  displayName: "BottomSheetstyles__Handle",
  componentId: "sc-ka5sdk-3"
})(["background-color:", ";border-radius:", ";height:4px;margin-bottom:", "px;width:54px;"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.colorTokens.neutral.icon_disabled;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.borderRadius20;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.spacing.unit(1);
});
export var DragHandle = styled.div.withConfig({
  displayName: "BottomSheetstyles__DragHandle",
  componentId: "sc-ka5sdk-4"
})(["display:flex;justify-content:center;touch-action:manipulation;"]);