import { HexToRGBA } from './colorPicker';
import Translation from './translation';
import { trim } from './utils';

const STORAGE_KEY = 'painterro-data';

let settings = {};

function loadSettings() {
  try {
    settings = JSON.parse(localStorage.getItem(STORAGE_KEY));
  } catch (e) {
    console.error(`Unable get from localstorage: ${e}`);
  }
  if (!settings) {
    settings = {};
  }
}

export function setParam(name, val) {
  settings[name] = val;
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
  } catch (e) {
    console.error(`Unable save to localstorage: ${e}`);
  }
}

export function setDefaults(parameters) {
  loadSettings();
  const params = parameters || {};
  params.activeColor = settings.activeColor || params.activeColor || '#ff0000';
  params.activeColorAlpha = settings.activeColorAlpha || params.activeColorAlpha || 1.0;
  params.activeAlphaColor = HexToRGBA(params.activeColor, params.activeColorAlpha);

  params.activeFillColor = settings.activeFillColor || params.activeFillColor || '#000000';
  params.activeFillColorAlpha = settings.activeFillColorAlpha || params.activeFillColorAlpha || 0.0;
  params.activeFillAlphaColor = HexToRGBA(params.activeFillColor, params.activeFillColorAlpha);

  params.initText = params.initText || null;
  params.initTextColor = params.initTextColor || '#808080';
  params.initTextStyle = params.initTextStyle || '26px \'Open Sans\', sans-serif';
  params.defaultLineWidth = settings.defaultLineWidth || params.defaultLineWidth || 5;
  params.defaultFontSize = settings.defaultFontSize || params.defaultFontSize || 24;
  params.backgroundFillColor = settings.backgroundFillColor || params.backgroundFillColor || '#ffffff';
  params.backgroundFillColorAlpha = settings.backgroundFillColorAlpha ||
    params.backgroundFillColorAlpha || 1.0;
  params.backgroundFillAlphaColor = HexToRGBA(params.backgroundFillColor,
    params.backgroundFillColorAlpha);

  params.hiddenTools = params.hiddenTools || [];
  params.pixelizePixelSize = settings.pixelizePixelSize || params.pixelizePixelSize || '20%';

  params.colorScheme = params.colorScheme || {};
  params.colorScheme.main = params.colorScheme.main || '#dbebff';
  params.colorScheme.control = params.colorScheme.control || '#abc6ff';
  params.colorScheme.controlContent = params.colorScheme.controlContent || '#000000';
  params.colorScheme.hoverControl = params.colorScheme.hoverControl || params.colorScheme.control;
  params.colorScheme.hoverControlContent = params.colorScheme.hoverControlContent || '#1a3d67';

  params.colorScheme.activeControl = params.colorScheme.activeControl || '#7485B1';
  params.colorScheme.activeControlContent = params.colorScheme.activeControlContent ||
    params.colorScheme.main;
  params.colorScheme.inputBorderColor = params.colorScheme.inputBorderColor ||
    params.colorScheme.main;
  params.colorScheme.inputBackground = params.colorScheme.inputBackground || '#ffffff';
  params.colorScheme.inputText = params.colorScheme.inputText ||
    params.colorScheme.activeControl;
  params.colorScheme.backgroundColor = params.colorScheme.backgroundColor || '#999999';
  params.colorScheme.dragOverBarColor = params.colorScheme.dragOverBarColor || '#899dff';

  params.defaultSize = params.defaultSize || 'fill';
  params.defaultPixelSize = params.defaultPixelSize || 4;
  if (params.defaultSize === 'fill') {
    params.defaultSize = {
      width: 'fill',
      height: 'fill',
    };
  } else {
    const wh = params.defaultSize.split('x');
    params.defaultSize = {
      width: trim(wh[0]),
      height: trim(wh[1]),
    };
  }

  if (params.translation) {
    const name = params.translation.name;
    Translation.get().addTranslation(name, params.translation.strings);
    Translation.get().activate(name);
  }

  params.styles =
    `.ptro-color-main{
        background-color: ${params.colorScheme.main};
        color: ${params.colorScheme.controlContent}}
    .ptro-color-control{
        background-color: ${params.colorScheme.control};
        color:${params.colorScheme.controlContent}}
    button.ptro-color-control:hover:not(.ptro-color-active-control):not([disabled]){
        background-color: ${params.colorScheme.hoverControl};
        color:${params.colorScheme.hoverControlContent}}    
    .ptro-bordered-control{border-color: ${params.colorScheme.activeControl}}
    .ptro-input, .ptro-input:focus {
      border: 1px solid ${params.colorScheme.inputBorderColor};
      background-color: ${params.colorScheme.inputBackground};
      color: ${params.colorScheme.inputText}
    }
    .ptro-bar-dragover{background-color:${params.colorScheme.dragOverBarColor}}
    .ptro-color,.ptro-bordered-btn{
      border: 1px solid ${params.colorScheme.inputBorderColor};
    }
    .ptro-color-control:active:enabled {
        background-color: ${params.colorScheme.activeControl};
        color: ${params.colorScheme.activeControlContent}}
    .ptro-color-active-control{
        background-color: ${params.colorScheme.activeControl};
        color:${params.colorScheme.activeControlContent}}
    .ptro-wrapper{background-color:${params.colorScheme.backgroundColor};}}`;

  return params;
}

@@ -593,32 +593,200 @@
  $%7Be%7D%60);%0A  %7D%0A%7D%0A%0A
+function getAlternative(...vals) %7B%0A  for (let i = 0; i %3C vals.length; i += 1) %7B%0A    if (vals%5Bi%5D !== undefined) %7B%0A      return vals%5Bi%5D;%0A    %7D%0A  %7D%0A  return undefined;%0A%7D%0A%0A
 export function 
@@ -964,32 +964,47 @@
 iveColorAlpha = 
+getAlternative(
 settings.activeC
@@ -1004,35 +1004,33 @@
 activeColorAlpha
- %7C%7C
+,
  params.activeCo
@@ -1029,39 +1029,38 @@
 activeColorAlpha
- %7C%7C
+,
  1.0
+)
 ;%0A  params.activ
@@ -1246,32 +1246,47 @@
 illColorAlpha = 
+getAlternative(
 settings.activeF
@@ -1298,19 +1298,21 @@
 lorAlpha
- %7C%7C
+,%0A   
  params.
@@ -1335,15 +1335,14 @@
 lpha
- %7C%7C
+,
  0.0
+)
 ;%0A  
@@ -1936,16 +1936,31 @@
 Alpha = 
+getAlternative(
 settings
@@ -1984,19 +1984,17 @@
 lorAlpha
- %7C%7C
+,
 %0A    par
@@ -2025,15 +2025,14 @@
 lpha
- %7C%7C
+,
  1.0
+)
 ;%0A  

fix storing 0 param values