import { Theme } from '@emotion/react';
import styled, { StyledComponent } from '@emotion/styled';
import {
  createContext,
  DetailedHTMLProps,
  ElementType,
  HTMLAttributes,
} from 'react';
import tw, { css } from 'twin.macro';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type JsxPropsPlaceholder = any;

type SC<Attrs, Element> = StyledComponent<
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  { theme?: Theme; as?: ElementType<any> },
  DetailedHTMLProps<Attrs, Element>,
  JsxPropsPlaceholder
>;

export type TypeStyles = {
  topLevel: number;
  H1: SC<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
  H2: SC<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
  H3: SC<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
  Aside: SC<HTMLAttributes<HTMLElement>, HTMLElement>;
  P: SC<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
};

const baseContext: TypeStyles = {
  topLevel: 1,
  H1: styled.h1(tw`text-h1 leading-tight md:(text-h1-md leading-snug)`),
  H2: styled.h2(tw`text-h2 leading-tight md:(text-h2-md leading-snug)`),
  H3: styled.h3(tw`text-h3 leading-tight md:(text-h3-md leading-snug)`),
  Aside: styled.aside(tw`text-lg font-serif`),
  P: styled.p(tw`text-base font-sans`),
};

export interface StyleDefinition {
  skipLevels?: number;
  headings?: Array<SC<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>;
  aside?: SC<HTMLAttributes<HTMLElement>, HTMLElement>;
  p?: SC<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
}

const TypeContext = createContext<TypeStyles>(baseContext);

export default TypeContext;