import { deepFreeze } from 'grommet/es6/utils';
import { deepMerge } from 'grommet/es6/utils';

import { rgba } from 'polished';
import base from './base';
import colorsFromArray from './colorsFromArray';
import colorsFromObject from './colorsFromObject';

var brandColor = '#00ABD4';
var accentColors = ['#FF4081', '#FFC107', '#9C27B0', '#673AB7'];
var neutralColors = ['#795548', '#009688', '#8BC34A', '#CDDC39', '#FF9800'];
var statusColors = {
  critical: '#FF4081',
  error: '#F44336',
  warning: '#FFEB3B',
  ok: '#4CAF50',
  unknown: '#9E9E9E',
  disabled: '#9E9E9E'
};
var shadowColor = 'rgba(50, 50, 50, 0.50)';
var focusColor = accentColors[0];
var activeColor = rgba('#666666', 0.5);
var colors = {
  active: activeColor,
  brand: brandColor,
  black: brandColor,
  focus: focusColor,
  control: {
    dark: '#ffffff',
    light: '#333333'
  }
};

colorsFromArray(colors, accentColors, 'accent');
colorsFromArray(colors, neutralColors, 'neutral');
colorsFromObject(colors, statusColors, 'status');

export default deepFreeze(deepMerge(base, {
  global: {
    colors: colors,
    drop: {
      background: '#f8f8f8',
      border: {
        width: '0px',
        radius: '0px'
      }
    },
    hover: {
      backgroundColor: '#e9e9e9',
      textColor: '#000000'
    },
    focus: {
      border: {
        color: brandColor
      }
    },
    elevation: {
      none: 'none',
      xsmall: '0px 1px 2px ' + shadowColor,
      small: '0px 2px 4px ' + shadowColor,
      medium: '0px 3px 8px ' + shadowColor,
      large: '0px 6px 12px ' + shadowColor,
      xlarge: '0px 8px 16px ' + shadowColor
    },
    font: {
      family: "'Roboto', sans-serif",
      face: '\n        /* latin */\n        @font-face {\n          font-family: \'Roboto\';\n          font-style: normal;\n          font-weight: 100;\n          src: local(\'Roboto Thin\'), local(\'Roboto-Thin\'), url(https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2) format(\'woff2\');\n          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n        }\n        /* latin */\n        @font-face {\n          font-family: \'Roboto\';\n          font-style: normal;\n          font-weight: 300;\n          src: local(\'Roboto Light\'), local(\'Roboto-Light\'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format(\'woff2\');\n          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n        }\n        /* latin */\n        @font-face {\n          font-family: \'Roboto\';\n          font-style: normal;\n          font-weight: 400;\n          src: local(\'Roboto\'), local(\'Roboto-Regular\'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format(\'woff2\');\n          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n        }\n        /* latin */\n        @font-face {\n          font-family: \'Roboto\';\n          font-style: normal;\n          font-weight: 500;\n          src: local(\'Roboto Medium\'), local(\'Roboto-Medium\'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format(\'woff2\');\n          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n        }\n        /* latin */\n        @font-face {\n          font-family: \'Roboto\';\n          font-style: normal;\n          font-weight: 700;\n          src: local(\'Roboto Bold\'), local(\'Roboto-Bold\'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format(\'woff2\');\n          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n        }\n        /* latin */\n        @font-face {\n          font-family: \'Roboto\';\n          font-style: normal;\n          font-weight: 900;\n          src: local(\'Roboto Black\'), local(\'Roboto-Black\'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2) format(\'woff2\');\n          unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n        }\n      ',
      size: '16px'
    },
    input: {
      border: {
        radius: '0px'
      }
    }
  },
  button: {
    border: {
      radius: '0px'
    }
  },
  checkBox: {
    border: {
      color: {
        light: 'rgba(0, 188, 212, 0.5)',
        dark: 'rgba(255, 255, 255, 0.5)'
      }
    },
    check: {
      radius: '0px'
    },
    color: brandColor,
    toggle: {
      color: {
        dark: '#bdbdbd',
        light: brandColor
      }
    }
  },
  layer: {
    border: {
      radius: '0px'
    }
  },
  tag: {
    border: {
      round: 'small'
    }
  },
  radioButton: {
    border: {
      color: {
        light: 'rgba(0, 188, 212, 0.5)',
        dark: 'rgba(255, 255, 255, 0.5)'
      }
    }
  },
  heading: {
    font: false
  },
  anchor: {
    color: {
      light: '#0d5b8e',
      dark: '#cee3eb'
    }
  }
}));