import * as React from 'react';
import { TRule, applyTheme } from '@cloudflare/style-container';
import { TfelaMProps } from '@cloudflare/types';

export type TClassNameProp = {
  className?: string;
};

// <Card>
////////////////////////////////////////////////////////////////////////
export type TCardProps = { id?: string; testId?: string } & TClassNameProp;
export type TCardRule = TRule<{}>;
export const CardTheme: TCardRule;
export const CardUnstyled: React.StatelessComponent<TCardProps>;
export const Card: typeof CardUnstyled;

// <CardBlock>
////////////////////////////////////////////////////////////////////////
export type TCardBlockProps = {} & TClassNameProp;
export type TCardBlockRule = TRule<{}>;
export const CardBlockTheme: TCardBlockRule;
export const CardBlockUnstyled: React.StatelessComponent<TCardBlockProps>;
export const CardBlock: typeof CardBlockUnstyled;

// <CardContent>
////////////////////////////////////////////////////////////////////////
export type TCardContentProps = {} & TClassNameProp & TfelaMProps;
export type TCardContentRule = TRule<{}>;
export const CardContentTheme: TCardContentRule;
export const CardContentUnstyled: React.StatelessComponent<TCardContentProps>;
export const CardContent: typeof CardContentUnstyled;

// <CardControl>
////////////////////////////////////////////////////////////////////////
export type TCardControlProps = { wide?: boolean } & TClassNameProp;
export type TCardControlRule = TRule<{}>;
export const CardControlTheme: TCardControlRule;
export const CardControlUnstyled: React.StatelessComponent<TCardControlProps>;
export const CardControl: typeof CardControlUnstyled;

// <CardDrawers>
////////////////////////////////////////////////////////////////////////
export type TCardDrawer = {
  id: string;
  name: React.ReactNode;
  ariaLabel: string;
  content: any;
};

export type TCardDrawersProps = {
  onClick?: (id: string) => void;

  active?: string;
  drawers: TCardDrawer[];

  // for an optional control to put on the left side of the toolbar
  controls?: any;
};

export type TCardDrawersRule = TRule<{}>;
export const CardDrawersTheme: TCardDrawersRule;
export const CardDrawersUnstyled: React.StatelessComponent<TCardDrawersProps>;
export const CardDrawers: typeof CardDrawersUnstyled;

// <CardFooter>
////////////////////////////////////////////////////////////////////////
export type TCardFooterProps = {} & TClassNameProp;
export type TCardFooterRule = TRule<{}>;
export const CardFooterTheme: TCardFooterRule;
export const CardFooterUnstyled: React.StatelessComponent<TCardFooterProps>;
export const CardFooter: typeof CardFooterUnstyled;

// <CardMessages>
////////////////////////////////////////////////////////////////////////
export type TCardMessagesMessage = {
  type?: 'info' | 'success' | 'error' | 'warning';
  content: any;
};

export type TCardMessagesProps = {
  messages: TCardMessagesMessage[];
} & TClassNameProp;
export type TCardMessagesRule = TRule<{}>;
export const CardMessagesTheme: TCardMessagesRule;
export const CardMessagesUnstyled: React.StatelessComponent<TCardMessagesProps>;
export const CardMessages: typeof CardMessagesUnstyled;

// <CardSection>
////////////////////////////////////////////////////////////////////////
export type TCardSectionProps = {
  status?: 'default' | 'error';
} & TClassNameProp &
  TfelaMProps;
export type TCardSectionRule = TRule<{}>;
export const CardSectionTheme: TCardSectionRule;
export const CardSectionUnstyled: React.StatelessComponent<TCardSectionProps>;
export const CardSection: typeof CardSectionUnstyled;

// <CardTitle>
////////////////////////////////////////////////////////////////////////
export type TCardTitleProps = {} & TClassNameProp;
export type TCardTitleRule = TRule<{}>;
export const CardTitleTheme: TCardTitleRule;
export const CardTitleUnstyled: React.StatelessComponent<TCardTitleProps>;
export const CardTitle: typeof CardTitleUnstyled;

// <CardToolbar>
////////////////////////////////////////////////////////////////////////
export type TCardToolbarProps = {
  controls?: any;
  triggers?:
    | React.ReactElement<TCardToolbarDrawerTriggerProps>[]
    | React.ReactElement<TCardToolbarLinkProps>[];
};
export type TCardToolbarRule = TRule<{}>;
export const CardToolbarTheme: TCardToolbarRule;
export const CardToolbarUnstyled: React.StatelessComponent<TCardToolbarProps>;
export const CardToolbar: typeof CardToolbarUnstyled;

// <CardToolbarDrawerTrigger>
////////////////////////////////////////////////////////////////////////
export type TCardToolbarDrawerTriggerProps = {
  onClick: () => void;
  isActive: boolean;
  id?: string;
  expandable?: boolean;
  ariaControls?: string;
  ariaExpanded?: boolean;
};
export const CardToolbarDrawerTrigger: React.StatelessComponent<TCardToolbarDrawerTriggerProps>;

// <CardToolbarLink>
////////////////////////////////////////////////////////////////////////
export type TCardToolbarLinkProps = {
  id?: string;
  href: string;
  children: React.ReactNode;
};
export const CardToolbarLink: React.StatelessComponent<TCardToolbarLinkProps>;