// languages handler
server.get('/occ/v2/my-store/cms/languages', (_req, res) => {
   res.status(200).json({
    languages: [
      createLanguage(),
      createLanguage({
        isocode: 'de',
        name: 'German',
        nativeName: 'Deutsch',
      }),
      createLanguage({
        isocode: 'it',
        name: 'Italian',
        nativeName: 'Italiano',
      })
    ],
  });
});

const app: Express = express();
const serverHttp = http.createServer(app);

serverHttp.listen(portHttp, 
   (): void => console.log(`listening on http://localhost:${portHttp}`)
);

// pages handler
server.get('/occ/v2/my-store/cms/pages', (req, res) => {
   const url = getUrl(req);
   const pageLabelOrId = url.searchParams?.get('pageLabelOrId');
   const pageType = url.searchParams?.get('pageType');

   if (pageType === 'ContentPage' && pageLabelOrId) {
     // logic to return a content page
     res.status(200).json(contentPages()[pageLabelOrId]);
   } else if (pageType === 'ProductPage') {
     // logic to return product detail page
     const productCode = url.searchParams?.get('code');
     res.status(200).json(productDetailPage(productCode || ''));
   } else if (!pageType && !pageLabelOrId) {
     // logic to return the homepage
     res.status(200).json(homePage());
   } else {
     res.status(200).json(tempPage(pageType || 'ContentPage', pageLabelOrId || ''));
   }
 });

// mock.server/browser.ts
import { setupWorker } from 'msw';
import { handlers } from './handlers';

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);


// main.ts
function prepare() {
  if (environment.mockServer) {
    const { worker } = require('./mock-server/browser');

    return worker.start();
  }
  return Promise.resolve();
}

// call angular bootstrap function after mock server is ready 
prepare().then(() => bootstrap());

export const handlers = [
  rest.get('/occ/v2/my-store/cms/languages', 
           (_req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
    return res(ctx.status(200), ctx.json(languages()));
  }),
  
  // cms pages call
  rest.get('/occ/v2/my-store/cms/pages', (req: RestRequest, res: ResponseComposition, ctx: RestContext) => {
    const pageLabelOrId = req.url.searchParams?.get('pageLabelOrId');
    const pageType = req.url.searchParams?.get('pageType');

    if (pageType === 'ContentPage' && pageLabelOrId) {
      return res(ctx.status(200), ctx.json(contentPages()[pageLabelOrId]));
    } else if (pageType === 'ProductPage') {
      // its a product detail page
      //const productCode = url.searchParams?.get('code');
      const productCode = '12345';

      return res(ctx.status(200), ctx.json(productDetailPage(productCode || '')));
    } else if (!pageType && !pageLabelOrId) {
      // its the homepage
      return res(ctx.status(200), ctx.json(homePage()));
    } else {
      return res(ctx.status(200), ctx.json(tempPage(pageType || 'ContentPage', pageLabelOrId || '')));
    }
  }),
]

// passthrough.ts
export const passThroughUrls: PassThroughUrl[] = [
  { url: '/assets/*', requestFunction: 'get' },
  { url: '*.woff2', requestFunction: 'get' },
  { url: '*.woff', requestFunction: 'get' },
  { url: '*.js', requestFunction: 'get' },
  { url: '*.css', requestFunction: 'get' },
  { url: '*.webp', requestFunction: 'get' },
  { url: '/site.webmanifest', requestFunction: 'get' },
  { url: 'https://www.googletagmanager.com/*', requestFunction: 'get' },
  { url: 'https://maps.gstatic.com/*', requestFunction: 'get' },
  { url: 'https://maps.googleapis.com/*', requestFunction: 'get' },
  { url: 'https://fonts.googleapis.com/*', requestFunction: 'get' },
];


// handlers.ts
export const handlers = [
  ...passThroughUrls.map((passThroughUrl) => {
    return rest[passThroughUrl.requestFunction](passThroughUrl.url, (req) => {
      return req.passthrough();
    });
  }),
]

export const readUrlParams = (params: PathParams<string>, paramName: string): string => {
  return (params[paramName] as string) || '';
};

export const readSearchParams = (request: Request, param: string): string | undefined => {
  // Construct a URL instance out of the intercepted request.
  const url = new URL(request.url);

  // Read the "param" URL query parameter using the "URLSearchParams" API.
  return url.searchParams.get(param) || undefined;
};

export function redirect(destination: string, statusCode: number) {
  return new HttpResponse(null, {
    status: statusCode,
    headers: {
      Location: destination,
    },
  });
}

// usage
http.get('/occ/v2/media/:mediaId/16x9_1680/:mediaName', ({ request }) => {
  const urlArray = request.url.split('/');
  
  // equals to 16x9_1680, rendition is contained in second last path element
  const renditionName = urlArray[urlArray.length - 2];
  const ratio = renditionName.split('_')[0]; // equals to 16x9
  const width = parseInt(renditionName.split('_')[1], 10); // equals to 1200

  const ratioArray = ratio.split('x');
  const ratioNumber = parseInt(ratioArray[1], 10) / parseInt(ratioArray[0], 10);

  // Dynamic mock-images (Picsum)
  return redirect(`https://picsum.photos/${width}/${Math.ceil(width * ratioNumber)}.webp`, 301);
}),

import { MockConfig } from '@valantic/spartacus-mock';
import { handlers } from './handlers';
import { translationResources } from './mock-data/translations/translations';
import { passThroughUrls } from './passThrough';
import { environment } from '@environments/environment';

const mockConfig: MockConfig = {
  enableDefaultData: false,
  inclusionMode: false,
  enableWorker: environment.mockServer || false,
  environment,
  passThroughRequests: passThroughUrls,
  handlers: handlers,
  translations: translationResources,
};

export async function prepareMockServer(): Promise<ServiceWorkerRegistration | undefined> {
  const { prepareMock } = await import('@valantic/spartacus-mock');

  return prepareMock(mockConfig);
}

export const environment: Environment = {
  env: 'dev-fe',
  production: false,
  cookieSecret: 'some-supersecret',
  smartEdit: '*.my-store.ch',
  mockServer: true,
  backend: {
    occ: {
      // baseUrl: 'https://api.my-store.ch',
      baseUrl: 'https://api-staging.my-store.ch',
      // baseUrl: 'https://api-dev.my-store.ch',
      prefix: '/occ/v2/',
    },
  },
};

const headerSlots = getHeaderSlots();
const footerSlots = getFooterSlots();
const pages = contentPages(headerSlots, footerSlots);