import {
  colors,
  grid_conf,
  radius,
  responsiveMedia,
  shadows,
  spaces,
  spacesNegative,
  typography
} from './variables';
import config, { makeMedia } from './grid';

export const fontSize = (typo) => {
  return `
    ${typography[typo]?.sizeMob ? `
      font-size: ${typography[typo].sizeMob};

      @media only screen and (min-width: ${responsiveMedia}) {
        font-size: ${typography[typo].size};
      }
    ` : `
      font-size: ${typography[typo].size};
    `}

    line-height: ${typography[typo].height};
  `
}

const spacers = {
  "auto": "auto",
  ...spaces
}


export const utilities = {
  "align": {
    property: "vertical-align",
    class: "align",
    values: {
      top: "top",
      middle: "middle",
      bottom: "bottom"
    },
  },
  "display": {
    responsive: true,
    property: "display",
    class: "d",
    values: {
      "inline-block": "inline-block",
      "inline-flex": "inline-flex",
      block: "block",
      table: "table",
      flex: "flex",
      none: "none"
    },
  },
  "position": {
    property: "position",
    values: {
      relative: "relative",
      absolute: "absolute",
      fixed: "fixed"
    },
  },
  "width": {
    responsive: true,
    property: "width",
    class: "w",
    values: {
      100: "100%",
      auto: "auto"
    }
  },
  "height": {
    property: "height",
    class: "h",
    values: {
      100: "100%",
      auto: "auto"
    }
  },
  "flex-grow": {
    responsive: true,
    property: "flex-grow",
    values: {
      0: "0",
      1: "1",
    }
  },
  "flex-shrink": {
    responsive: true,
    property: "flex-shrink",
    values: {
      0: "0",
      1: "1",
    }
  },
  "flex-wrap": {
    responsive: true,
    property: "flex-wrap",
    class: 'flex',
    values: {
      wrap: "wrap",
      nowrap: "nowrap"
    },
  },
  "justify-content": {
    responsive: true,
    property: "justify-content",
    values: {
      start: "flex-start",
      end: "flex-end",
      center: "center",
      between: "space-between",
      around: "space-around",
      evenly: "space-evenly",
    }
  },
  "align-items": {
    responsive: true,
    property: "align-items",
    values: {
      start: "flex-start",
      end: "flex-end",
      center: "center",
      baseline: "baseline",
      stretch: "stretch",
    }
  },
  "align-content": {
    responsive: true,
    property: "align-content",
    values: {
      start: "flex-start",
      end: "flex-end",
      center: "center",
      between: "space-between",
      around: "space-around",
      stretch: "stretch",
    }
  },
  "align-self": {
    responsive: true,
    property: "align-self",
    values: {
      auto: "auto",
      start: "flex-start",
      end: "flex-end",
      center: "center",
      baseline: "baseline",
      stretch: "stretch",
    }
  },
  "order": {
    responsive: true,
    property: "order",
    values: {
      first: -1,
      0: 0,
      1: 1,
      2: 2,
      3: 3,
      4: 4,
      5: 5,
      last: 6,
    },
  },
  "margin": {
    responsive: true,
    property: "margin",
    class: "m",
    values: spacers
  },
  "margin-top": {
    responsive: true,
    property: "margin-top",
    class: "mt",
    values: spacers
  },
  "negative-margin-top": {
    responsive: true,
    property: "margin-top",
    class: "mt-neg",
    values: spacesNegative
  },
  "margin-end": {
    responsive: true,
    property: "margin-right",
    class: "me",
    values: spacers
  },
  "margin-bottom": {
    responsive: true,
    property: "margin-bottom",
    class: "mb",
    values: spacers
  },
  "margin-start": {
    responsive: true,
    property: "margin-left",
    class: "ms",
    values: spacers
  },
  "padding": {
    responsive: true,
    property: "padding",
    class: "p",
    values: spaces
  },
  "padding-top": {
    responsive: true,
    property: "padding-top",
    class: "pt",
    values: spaces
  },
  "padding-end": {
    responsive: true,
    property: "padding-right",
    class: "pe",
    values: spaces
  },
  "padding-bottom": {
    responsive: true,
    property: "padding-bottom",
    class: "pb",
    values: spaces
  },
  "padding-start": {
    responsive: true,
    property: "padding-left",
    class: "ps",
    values: spaces
  },
  "font-weight": {
    property: "font-weight",
    class: "fw",
    values: {
      light: 300,
      regular: 400,
      semibold: 600,
      bold: 700,
      black: 800
    }
  },
  "text-align": {
    responsive: true,
    property: "text-align",
    class: "text",
    values: {
      start: "left",
      end: "right",
      center: "center",
    }
  },
  "text-transform": {
    property: "text-transform",
    class: "text",
    values: {
      lowercase: "lowercase",
      uppercase: "uppercase",
      capitalize: "capitalize"
    }
  },
  "color": {
    property: "color",
    class: "color",
    values: colors
  },
  "bg": {
    property: "background-color",
    class: "bg",
    values: colors
  },
  "shadow": {
    property: "box-shadow",
    class: "shadow",
    values: shadows
  },
  "radius": {
    property: "border-radius",
    class: "radius",
    values: radius
  },
};

export function generateUtilities(utility, breakpoint) {
  const property = utilities[utility]?.property;
  const className = utilities[utility]?.class || property;
  const values = utilities[utility]?.values;
  const responsive = utilities[utility]?.responsive;
  let cssSelector = "";

  Object.keys(values).map((key, i) => {
    cssSelector += `.${`${className}-${key}`}{
      ${property}: ${values[key]};
    }`;
  })

  Object.keys(values).map((key, i) => {
    if (responsive) {
      cssSelector += `
      ${`.${className}-md-${key}`}{
        @media (min-width: ${grid_conf.breakpoints.$md}){
          ${property}: ${values[key]};
        }
      }
    `
    }
  })

  return cssSelector;
}