// import { StyledEh } from './index.d.ts'
// const styled: StyledEh = styled
// const eh: StyledEh = styled.div`
//   color: purple;
// `

// export * from './index'
// export * from './index.d.ts'

import {
  ComponentType,
  ClassAttributes,
  ComponentClass,
  Component,
  Attributes,
  ComponentState,
} from 'react'
// import { StylEhTheme } from './index-theme.d'
// import { StyledInterface } from './types'

type ThemeArg = any
type heading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

export type FalseyValue = undefined | null | false
export type Interpolation<P> =
  | FlattenInterpolation<P>
  | ReadonlyArray<
      FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P>>
    >
export type FlattenInterpolation<P> =
  | InterpolationValue
  | InterpolationFunction<P>
export type InterpolationValue =
  | string
  | number
  | Styles
  | FalseyValue
  | DefaultStyledEh
export type SimpleInterpolation =
  | InterpolationValue
  | ReadonlyArray<InterpolationValue | ReadonlyArray<InterpolationValue>>
export interface Styles {
  [ruleOrSelector: string]: string | number | Styles
}
export interface InterpolationFunction<P> {
  (props: P): Interpolation<P>
}

export interface ThemedCssFunction<T> {
  (
    strings: TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): InterpolationValue[]
  <P>(
    strings: TemplateStringsArray,
    ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
  ): FlattenInterpolation<ThemedStyledProps<P, T>>[]
}

// Helper type operators
type Diff<T extends string, U extends string> = ({ [P in T]: P } &
  { [P in U]: never } & { [x: string]: never })[T]
type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>
type WithOptionalTheme<P extends { theme?: T }, T> = Omit<P, 'theme'> & {
  theme?: T
}
type Attrs<P, A extends Partial<P>, T> = {
  [K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]
}

export interface ThemedStyledFunction<P, T, O = P> {
  (
    strings: TemplateStringsArray,
    ...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
  ): BaseStylEh<P, T, O>
  <U>(
    strings: TemplateStringsArray,
    ...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]
  ): BaseStylEh<P & U, T, O & U>
  attrs<U, A extends Partial<P & U> = {}>(
    attrs: Attrs<P & U, A, T>
  ): ThemedStyledFunction<P & A & U, T, O & U>
}
export interface ThemeProps<T> {
  theme?: T
}
export type ThemedStyledProps<P, T> = P & ThemeProps<T>
export type StyledProps<P> = ThemedStyledProps<P, any>
export type StyledFunction<P> = ThemedStyledFunction<P, any>

export type ThemedOuterStyledProps<P, T> = P & {
  theme?: T
  innerRef?: (instance: any) => void
}
export type OuterStyledProps<P> = ThemedOuterStyledProps<P, any>

export type StylesOrClassName = string | string[] | TemplateStringsArray

export interface DefaultProps extends Attributes {}

export interface DefaultState extends ComponentState {}

// @todo toComponent ?
// @todo - required props...
export interface BaseStylEh<Props, State = any, O = Props>
  extends Component<Props, State> {
  new (props: Props, context?: any): Component<Props, State>

  // call as fn
  (
    styles?: StylesOrClassName
  ): // @todo this will need more love when dealing with props...
  BaseStylEh<Props, State>

  // InterpolationValue[];
  (
    strings: TemplateStringsArray,
    ...interpolations: Interpolation<ThemedStyledProps<Props, State>>[]
  ): BaseStylEh<Props, State>
  // FlattenInterpolation<ThemedStyledProps<P, T>>[];
  <P>(
    strings: TemplateStringsArray,
    ...interpolations: Interpolation<ThemedStyledProps<P | Props, State>>[]
  ): BaseStylEh<P>

  // @todo https://github.com/styled-components/styled-components/blob/master/typings/styled-components.d.ts
  <P, TTag extends keyof JSX.IntrinsicElements>(
    tag: TTag
  ): ThemedStyledFunction<
    P,
    BaseStylEh<Props, State>,
    P & JSX.IntrinsicElements[TTag]
  >
  <P, M>(component: BaseStylEh<P, Props, M>): ThemedStyledFunction<
    P,
    BaseStylEh<Props, State>,
    M
  >
  <P extends { [prop: string]: any; theme?: BaseStylEh<Props, State> }>(
    component: ComponentType<P>
  ): ThemedStyledFunction<
    P,
    BaseStylEh<Props, State>,
    WithOptionalTheme<P, BaseStylEh<Props, State>>
  >

  // important - made them properties to emphasize
  // attrs(props: ClassAttributes<StyledEh<Props, State>> | any): StyledEh<Props, State>
  attrs(props: Props): StyledEh<Props, State>
  className(className?: string): StyledEh<Props, State>
  qa(dataQa?: string): StyledEh<Props, State>

  extend: StyledEh<Props, State>
  withComponent: (component: StyledEh<Props, State>) => StyledEh<Props, State>

  // extra
  withTheme<StyledClass extends { theme?: ThemeArg }>(
    component: StyledClass
  ): BaseStylEh<Props, State>

  css(
    css: TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): InterpolationValue
  keyframes(
    strings: TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): string
  injectGlobal(
    strings: TemplateStringsArray,
    ...interpolations: SimpleInterpolation[]
  ): void

  // how to put this as low priority? will comment out usually unused ones
  // could list all the things here...
  // [tag: TagName]: StyledEh<Props, State>;
  // [tag: TagName](cssOrClass: StylesOrClassName): StyledEh<Props, State>

  p: StyledEh<Props, State>
  ul: StyledEh<Props, State>
  ol: StyledEh<Props, State>
  li: StyledEh<Props, State>
  aside: StyledEh<Props, State>
  figure: StyledEh<Props, State>
  figcaption: StyledEh<Props, State>
  img: StyledEh<Props, State>
  picture: StyledEh<Props, State>
  main: StyledEh<Props, State>
  article: StyledEh<Props, State>
  section: StyledEh<Props, State>

  nav: StyledEh<Props, State>
  footer: StyledEh<Props, State>

  form: StyledEh<Props, State>
  textarea: StyledEh<Props, State>
  input: StyledEh<Props, State>
  label: StyledEh<Props, State>
  legend: StyledEh<Props, State>
  fieldset: StyledEh<Props, State>
  button: StyledEh<Props, State>
  select: StyledEh<Props, State>
  span: StyledEh<Props, State>
  div: StyledEh<Props, State>

  header: StyledEh<Props, State>
  h1: StyledEh<Props, State>
  h2: StyledEh<Props, State>
  h3: StyledEh<Props, State>
  h4: StyledEh<Props, State>
  h5: StyledEh<Props, State>
  h6: StyledEh<Props, State>

  p(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  ul(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  ol(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  li(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  aside(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  figure(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  figcaption(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  img(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  picture(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  main(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  article(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  section(cssOrClass: StylesOrClassName): StyledEh<Props, State>

  nav(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  footer(cssOrClass: StylesOrClassName): StyledEh<Props, State>

  form(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  textarea(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  input(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  label(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  legend(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  fieldset(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  button(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  select(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  span(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  div(cssOrClass: StylesOrClassName): StyledEh<Props, State>

  header(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // [key: heading](cssOrClass: StylesOrClassName): StyledEh<Props, State>
  h1(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  h2(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  h3(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  h4(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  h5(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  h6(cssOrClass: StylesOrClassName): StyledEh<Props, State>

  // theme: StylEhTheme
  // address(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // abbr(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // acronym(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // summary(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // menu(cssOrClass: StylesOrClassName): StyledEh<Props, State>

  // small(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // application(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // list(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // progress(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // meter(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // link(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // script(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // meta(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // title(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // style(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // time(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // video(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // media(cssOrClass: StylesOrClassName): StyledEh<Props, State>
  // audio(cssOrClass: StylesOrClassName): StyledEh<Props, State>

  // https://github.com/Microsoft/TypeScript/issues/2426
  // https://github.com/Microsoft/TypeScript/issues/1235
  // https://github.com/Microsoft/TypeScript/issues/10868
  // https://github.com/Microsoft/TypeScript/issues/14009
  // https://www.stevefenton.co.uk/2017/11/typescript-mighty-morphing-mapped-types/
  // export type RemoveProperty<T, K extends keyof T> = { [P in Remove<keyof T, K>]: T[P] };
  // private bind(): number
  // private apply(): number
  // private call(): number
  // private prototype(): number
}

// export { BaseStylEh as Styleh }

// extends StyledInterface
// ^ comes with bloat
// interface StyledEh<Props = BaseStylEh<Props>> extends BaseStylEh<Props> {
//   // really annoying thing is not showing the available fns
// }
// export type StyledEh = BaseStylEh
// export type StyledEh<P> = BaseStylEh<P>
export type StyledEh<P, S = any> = BaseStylEh<P, S>
export type DefaultStyledEh<P = any, S = any> = BaseStylEh<P, S>
export type Styleh<P, S = any> = BaseStylEh<P, S>

export type WithComponent<Props = any, State = any> = (
  component: StyledEh<Props, State> | ComponentType<Props>
) => StyledEh<Props, State>

export type TagName =
  | ''
  | 'textarea'
  | 'ul'
  | 'ol'
  | 'li'
  | 'aside'
  | 'figure'
  | 'figcaption'
  | 'img'
  | 'picture'
  | 'main'
  | 'application'
  | 'article'
  | 'section'
  | 'address'
  | 'abbr'
  | 'acronym'
  | 'summary'
  | 'nav'
  | 'menu'
  | 'footer'
  | 'header'
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'h5'
  | 'h6'
  | 'form'
  | 'input'
  | 'label'
  | 'legend'
  | 'fieldset'
  | 'list'
  | 'button'
  | 'select'
  | 'progress'
  | 'meter'
  | 'link'
  | 'script'
  | 'meta'
  | 'title'
  | 'style'
  | 'time'
  | 'video'
  | 'media'
  | 'audio'
  | 'span'
  | 'div'
  | 'p'
  | 'small'

export type styled = StyledEh<any>
// export { StyledEh }
export default StyledEh

declare global {
  export var styled: StyledEh<any>
}