import classNames from 'classnames';
import './Card.scss';
export interface CardProps {
  header?: boolean;
  footer?: boolean;
  title?: string;
  footerContent?: any;
  variant: 'default' | 'primary' | 'success' | 'warning' | 'error';
  rounded?: boolean;
  shadow?: boolean;
  paddingRequired?: boolean;
  size?: 'x-small' | 'small' | 'medium' | 'large';
  classnames?: any;
  contentXPosition?: 'start' | 'center' | 'end';
  contentYPosition?: 'top' | 'center' | 'bottom';
  headerClasses?: '';
  contentClasses?: '';
  footerClasses?: '';
  children?: any;
}
export interface CardIconProps {
  name: string;
  height?: number;
  width?: number;
}
/**
 * *__header__* : Boolean to show/hide header | optional | default is 'true'
 * *__footer__* : Boolean to show/hide footer | optional | default is 'true'
 * *__title__* : title of the card | optional
 * *__type__* : type of the card theme | default is 'primary'
 * *__rounded__* : Boolean to control card border radius | optional | default is 'false'
 * *__shadow__* : Boolean to control card shadow | optional | default is 'false'
 * *__paddingRequired__* : Boolean to control card content padding | optional
 * *__size__* : size of the header text | optional | default is 'small'
 * *__classnames__* : classnames to custom style the card | optional
 * *__contentXPosition__* : card content's horizontal position | optional | default is 'center' : 'start' | 'center' | 'end';
 * *__contentYPosition__* : card content's vertical position | optional | default is 'center' : 'top' | 'center' | 'bottom';
 * *__headerClasses__* : css classes for card header | optional
 * *__contentClasses__* : css classes for card content | optional
 * *__footerClasses__* : css classes for card footer | optional
 */
const Card = ({
  variant = 'primary',
  header = true,
  footer = false,
  title = 'Basic card',
  size = 'small',
  rounded = false,
  shadow = false,
  paddingRequired = true,
  contentXPosition = 'center',
  contentYPosition = 'center',
  headerClasses = '',
  contentClasses = '',
  footerClasses = '',
  children = '',
  footerContent = '',
}: CardProps) => {
  return (
    <div
      className={classNames('storybook-card-container', {
        'border-round': rounded,
        'card-shadow': shadow,
      })}
    >
      {header && (
        <CardHeader
          variant={variant}
          title={title}
          size={size}
          rounded={rounded}
          shadow={shadow}
          classnames={headerClasses}
        />
      )}
      <CardContent
        classnames={contentClasses}
        contentXPosition={contentXPosition}
        contentYPosition={contentYPosition}
        paddingRequired={paddingRequired}
      >
        {children}
      </CardContent>
      {footer && (
        <CardFooter
          variant={variant}
          footerContent={footerContent}
          rounded={rounded}
          classnames={footerClasses}
        />
      )}
    </div>
  );
};

//------------------------Card Content----------------------------
export interface CardContentProps {
  classnames?: string;
  children?: any;
  paddingRequired?: boolean;
  contentXPosition?: 'start' | 'center' | 'end';
  contentYPosition?: 'top' | 'center' | 'bottom';
}
const CardContent = ({
  children = 'This is a new Card',
  classnames = '',
  paddingRequired,
  contentXPosition = 'center',
  contentYPosition = 'center',
}: CardContentProps) => {
  return (
    <div
      className={classNames(
        `storybook-card-body card-content justify-content-${contentXPosition}
        align-items-${contentYPosition}`,
        {
          'card-content-padding': paddingRequired,
        }
      )}
    >
      {children}
    </div>
  );
};

//------------------------Card Header----------------------------
export interface CardHeaderProps {
  variant: 'default' | 'primary' | 'success' | 'warning' | 'error';
  size?: 'x-small' | 'small' | 'medium' | 'large';
  title: string;
  rounded?: boolean;
  shadow?: boolean;
  classnames?: string;
}

const CardHeader = ({
  variant,
  size,
  title,
  rounded,
  shadow,
}: CardHeaderProps) => {
  return (
    <div
      className={classNames(
        `storybook-card-header storybook-card-header--${variant}`,
        {
          'border-round-top': rounded,
          'card-header-shadow': shadow,
        }
      )}
    >
      <div className={`header--${size}`}>{title}</div>
    </div>
  );
};

//------------------------Card Footer----------------------------
export interface CardFooterProps {
  variant: 'default' | 'primary' | 'success' | 'warning' | 'error';
  size?: 'x-small' | 'small' | 'medium' | 'large';
  footerContent?: any;
  rounded?: boolean;
  shadow?: boolean;
  classnames?: string;
}
const CardFooter = ({
  footerContent = '',
  rounded = false,
  variant = 'default',
  classnames = '',
}: CardFooterProps) => {
  return (
    <div
      className={classNames(
        'storybook-card-footer',
        `storybook-card-footer--${variant}`,
        {
          'border-round-bottom': rounded,
          classnames,
        }
      )}
    >
      <div className={`footer`}>{footerContent}</div>
    </div>
  );
};
export default Card;