/* eslint no-console: ["error", { allow: ["log", "error"] }] */

/* 
TODO:
Create a Class for endpointFilters.
Make a function that only fetches and returns just the category requested in a JSON file.
Make a function that creates a list of buttons to copy the desired component to the clipboard.
*/

import { CopyJSONButton } from '@finsweet/ts-utils';

window.Webflow ||= [];
window.Webflow.push(() => {
  const memberToken =
    'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImQ3NjM1OGNmYjc4NzdhZTdjYWE4ZDdjNTY3YjYwZjdhY2YzZmQ0MjQifQ.eyJpZCI6IjYyZTViZjFiMGYwMjBiMDAwNDI1MmJhNyIsImVtYWlsIjoidG9vbHNAd29uZGVydXAuaW8iLCJzaXRlIjoiNjE4MWNjNDg4NGY1MGQwMDA0ZWVkZGEzIiwiaWF0IjoxNjc0ODg3MjE2LCJleHAiOjE2NzU0OTIwMTZ9.UeKGX1cey8Z9sIZiJ2Zz4nTECjxqpeQ5H0Uz9mMh13mT8YchbsGdPQweUDn6KlSTwYaEr0CyV3Nx5hEOpfhzoBJ2bzmGI2RWf5-EvfYb9xIjZzAojPOqT2_4HX339vH4UWNdYd_AlwcclU54FqOYcRASHRdkNLwq1rppuQaOZIgobWUoUNDDtGBr7BopR45yLxA_Aj2Xz-O_U4bjFqgWn7DeQv3OALIC-z1Biabd25W8pBNNQYGuT5PXQxPAYdaH5cBTAZqmIsN5G05gFioAdEAWU8NLCEBsJTg3hbTxDKft03zpyFXq630pqEzLwyYf3KCKYqRa-2nKEF8d_xNvgWtPeRo6Zgh3G2Jpxxs-hJr9LIehjtmbQIRBW6RXgD9f8KGn-EQEQZ020KtnDU2RH-AZph_g5UYf-pB4Qd2K82qrMKD2n-IjmtXFY9dfAwbNAuv7V6SMnfARda16tm5lWOgOG68uouz5B4NRmT3b8p-roIexU9Gjkm5mv7xs0B3Sp8t7i-X6ZaNd5Y8QI96ZXP8AGndiW5az2cHJw-pdL3tT1wqqSYrKIevKRram5fmXlq6EUczp6Xii9hMhiYtcqGbL8ELPSsJvUsvn_zbGNjU9YY8VWlI9ToS5cyopz-vg3mdsgcPkeC-IMKWTGF-Eie-23DpVRz5-RDFmuqW3R4M';

  const endpointFilters = [
    {
      counter: 0,
      category: 'navbars',
      component: 'navbar#_component',
      increase: function () {
        this.counter = this.counter + 1;
      },
    },
    {
      counter: 0,
      category: 'footers',
      component: 'footer#_component',
      increase: function () {
        this.counter = this.counter + 1;
      },
    },
    {
      category: 'hero-header-sections',
      component: '',
    },
    {
      category: 'header-sections',
      component: '',
    },
    {
      category: 'feature-sections',
      component: '',
    },
    {
      category: 'cta-sections',
      component: '',
    },
    {
      category: 'contact-sections',
      component: '',
    },
    {
      category: 'pricing-sections',
      component: '',
    },
    {
      category: 'testimonial-sections',
      component: '',
    },
    {
      category: 'faq-sections',
      component: '',
    },
    {
      category: 'logo-sections',
      component: '',
    },
    {
      category: 'team-sections',
      component: '',
    },
    {
      category: 'blog-header-sections',
      component: '',
    },
    {
      category: 'blog-sections',
      component: '',
    },
    {
      category: 'blog-posts',
      component: '',
    },
    {
      category: 'career-sections',
      component: '',
    },
    {
      category: 'gallery-sections',
      component: '',
    },
    {
      category: 'contact-modals',
      component: '',
    },
    {
      category: 'banners',
      component: '',
    },
    {
      category: 'portfolio-sections',
      component: '',
    },
    {
      category: 'signup-login-pages',
      component: '',
    },
    {
      category: 'signup-login-modals',
      component: '',
    },
    {
      category: 'product-list-sections',
      component: '',
    },
    {
      category: 'tables',
      component: '',
    },
    {
      category: 'product-headers',
      component: '',
    },
    {
      category: 'category-filters',
      component: '',
    },
  ];

  async function fetchAPI(category: string, component: string) {
    const response = await fetch(
      `https://apis.relume.io/v1/component/relume/${category}/${component}/?member_token=${memberToken}`
    );
    const data = await response.json();
    return data;
  }

  async function fetchComponentsFrom(category: string) {
    const categoryFetched = [];

    try {
      const categoryIndex = endpointFilters.findIndex((x) => x.category === category);
      let finishedFetchingCategory = false;

      while (!finishedFetchingCategory) {
        endpointFilters[categoryIndex].increase();
        const componentName = endpointFilters[categoryIndex].component.replace(
          '#',
          endpointFilters[categoryIndex].counter
        );

        const result = await fetchAPI(endpointFilters[categoryIndex].category, componentName);

        if (result.status === 'fail' && result.reason === "Can't find component") {
          finishedFetchingCategory = true;
          console.log(`Finished fetching ${endpointFilters[categoryIndex].category}`);
        } else {
          console.log(`Fetching ${componentName} from ${endpointFilters[categoryIndex].category}`);

          categoryFetched.push({
            name: componentName,
            json: result,
          });
        }
      }
    } catch (error) {
      console.error(error);
    }

    return categoryFetched;
  }

  fetchComponentsFrom('navbars').then((result) => {
    console.log(result);
  });

  /* 
  
  const component = async (endpoint: string) => {
    const result = await fetchAPI(endpointFilters[0].category, endpointFilters[0].component);
    //@webflow/XscpData
    const caca = new CopyJSONButton({
      element: document.querySelector('#copy-button'),
      copyData: result,
      successText: 'Copied!',
      errorText: 'Something went wrong',
      notificationDuration: 500,
      successCSSClass: 'success',
    });
  };
  component(endpoint); */
});