"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.ThemeMixer = exports.ConnectedThemeProvider = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactRedux = require("react-redux");
var _styles = require("@material-ui/core/styles");
var _colors = require("@material-ui/core/colors");
var _merge = _interopRequireDefault(require("lodash/merge"));
var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
var _set = _interopRequireDefault(require("lodash/set"));
var _Selectors = require("../../Reducers/Configurator/Selectors");
var _getUrl = require("../../Utils/getUrl");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var darkTextColor = '#282828';
var defaultTheme = {
  // this has to be added, see: https://material-ui.com/style/typography/#migration-to-typography-v2
  typography: {
    useNextVariants: true,
    h1: {
      color: darkTextColor
    },
    h2: {
      color: darkTextColor
    },
    h3: {
      color: darkTextColor
    },
    h4: {
      color: darkTextColor
    },
    h5: {
      color: darkTextColor
    },
    h6: {
      color: darkTextColor
    },
    subtitle1: {
      color: darkTextColor
    },
    subtitle2: {
      color: darkTextColor
    },
    body1: {
      color: darkTextColor
    },
    body2: {
      color: darkTextColor
    },
    button: {
      color: darkTextColor
    },
    caption: {
      color: darkTextColor
    },
    overline: {
      color: darkTextColor
    }
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 568,
      // iPhone 5 problematic (width = 568 < 600..)
      md: 960,
      lg: 1280,
      xl: 1920
    }
  },
  // use this variables instead of directly writing the media query
  orientation: {
    landscape: '@media (orientation: landscape)',
    portrait: '@media (orientation: portrait)'
  },
  palette: {
    primary: {
      main: '#ffffff',
      darkText: darkTextColor,
      success: '#4fc36d',
      warning: '#ffb800',
      error: '#ed1C29'
    },
    secondary: {
      dark: '#212121',
      main: '#C8C8C8',
      light: '#76777A',
      lighter: '#C4C4C4'
    }
  },
  tapHighlightColor: 'transparent',
  overrides: {
    MuiFormLabel: {
      root: {
        '&$focused': {
          color: '#C8C8C8'
        }
      }
    },
    MuiButton: {
      outlined: {
        color: darkTextColor
      },
      root: {
        textAlign: 'left',
        textTransform: 'none'
      }
    },
    MuiIcon: {
      root: {
        color: darkTextColor
      }
    },
    MuiOutlinedInput: {
      root: {
        color: darkTextColor,
        '&$focused': {
          '& $notchedOutline': {
            borderColor: '#C8C8C8'
          }
        }
      }
    },
    Designer: {
      root: {
        margin: '20px'
      }
    },
    'Designer-Editor': {
      graphicsEditorContainer: {
        backgroundColor: 'transparent',
        backgroundImage: 'none',
        // Set overflow to visible to prevent scrollbars. Later when it comes to zooming,
        // a custom class might be added to set the overflow 'auto' again when canvas > container.
        overflow: 'visible',
        border: '1px solid gray'
      }
    },
    'Designer-CanvasContainer': {
      canvasContainer: {
        '& canvas': {
          backgroundColor: 'rgba(255,255,255,0.5)',
          //boxShadow: '0px 0px 0px 1px gray',
          //border: '1px solid gray',
          boxSizing: 'border-box'
        }
      }
    },
    'Designer-SelectionToolbox': {
      selectionToolboxContainer: {
        position: 'relative',
        top: 'auto'
      }
    },
    'Designer-TextTools': {
      textEditorContent: {
        border: 0,
        width: '100%',
        outline: 0,
        maxHeight: 22,
        overflowX: 'hidden',
        overflowY: 'auto',
        backgroundColor: 'transparent'
      }
    }
  },
  // custom part
  layout: {
    sidebar: {
      width: 350
    }
  },
  buttons: {
    mainBtn: {
      backgroundColor: darkTextColor
    },
    mainBtnHover: {
      backgroundColor: _colors.grey[700]
    }
  },
  smallScreen: {
    padding: '16px',
    centeredDialogPadding: '32px'
  },
  creator: {
    viewSelectBreakpoint: 1150,
    option: {
      image: {
        width: '100px'
      },
      textArea: {
        textWidth: '160px'
      }
    },
    productPart: {
      captionPaddingTop: '4px',
      itemSize: '110px',
      selectedItemSize: '118px',
      lineHeight: '1em',
      markerThickness: '8px'
    },
    productPartsList: {
      marginLeft: 10,
      marginBottom: '10px',
      markerVerticalPosition: 'right',
      paddingTop: 100
    }
  },
  designer: {
    imageEditDialog: {
      errorColor: '#ff0000'
    }
  }
};
var loadClientFont = function loadClientFont(fontName, url) {
  var clientFont = document.createElement('style');
  clientFont.appendChild(document.createTextNode('@font-face { font-family: "' + fontName + '"; src: url("' + url + '"); }, '));
  document.head.appendChild(clientFont);
};
var createThemeFromClientTheme = function createThemeFromClientTheme(clientTheme, customTheme) {
  var theme = {};
  if (clientTheme.highlightColor) {
    (0, _set["default"])(theme, 'palette.primary.main', clientTheme.highlightColor);
    (0, _set["default"])(theme, 'overrides.Designer-Editor.graphicsEditorContainer.borderColor', clientTheme.highlightColor);
  }
  if (clientTheme.font) {
    var fontUrl = (0, _getUrl.getUrl)(clientTheme.font);
    var fontName = clientTheme.font.substring(clientTheme.font.lastIndexOf('/') + 1, clientTheme.font.indexOf('.'));
    loadClientFont(fontName, fontUrl);
    (0, _set["default"])(theme, 'typography.fontFamily', fontName);
  }
  return (0, _merge["default"])((0, _cloneDeep["default"])(defaultTheme), customTheme, theme);
};
var mapStateToProps = function mapStateToProps(state) {
  return {
    client: (0, _Selectors.getClient)(state.configurator)
  };
};
var ThemeMixer = exports.ThemeMixer = function ThemeMixer(_ref) {
  var client = _ref.client,
    customTheme = _ref.customTheme,
    withTheme = _ref.withTheme,
    children = _ref.children;
  var themeMix = (0, _react.useMemo)(function () {
    var theme = (0, _styles.createTheme)(createThemeFromClientTheme(client && client.theme ? client.theme : {}, customTheme || {}));
    if (typeof withTheme === 'function') {
      withTheme(theme);
    }
    return theme;
  }, [client, customTheme, withTheme]);
  return /*#__PURE__*/_react["default"].createElement(_styles.MuiThemeProvider, {
    theme: themeMix
  }, children);
};
ThemeMixer.defaultProps = {
  client: {},
  customTheme: {},
  withTheme: null
};
var ConnectedThemeProvider = exports.ConnectedThemeProvider = (0, _reactRedux.connect)(mapStateToProps)(ThemeMixer);
var _default = exports["default"] = ConnectedThemeProvider;