import-Figma-tokens.js

import { RGBToHEX } from "./RGB-to-HEX";
import { toCamelCase } from "./to-camel-case";
import { downloadJSON } from "./download-JSON";

/////////////// Get Functions ///////////////
/////////////////////////////////////////////
////////////////// Spacers //////////////////

const getSpacers = (stylesArtboard) => {
  let spacers = {};

  const spacersAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Spacers";
  })[0].children;

  const spacersGroup = spacersAtrboard.filter((item) => {
    return item.name.includes("$");
  })[0].children;

  spacersGroup.map((item) => {
    const spacerObj = {
      [item.children[0].name.toLowerCase()]: `${
        item.absoluteBoundingBox.height
      }px`
    };

    return Object.assign(spacers, spacerObj);
  });

  return spacers;
};

////////////////// Palette //////////////////

const getColors = (stylesArtboard) => {
  let palette = {};

  const paletteAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Palettes";
  })[0].children;

  const palettesGroups = paletteAtrboard.filter((item) => {
    return item.name.includes("$");
  });

  palettesGroups.map((item, i) => {
    let currentColors = {};

    item.children.forEach((item) => {
      Object.assign(currentColors, {
        [item.name]: RGBToHEX(
          item.backgroundColor.r,
          item.backgroundColor.g,
          item.backgroundColor.b
        )
      });
    });

    const paletteObj = {
      [item.name.substr(1)]: currentColors
    };

    return Object.assign(palette, paletteObj);
  });

  return palette;
};

////////////////// Spacers //////////////////

const getGrids = (stylesArtboard) => {
  let grids = {};

  const gridsAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Grids";
  })[0].children;

  const gridsArr = gridsAtrboard.filter((item) => {
    return item.name.includes("$");
  });

  gridsArr.map((item) => {
    const gridObj = {
      [item.name.substr(1)]: {
        columns: item.layoutGrids[0].count,
        sideMargin: `${item.layoutGrids[0].offset}px`,
        gutter: `${item.layoutGrids[0].gutterSize}px`,
        breakpoint: `${item.absoluteBoundingBox.width}px`
      }
    };

    return Object.assign(grids, gridObj);
  });

  return grids;
};

////////////////// Typography //////////////////

const getFonts = (stylesArtboard) => {
  let fonts = {};

  const fontsAtrboard = stylesArtboard.filter((item) => {
    return item.name === "Fonts";
  })[0].children;

  const fontsGroup = fontsAtrboard.filter((item) => {
    return item.name.includes("$");
  })[0].children;

  fontsGroup.map((item) => {
    const fontObj = {
      [toCamelCase(item.name)]: {
        fontFamily: item.style.fontFamily,
        postscriptFontFamily: item.style.fontPostScriptName,
        fontSize: `${item.style.fontSize}px`,
        fontWeight: item.style.fontWeight,
        lineHeight: `${Math.ceil(item.style.lineHeightPx)}px`,
        letterSpacing:
          item.style.letterSpacing !== 0
            ? `${item.style.letterSpacing}px`
            : item.style.letterSpacing
      }
    };

    return Object.assign(fonts, fontObj);
  });

  return fonts;
};

///////////////// Main Function /////////////////
/////////////////////////////////////////////////

const fileID = "your file id"
const figmaToken = "your Figma token"

export const importFigmaTokens = async (e) => {
  e.preventDefault();
  const result = await fetch(
    `https://api.figma.com/v1/files/${fileID}`,
    {
      method: "GET",
      headers: {
        "X-Figma-Token": figmaToken
      }
    }
  );
  const figmaFullStructure = await result.json();
  const figmaArtboards = figmaFullStructure.document.children[0].children;

  // JSON
  const tokeensJSON = {
    grids: {},
    spacers: {},
    colors: {},
    typography: {}
  };

  Object.assign(tokeensJSON.spacers, getSpacers(figmaArtboards));
  Object.assign(tokeensJSON.colors, getColors(figmaArtboards));
  Object.assign(tokeensJSON.grids, getGrids(figmaArtboards));
  Object.assign(tokeensJSON.typography, getFonts(figmaArtboards));

  downloadJSON(tokeensJSON, "design-tokens");
};