const plugin = require('tailwindcss/plugin');

import {
  getGridClampSpacing,
  getScreens,
  getAspectRatio,
  getContainer,
} from 'blockbite-tailwind';

const containerFluid = require('blockbite-tailwind/components/fluid-container');
const containerGrid = require('blockbite-tailwind/components/grid-container');
const anchorPosition = require('blockbite-tailwind/components/anchor-position');
const viewportDimensions = require('blockbite-tailwind/plugins/viewport-dimensions');
const gridArea = require('blockbite-tailwind/gridarea');
const animatedTailwind = require('blockbite-tailwind/motion');
const grid_clamp_spacing = getGridClampSpacing('b_');
const interaction = require('blockbite-tailwind/components/interaction');

function getPlugins() {
  return [
    containerFluid,
    containerGrid,
    gridArea,
    viewportDimensions,
    animatedTailwind,
    anchorPosition,
    interaction,
    anchorPosition,
  ];
}

export const createTailwindConfig = () => {
  let tailwindConfig = {
    important: '#b_',
    theme: {
      container: getContainer(),
      extend: {
        spacing: grid_clamp_spacing,
        gap: grid_clamp_spacing,
        minWidth: grid_clamp_spacing,
        maxWidth: grid_clamp_spacing,
        minHeight: grid_clamp_spacing,
        maxHeight: grid_clamp_spacing,
        aspectRatio: getAspectRatio(),
        screens: getScreens('b_'),
        borderWidth: {
          1: '1px',
        },
      },
    },
    plugins: [],
  };
  return tailwindConfig;
};

const tokenReducer = (tokens: any) => {
  if (tokens == null) {
    return {};
  }
  return tokens.reduce((acc: any, item: any) => {
    acc[item.token] = item.value;
    return acc;
  }, {});
};

export const updateTailwindTheme = (store: any) => {
  const { colors, fonts, fontSizes } = store.getTheme();

  const extendColors = {
    ...tokenReducer(colors),
  };
  const extendFontFamily = {
    ...tokenReducer(fonts),
  };
  const extendFontSize = {
    ...tokenReducer(fontSizes),
  };
  return {
    extendColors,
    extendFontFamily,
    extendFontSize,
  };
};

export const getBiteUtilsPlugin = (store: any) => {
  return plugin(function ({ addUtilities }: any) {
    const utils = store.getUtils();

    if (utils.length > 0) {
      const utilObject: { [key: string]: any } = {};
      utils.forEach((item: any) => {
        if (item.tw) {
          utilObject[`.${item.id}`] = {
            [`@apply ${item.tw.trim()}`]: {},
          };
        }
      });
      addUtilities(utilObject);
    }
  });
};

// update the utils add them to the tailwind config
export const updateTailwindPlugins = (utils: any, theme: any) => {
  const plugins = [
    ...getPlugins(),
    plugin(function ({
      addVariant,
      addBase,
      config,
    }: {
      addVariant: (
        name: string,
        generator:
          | string
          | (({
              modifySelectors,
              separator,
            }: {
              modifySelectors: (
                modifierFunction: (selector: string) => string
              ) => void;
              separator: string;
            }) => void)
      ) => void;
      addUtilities: (
        utilities: Record<string, any>,
        options?: {
          variants?: string[];
          respectPrefix?: boolean;
          respectImportant?: boolean;
        }
      ) => void;
      addComponents: (
        components: Record<string, any>,
        options?: { variants?: string[]; respectPrefix?: boolean }
      ) => void;
      addBase: (baseStyles: Record<string, any>) => void;
      config: (path: string) => any;
    }) {
      // interaction variants
      addVariant('b_active-child', '.b_active &');
      addVariant('b_active', '&.b_active');

      if (utils.length > 0) {
        const baseObject: { [key: string]: any } = {};
        utils.forEach((item: any) => {
          // check if has a related bit
          if (item.related && item.related.length > 0) {
            item.related.forEach((related: any) => {
              // check if id in in the utils
              const relatedUtil = utils.find(
                (util: any) => util.id === related
              );
              // if the related bit is not in the utils or has an empty string
              if (!relatedUtil?.tw) {
                item.tw = item.tw.replace(related, '');
              }
            });
          }
          if (item.tw) {
            baseObject[`#b_ .${item.id}`] = {
              [`@apply ${item.tw.trim()}`]: {},
            };
          }
        });
        addBase(baseObject);
      }

      let headings: Record<string, any> = {};

      if (theme?.headings) {
        theme.headings.forEach((heading: any) => {
          const lineHeight = heading?.optional?.lineHeight;
          const fontFamily = heading?.optional?.font;

          if (heading.name) {
            headings[`#b_ ${heading.name}`] = {
              fontSize: config(`theme.fontSize.${heading.value}`),
              lineHeight: lineHeight ? lineHeight : 1.4,
            };
          }
          if (fontFamily) {
            headings[`#b_ ${heading.name}`].fontFamily = config(
              `theme.fontFamily.${fontFamily}`
            );
          }
        });

        if (Object.keys(headings).length > 0) {
          addBase(headings);
        }
      }
    }),
  ];
  return plugins;
};

export default {
  updateTailwindPlugins,
  updateTailwindTheme,
  createTailwindConfig,
  getBiteUtilsPlugin,
};