import path from 'path';
import React from 'react';
// Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
// eslint-disable-next-line import/no-unresolved
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import dayjs from 'dayjs';
import { globSync } from 'glob';
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import { JSDOM } from 'jsdom';
import MockDate from 'mockdate';
import ReactDOMServer from 'react-dom/server';

import { App, ConfigProvider, theme } from '../../components';
import { fillWindowEnv } from '../setup';
import { render } from '../utils';
import { TriggerMockContext } from './demoTestContext';

jest.mock('../../components/grid/hooks/useBreakpoint', () => () => ({}));

const toMatchImageSnapshot = configureToMatchImageSnapshot({
  customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
  customDiffDir: `${process.cwd()}/imageDiffSnapshots`,
});

expect.extend({ toMatchImageSnapshot });

const themes = {
  default: theme.defaultAlgorithm,
  dark: theme.darkAlgorithm,
  compact: theme.compactAlgorithm,
};

interface ImageTestOptions {
  onlyViewport?: boolean;
  ssr?: boolean;
  openTriggerClassName?: string;
}

// eslint-disable-next-line jest/no-export
export default function imageTest(
  component: React.ReactElement,
  identifier: string,
  options: ImageTestOptions,
) {
  let doc: Document;
  let container: HTMLDivElement;

  beforeAll(() => {
    const dom = new JSDOM('<!DOCTYPE html><body></body></p>', {
      url: 'http://localhost/',
    });
    const win = dom.window;
    doc = win.document;

    (global as any).window = win;

    // Fill env
    const keys = [
      ...Object.keys(win),
      'HTMLElement',
      'SVGElement',
      'ShadowRoot',
      'Element',
      'File',
      'Blob',
    ].filter((key) => !(global as any)[key]);

    keys.forEach((key) => {
      (global as any)[key] = win[key];
    });

    // Fake Resize Observer
    global.ResizeObserver = function FakeResizeObserver() {
      return {
        observe() {},
        unobserve() {},
        disconnect() {},
      };
    } as any;

    // Fake promise not called
    global.fetch = function mockFetch() {
      return {
        then() {
          return this;
        },
        catch() {
          return this;
        },
        finally() {
          return this;
        },
      };
    } as any;

    // Fake matchMedia
    win.matchMedia = () =>
      ({
        matches: false,
        addListener: jest.fn(),
        removeListener: jest.fn(),
      }) as any;

    // Fill window
    fillWindowEnv(win);
  });

  beforeEach(() => {
    doc.body.innerHTML = `<div id="root"></div>`;
    container = doc.querySelector<HTMLDivElement>('#root')!;
  });

  function test(name: string, suffix: string, themedComponent: React.ReactElement) {
    it(name, async () => {
      await jestPuppeteer.resetPage();
      await page.setRequestInterception(true);
      const onRequestHandle = (request: any) => {
        if (['image'].includes(request.resourceType())) {
          request.abort();
        } else {
          request.continue();
        }
      };

      const { openTriggerClassName } = options;

      MockDate.set(dayjs('2016-11-22').valueOf());
      page.on('request', onRequestHandle);
      await page.goto(`file://${process.cwd()}/tests/index.html`);
      await page.addStyleTag({ path: `${process.cwd()}/components/style/reset.css` });
      await page.addStyleTag({ content: '*{animation: none!important;}' });

      const cache = createCache();

      const emptyStyleHolder = doc.createElement('div');

      let element = (
        <StyleProvider cache={cache} container={emptyStyleHolder}>
          <App>{themedComponent}</App>
        </StyleProvider>
      );

      // Do inject open trigger
      if (openTriggerClassName) {
        element = (
          <TriggerMockContext.Provider value={{ popupVisible: true }}>
            {element}
          </TriggerMockContext.Provider>
        );
      }

      let html: string;
      let styleStr: string;

      if (options.ssr) {
        html = ReactDOMServer.renderToString(element);
        styleStr = extractStyle(cache);
      } else {
        const { unmount } = render(element, {
          container,
        });
        html = container.innerHTML;
        styleStr = extractStyle(cache);

        // We should extract style before unmount
        unmount();
      }

      if (openTriggerClassName) {
        styleStr += `<style>
          .${openTriggerClassName} {
            position: relative !important;
            left: 0 !important;
            top: 0 !important;
            opacity: 1 !important;
            display: inline-block !important;
            vertical-align: top !important;
          }
        </style>`;
      }

      await page.evaluate(
        (innerHTML, ssrStyle, triggerClassName) => {
          document.querySelector('#root')!.innerHTML = innerHTML;

          const head = document.querySelector('head')!;
          head.innerHTML += ssrStyle;

          // Inject open trigger with block style
          if (triggerClassName) {
            document.querySelectorAll(`.${triggerClassName}`).forEach((node) => {
              const blockStart = document.createElement('div');
              const blockEnd = document.createElement('div');

              node.parentNode!.insertBefore(blockStart, node);
              node.parentNode!.insertBefore(blockEnd, node.nextSibling);
            });
          }
        },
        html,
        styleStr,
        openTriggerClassName,
      );

      if (!options.onlyViewport) {
        // Get scroll height of the rendered page and set viewport
        const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
        await page.setViewport({ width: 800, height: bodyHeight });
      }

      const image = await page.screenshot({
        fullPage: !options.onlyViewport,
      });

      expect(image).toMatchImageSnapshot({
        customSnapshotIdentifier: `${identifier}${suffix}`,
      });

      MockDate.reset();
      page.off('request', onRequestHandle);
    });
  }

  Object.entries(themes).forEach(([key, algorithm]) => {
    test(
      `component image screenshot should correct ${key}`,
      `.${key}`,
      <div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
        <ConfigProvider theme={{ algorithm }}>{component}</ConfigProvider>
      </div>,
    );
    test(
      `[CSS Var] component image screenshot should correct ${key}`,
      `.${key}.css-var`,
      <div style={{ background: key === 'dark' ? '#000' : '', padding: `24px 12px` }} key={key}>
        <ConfigProvider theme={{ algorithm, cssVar: true }}>{component}</ConfigProvider>
      </div>,
    );
  });
}

type Options = {
  skip?: boolean | string[];
  onlyViewport?: boolean | string[];
  /** Use SSR render instead. Only used when the third part deps component */
  ssr?: boolean;
  /** Open Trigger to check the popup render */
  openTriggerClassName?: string;
};

// eslint-disable-next-line jest/no-export
export function imageDemoTest(component: string, options: Options = {}) {
  let describeMethod = options.skip === true ? describe.skip : describe;
  const files = globSync(`./components/${component}/demo/*.tsx`);

  files.forEach((file) => {
    if (Array.isArray(options.skip) && options.skip.some((c) => file.endsWith(c))) {
      describeMethod = describe.skip;
    } else {
      describeMethod = describe;
    }
    describeMethod(`Test ${file} image`, () => {
      // eslint-disable-next-line global-require,import/no-dynamic-require
      let Demo = require(`../../${file}`).default;
      if (typeof Demo === 'function') {
        Demo = <Demo />;
      }
      imageTest(Demo, `${component}-${path.basename(file, '.tsx')}`, {
        onlyViewport:
          options.onlyViewport === true ||
          (Array.isArray(options.onlyViewport) &&
            options.onlyViewport.some((c) => file.endsWith(c))),
        ssr: options.ssr,
        openTriggerClassName: options.openTriggerClassName,
      });
    });
  });
}