// flow-typed signature: 8ae4cfa383fc58443d8d65b5301bf1c1
// flow-typed version: 1a7d5ca288/styled-components_v4.x.x/flow_>=v0.75.x

// @flow

declare module 'styled-components' {
  declare export type Interpolation =
    | (<P: {}>(executionContext: PropsWithTheme<any>) => string)
    | CSSRules
    | KeyFrames
    | string
    | number;

  declare export type CSSRules = Interpolation[];

  // This is not exported on purpose, since it's an implementation detail
  declare type TaggedTemplateLiteral<R> = (
    strings: string[],
    ...interpolations: Interpolation[]
  ) => R;

  declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>;
  declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>;
  declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>;

  declare interface Tag<T> {
    styleTag: HTMLStyleElement | null;
    getIds(): string[];
    hasNameForId(id: string, name: string): boolean;
    insertMarker(id: string): T;
    insertRules(id: string, cssRules: string[], name: ?string): void;
    removeRules(id: string): void;
    css(): string;
    toHTML(additionalAttrs: ?string): string;
    toElement(): React$Element<*>;
    clone(): Tag<T>;
    sealed: boolean;
  }

  // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
  declare export class StyleSheet {
    static get master(): StyleSheet;
    static get instance(): StyleSheet;
    static reset(forceServer?: boolean): void;

    id: number;
    forceServer: boolean;
    target: ?HTMLElement;
    tagMap: { [string]: Tag<any> }; // eslint-disable-line flowtype/no-weak-types
    deferred: { [string]: string[] | void };
    rehydratedNames: { [string]: boolean };
    ignoreRehydratedNames: { [string]: boolean };
    tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
    importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
    capacity: number;
    clones: StyleSheet[];

    constructor(?HTMLElement): this;
    rehydrate(): this;
    clone(): StyleSheet;
    sealAllTags(): void;
    makeTag(tag: ?Tag<any>): Tag<any>; // eslint-disable-line flowtype/no-weak-types
    getImportRuleTag(): Tag<any>; // eslint-disable-line flowtype/no-weak-types
    getTagForId(id: string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
    hasId(id: string): boolean;
    hasNameForId(id: string, name: string): boolean;
    deferredInject(id: string, cssRules: string[]): void;
    inject(id: string, cssRules: string[], name?: string): void;
    remove(id: string): void;
    toHtml(): string;
    toReactElements(): React$ElementType[];
  }

  declare export class KeyFrames {
    id: string;
    name: string;
    rules: string[];

    constructor(name: string, rules: string[]): this;
    inject(StyleSheet): void;
    toString(): string;
    getName(): string;
  }

  // I think any is appropriate here?
  // eslint-disable-next-line flowtype/no-weak-types
  declare export type Theme = { +[string]: any };

  declare export var css: CSSConstructor;
  declare export var keyframes: KeyFramesConstructor;
  declare export var createGlobalStyle: CreateGlobalStyleConstructor;
  declare export var ThemeProvider: React$ComponentType<{
    children?: ?React$Node,
    theme: Theme | (Theme => Theme),
  }>;

  // This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
  declare type InjectedProps = { theme: Theme | void };
  declare export function withTheme<Props: {}, Component: React$ComponentType<Props>>(
    WrappedComponent: Component,
  ): React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;

  // @HACK This is a cheat to hide that the underlying type is "just a string"
  //       once we know of a better way, we should be able to update this accordingly.
  //       I don't think there _is_ a good way, currently.
  // @NOTE Also not too sure about the naming of this...
  declare export type StyledElementType<T> = T;
  declare export type StyledComponentType<C> = {
    [[call]]: TaggedTemplateLiteral<C>,
    +attrs: <A: {}>(
      attributes: A | ((props: React$ElementConfig<C>) => A),
    ) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>,
  };

  declare type StyledComponentList = {
    a: StyledComponentType<StyledElementType<'a'>>,
    abbr: StyledComponentType<StyledElementType<'abbr'>>,
    address: StyledComponentType<StyledElementType<'address'>>,
    area: StyledComponentType<StyledElementType<'area'>>,
    article: StyledComponentType<StyledElementType<'article'>>,
    aside: StyledComponentType<StyledElementType<'aside'>>,
    audio: StyledComponentType<StyledElementType<'audio'>>,
    b: StyledComponentType<StyledElementType<'b'>>,
    base: StyledComponentType<StyledElementType<'base'>>,
    bdi: StyledComponentType<StyledElementType<'bdi'>>,
    bdo: StyledComponentType<StyledElementType<'bdo'>>,
    big: StyledComponentType<StyledElementType<'big'>>,
    blockquote: StyledComponentType<StyledElementType<'blockquote'>>,
    body: StyledComponentType<StyledElementType<'body'>>,
    br: StyledComponentType<StyledElementType<'br'>>,
    button: StyledComponentType<StyledElementType<'button'>>,
    canvas: StyledComponentType<StyledElementType<'canvas'>>,
    caption: StyledComponentType<StyledElementType<'caption'>>,
    cite: StyledComponentType<StyledElementType<'cite'>>,
    code: StyledComponentType<StyledElementType<'code'>>,
    col: StyledComponentType<StyledElementType<'col'>>,
    colgroup: StyledComponentType<StyledElementType<'colgroup'>>,
    data: StyledComponentType<StyledElementType<'data'>>,
    datalist: StyledComponentType<StyledElementType<'datalist'>>,
    dd: StyledComponentType<StyledElementType<'dd'>>,
    del: StyledComponentType<StyledElementType<'del'>>,
    details: StyledComponentType<StyledElementType<'details'>>,
    dfn: StyledComponentType<StyledElementType<'dfn'>>,
    dialog: StyledComponentType<StyledElementType<'dialog'>>,
    div: StyledComponentType<StyledElementType<'div'>>,
    dl: StyledComponentType<StyledElementType<'dl'>>,
    dt: StyledComponentType<StyledElementType<'dt'>>,
    em: StyledComponentType<StyledElementType<'em'>>,
    embed: StyledComponentType<StyledElementType<'embed'>>,
    fieldset: StyledComponentType<StyledElementType<'fieldset'>>,
    figcaption: StyledComponentType<StyledElementType<'figcaption'>>,
    figure: StyledComponentType<StyledElementType<'figure'>>,
    footer: StyledComponentType<StyledElementType<'footer'>>,
    form: StyledComponentType<StyledElementType<'form'>>,
    h1: StyledComponentType<StyledElementType<'h1'>>,
    h2: StyledComponentType<StyledElementType<'h2'>>,
    h3: StyledComponentType<StyledElementType<'h3'>>,
    h4: StyledComponentType<StyledElementType<'h4'>>,
    h5: StyledComponentType<StyledElementType<'h5'>>,
    h6: StyledComponentType<StyledElementType<'h6'>>,
    head: StyledComponentType<StyledElementType<'head'>>,
    header: StyledComponentType<StyledElementType<'header'>>,
    hgroup: StyledComponentType<StyledElementType<'hgroup'>>,
    hr: StyledComponentType<StyledElementType<'hr'>>,
    html: StyledComponentType<StyledElementType<'html'>>,
    i: StyledComponentType<StyledElementType<'i'>>,
    iframe: StyledComponentType<StyledElementType<'iframe'>>,
    img: StyledComponentType<StyledElementType<'img'>>,
    input: StyledComponentType<StyledElementType<'input'>>,
    ins: StyledComponentType<StyledElementType<'ins'>>,
    kbd: StyledComponentType<StyledElementType<'kbd'>>,
    keygen: StyledComponentType<StyledElementType<'keygen'>>,
    label: StyledComponentType<StyledElementType<'label'>>,
    legend: StyledComponentType<StyledElementType<'legend'>>,
    li: StyledComponentType<StyledElementType<'li'>>,
    link: StyledComponentType<StyledElementType<'link'>>,
    main: StyledComponentType<StyledElementType<'main'>>,
    map: StyledComponentType<StyledElementType<'map'>>,
    mark: StyledComponentType<StyledElementType<'mark'>>,
    menu: StyledComponentType<StyledElementType<'menu'>>,
    menuitem: StyledComponentType<StyledElementType<'menuitem'>>,
    meta: StyledComponentType<StyledElementType<'meta'>>,
    meter: StyledComponentType<StyledElementType<'meter'>>,
    nav: StyledComponentType<StyledElementType<'nav'>>,
    noscript: StyledComponentType<StyledElementType<'noscript'>>,
    object: StyledComponentType<StyledElementType<'object'>>,
    ol: StyledComponentType<StyledElementType<'ol'>>,
    optgroup: StyledComponentType<StyledElementType<'optgroup'>>,
    option: StyledComponentType<StyledElementType<'option'>>,
    output: StyledComponentType<StyledElementType<'output'>>,
    p: StyledComponentType<StyledElementType<'p'>>,
    param: StyledComponentType<StyledElementType<'param'>>,
    picture: StyledComponentType<StyledElementType<'picture'>>,
    pre: StyledComponentType<StyledElementType<'pre'>>,
    progress: StyledComponentType<StyledElementType<'progress'>>,
    q: StyledComponentType<StyledElementType<'q'>>,
    rp: StyledComponentType<StyledElementType<'rp'>>,
    rt: StyledComponentType<StyledElementType<'rt'>>,
    ruby: StyledComponentType<StyledElementType<'ruby'>>,
    s: StyledComponentType<StyledElementType<'s'>>,
    samp: StyledComponentType<StyledElementType<'samp'>>,
    script: StyledComponentType<StyledElementType<'script'>>,
    section: StyledComponentType<StyledElementType<'section'>>,
    select: StyledComponentType<StyledElementType<'select'>>,
    small: StyledComponentType<StyledElementType<'small'>>,
    source: StyledComponentType<StyledElementType<'source'>>,
    span: StyledComponentType<StyledElementType<'span'>>,
    strong: StyledComponentType<StyledElementType<'strong'>>,
    style: StyledComponentType<StyledElementType<'style'>>,
    sub: StyledComponentType<StyledElementType<'sub'>>,
    summary: StyledComponentType<StyledElementType<'summary'>>,
    sup: StyledComponentType<StyledElementType<'sup'>>,
    table: StyledComponentType<StyledElementType<'table'>>,
    tbody: StyledComponentType<StyledElementType<'tbody'>>,
    td: StyledComponentType<StyledElementType<'td'>>,
    textarea: StyledComponentType<StyledElementType<'textarea'>>,
    tfoot: StyledComponentType<StyledElementType<'tfoot'>>,
    th: StyledComponentType<StyledElementType<'th'>>,
    thead: StyledComponentType<StyledElementType<'thead'>>,
    time: StyledComponentType<StyledElementType<'time'>>,
    title: StyledComponentType<StyledElementType<'title'>>,
    tr: StyledComponentType<StyledElementType<'tr'>>,
    track: StyledComponentType<StyledElementType<'track'>>,
    u: StyledComponentType<StyledElementType<'u'>>,
    ul: StyledComponentType<StyledElementType<'ul'>>,
    var: StyledComponentType<StyledElementType<'var'>>,
    video: StyledComponentType<StyledElementType<'video'>>,
    wbr: StyledComponentType<StyledElementType<'wbr'>>,

    // SVG
    circle: StyledComponentType<StyledElementType<'circle'>>,
    clipPath: StyledComponentType<StyledElementType<'clipPath'>>,
    defs: StyledComponentType<StyledElementType<'defs'>>,
    ellipse: StyledComponentType<StyledElementType<'ellipse'>>,
    g: StyledComponentType<StyledElementType<'g'>>,
    image: StyledComponentType<StyledElementType<'image'>>,
    line: StyledComponentType<StyledElementType<'line'>>,
    linearGradient: StyledComponentType<StyledElementType<'linearGradient'>>,
    mask: StyledComponentType<StyledElementType<'mask'>>,
    path: StyledComponentType<StyledElementType<'path'>>,
    pattern: StyledComponentType<StyledElementType<'pattern'>>,
    polygon: StyledComponentType<StyledElementType<'polygon'>>,
    polyline: StyledComponentType<StyledElementType<'polyline'>>,
    radialGradient: StyledComponentType<StyledElementType<'radialGradient'>>,
    rect: StyledComponentType<StyledElementType<'rect'>>,
    stop: StyledComponentType<StyledElementType<'stop'>>,
    svg: StyledComponentType<StyledElementType<'svg'>>,
    text: StyledComponentType<StyledElementType<'text'>>,
    tspan: StyledComponentType<StyledElementType<'tspan'>>,
  };

  declare export default StyledComponentList & {
    [[call]]: <S: string>(S) => $ElementType<StyledComponentList, S>,
    [[call]]: <P: {}, C: React$ComponentType<P>>(C) => StyledComponentType<C>,
  };
}

declare module 'styled-components/native' {
  declare export type Interpolation =
    | (<P: {}>(executionContext: P) => string)
    | CSSRules
    | KeyFrames
    | string
    | number;

  declare export type CSSRules = Interpolation[];

  // This is not exported on purpose, since it's an implementation detail
  declare type TaggedTemplateLiteral<R> = (
    strings: string[],
    ...interpolations: Interpolation[]
  ) => R;

  declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>;
  declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>;
  declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>;

  declare interface Tag<T> {
    styleTag: HTMLStyleElement | null;
    getIds(): string[];
    hasNameForId(id: string, name: string): boolean;
    insertMarker(id: string): T;
    insertRules(id: string, cssRules: string[], name: ?string): void;
    removeRules(id: string): void;
    css(): string;
    toHTML(additionalAttrs: ?string): string;
    toElement(): React$Element<*>;
    clone(): Tag<T>;
    sealed: boolean;
  }

  // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
  declare export class StyleSheet {
    static get master(): StyleSheet;
    static get instance(): StyleSheet;
    static reset(forceServer?: boolean): void;

    id: number;
    forceServer: boolean;
    target: ?HTMLElement;
    tagMap: { [string]: Tag<any> }; // eslint-disable-line flowtype/no-weak-types
    deferred: { [string]: string[] | void };
    rehydratedNames: { [string]: boolean };
    ignoreRehydratedNames: { [string]: boolean };
    tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
    importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
    capacity: number;
    clones: StyleSheet[];

    constructor(?HTMLElement): this;
    rehydrate(): this;
    clone(): StyleSheet;
    sealAllTags(): void;
    makeTag(tag: ?Tag<any>): Tag<any>; // eslint-disable-line flowtype/no-weak-types
    getImportRuleTag(): Tag<any>; // eslint-disable-line flowtype/no-weak-types
    getTagForId(id: string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
    hasId(id: string): boolean;
    hasNameForId(id: string, name: string): boolean;
    deferredInject(id: string, cssRules: string[]): void;
    inject(id: string, cssRules: string[], name?: string): void;
    remove(id: string): void;
    toHtml(): string;
    toReactElements(): React$ElementType[];
  }

  declare export class KeyFrames {
    id: string;
    name: string;
    rules: string[];

    constructor(name: string, rules: string[]): this;
    inject(StyleSheet): void;
    toString(): string;
    getName(): string;
  }

  // I think any is appropriate here?
  // eslint-disable-next-line flowtype/no-weak-types
  declare export type Theme = { +[string]: any };

  declare export var css: CSSConstructor;
  declare export var keyframes: KeyFramesConstructor;
  declare export var createGlobalStyle: CreateGlobalStyleConstructor;
  declare export var ThemeProvider: React$ComponentType<{
    children?: ?React$Node,
    theme: Theme | (Theme => Theme),
  }>;

  // This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
  declare type InjectedProps = { theme: Theme | void };
  declare export function withTheme<Props: {}, Component: React$ComponentType<Props>>(
    WrappedComponent: Component,
  ): React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;

  // @HACK This is a cheat to hide that the underlying type is "just a string"
  //       once we know of a better way, we should be able to update this accordingly.
  //       I don't think there _is_ a good way, currently.
  // @NOTE Also not too sure about the naming of this...
  declare export type StyledElementType<T> = T;
  declare export type StyledComponentType<C> = {
    [[call]]: TaggedTemplateLiteral<C>,
    +attrs: <A: {}>(
      attributes: A,
    ) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>,
  };

  declare type StyledComponentList = {
    ActivityIndicator: StyledComponentType<React$ComponentType<{}>>,
    ActivityIndicatorIOS: StyledComponentType<React$ComponentType<{}>>,
    ART: StyledComponentType<React$ComponentType<{}>>,
    Button: StyledComponentType<React$ComponentType<{}>>,
    DatePickerIOS: StyledComponentType<React$ComponentType<{}>>,
    DrawerLayoutAndroid: StyledComponentType<React$ComponentType<{}>>,
    Image: StyledComponentType<React$ComponentType<{}>>,
    ImageBackground: StyledComponentType<React$ComponentType<{}>>,
    ImageEditor: StyledComponentType<React$ComponentType<{}>>,
    ImageStore: StyledComponentType<React$ComponentType<{}>>,
    KeyboardAvoidingView: StyledComponentType<React$ComponentType<{}>>,
    ListView: StyledComponentType<React$ComponentType<{}>>,
    MapView: StyledComponentType<React$ComponentType<{}>>,
    Modal: StyledComponentType<React$ComponentType<{}>>,
    NavigatorIOS: StyledComponentType<React$ComponentType<{}>>,
    Picker: StyledComponentType<React$ComponentType<{}>>,
    PickerIOS: StyledComponentType<React$ComponentType<{}>>,
    ProgressBarAndroid: StyledComponentType<React$ComponentType<{}>>,
    ProgressViewIOS: StyledComponentType<React$ComponentType<{}>>,
    ScrollView: StyledComponentType<React$ComponentType<{}>>,
    SegmentedControlIOS: StyledComponentType<React$ComponentType<{}>>,
    Slider: StyledComponentType<React$ComponentType<{}>>,
    SliderIOS: StyledComponentType<React$ComponentType<{}>>,
    SnapshotViewIOS: StyledComponentType<React$ComponentType<{}>>,
    Switch: StyledComponentType<React$ComponentType<{}>>,
    RecyclerViewBackedScrollView: StyledComponentType<React$ComponentType<{}>>,
    RefreshControl: StyledComponentType<React$ComponentType<{}>>,
    SafeAreaView: StyledComponentType<React$ComponentType<{}>>,
    StatusBar: StyledComponentType<React$ComponentType<{}>>,
    SwipeableListView: StyledComponentType<React$ComponentType<{}>>,
    SwitchAndroid: StyledComponentType<React$ComponentType<{}>>,
    SwitchIOS: StyledComponentType<React$ComponentType<{}>>,
    TabBarIOS: StyledComponentType<React$ComponentType<{}>>,
    Text: StyledComponentType<React$ComponentType<{}>>,
    TextInput: StyledComponentType<React$ComponentType<{}>>,
    ToastAndroid: StyledComponentType<React$ComponentType<{}>>,
    ToolbarAndroid: StyledComponentType<React$ComponentType<{}>>,
    Touchable: StyledComponentType<React$ComponentType<{}>>,
    TouchableHighlight: StyledComponentType<React$ComponentType<{}>>,
    TouchableNativeFeedback: StyledComponentType<React$ComponentType<{}>>,
    TouchableOpacity: StyledComponentType<React$ComponentType<{}>>,
    TouchableWithoutFeedback: StyledComponentType<React$ComponentType<{}>>,
    View: StyledComponentType<React$ComponentType<{}>>,
    ViewPagerAndroid: StyledComponentType<React$ComponentType<{}>>,
    WebView: StyledComponentType<React$ComponentType<{}>>,
    FlatList: StyledComponentType<React$ComponentType<{}>>,
    SectionList: StyledComponentType<React$ComponentType<{}>>,
    VirtualizedList: StyledComponentType<React$ComponentType<{}>>,
  };

  declare export default StyledComponentList & {
    [[call]]: <S: string>(S) => $ElementType<StyledComponentList, S>,
    [[call]]: <P: {}, C: React$ComponentType<P>>(C) => StyledComponentType<C>,
  };
}