import React from 'react'; // 'React' is defined but never used. [@typescript-eslint/no-unused-vars]
import Document from 'next/document';
import {
  ServerStyleSheet
} from 'styled-components';

export default class MyDocument extends Document {
  public static async getInitialProps(ctx): DefaultDocumentIProps {
    const sheet = new ServerStyleSheet();

    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () => originalRenderPage({
      enhanceApp: App => props => sheet.collectStyles(<App {...props} />) // 'App' is defined but never used. [@typescript-eslint/no-unused-vars]
    });

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [...initialProps.styles, ...sheet.getStyleElement()]
    };
  }
}