/*
Copyright 2021 Q-CTRL. All rights reserved.

Licensed under the Q-CTRL Terms of service (the "License"). Unauthorized
copying or use of this file, via any medium, is strictly prohibited.
Proprietary and confidential. You may not use this file except in compliance
with the License. You may obtain a copy of the License at

     https://q-ctrl.com/terms

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS. See the
License for the specific language.
*/
const _ = require("lodash");

const {
  flattenColorPalette,
  removeHash
} = require("../utilities/convertColors");

const opacity = require("./opacity");

const {
  rotate
} = require("./transform");

const {
  spacing
} = require("./spacing");

const colors = require("./colors");
/*
Gradient Directions:
Converts Rotations into Gradient Dirctions which can then be passed as background images.
*/


function setDirections(targetObj) {
  const newObj = {};
  Object.entries(targetObj).forEach(([key, value]) => {
    let newClass = '';

    if (key < 0) {
      newClass = `-gradient-to${key}`;
    } else {
      newClass = `gradient-to-${key}`;
    }

    newObj[newClass] = `linear-gradient(${value}, var(--tw-gradient-stops))`;
  });
  return newObj;
}

let gradientDirection = setDirections(rotate);
/*
Gradient Opacity:
Converts Opacity into Gradient Opacity.
*/

const gradientStopPosition = {
  "0": "0%",
  "5": "5%",
  "10": "10%",
  "15": "15%",
  "20": "20%",
  "25": "25%",
  "30": "30%",
  "35": "35%",
  "40": "40%",
  "45": "45%",
  "50": "50%",
  "55": "55%",
  "60": "60%",
  "65": "65%",
  "70": "70%",
  "75": "75%",
  "80": "80%",
  "85": "85%",
  "90": "90%",
  "95": "95%",
  "100": "100%"
};
/*
Gradient Opacity:
Converts Opacity into Gradient Opacity.
*/

const gradientOpacity = {
  "0": "0",
  ...opacity,
  "100": "1"
};
const backgroundSize = {
  'auto': 'auto',
  'cover': 'cover',
  'contain': 'contain',
  '25%': '25%',
  '50%': '50%',
  '75%': '75%',
  '100%': '100%',
  '150%': '150%',
  '200%': '200%',
  '300%': '300%',
  '1000%': '1000%',
  ...spacing
}; // Generate background-image classes with colored circle svgs to be used with radio inputs.

const bgColors = flattenColorPalette(colors);
let bgCircle = {};

_.map(bgColors, (value, key) => {
  if (value == 'currentColor') {
    return null;
  }

  return bgCircle[`circle-${key}`] = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23${removeHash(value)}' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")`;
});

let bgCheck = {};

_.map(bgColors, (value, key) => {
  if (value == 'currentColor') {
    return null;
  }

  return bgCheck[`check-${key}`] = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23${removeHash(value)}' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' /%3E%3C/svg%3E")`;
});
/*
Background Images:
Extends Tailwinds default background images with Q-CTRL spcific patterens and gradients.
*/


const backgroundImage = {
  'transparent-image': 'repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor)',
  'stripes': 'linear-gradient(45deg,currentColor 12.5%,transparent 12.5%,transparent 50%,currentColor 50%,currentColor 62.5%,transparent 62.5%,transparent 100%)',
  'gradient': 'linear-gradient(var(--tw-gradient-direction), var(--tw-gradient-stops))',
  ...gradientDirection,
  ...bgCircle,
  ...bgCheck
};
module.exports = {
  backgroundSize,
  backgroundImage,
  gradientStopPosition,
  gradientOpacity
};