import React, { useMemo } from 'react';
import { Card, Affix } from 'antd';
import classNames from '@pansy/classnames';
import { CardProps } from 'antd/es/card';
import styles from './index.less';
import { AffixProps } from 'antd/lib/affix';

export interface CardWithFooterProps extends CardProps {
  footerStyle?: React.CSSProperties;
  footerTitle?: string | React.ReactNode;
  footerExtra?: string | React.ReactNode;
  isAffix?: boolean;
  affixProps?: AffixProps;
}

const CardWithFooter: React.FC<CardWithFooterProps> = props => {
  const {
    className,
    footerStyle,
    title,
    footerTitle,
    footerExtra,
    children,
    isAffix = false,
    affixProps,
    ...rest
  } = props;

  return (
    <div className={classNames(styles.cardWrapper, className)}>
      <Card title={title} {...rest}>
        {children}
      </Card>
      {isAffix
        ? (footerTitle || footerExtra) && (
            <Affix offsetBottom={0} {...affixProps}>
              <div className={styles.footerWrapper} style={footerStyle}>
                <div className={styles.footerTitle}>{footerTitle}</div>
                <div className={styles.footerExtra}>{footerExtra}</div>
              </div>
            </Affix>
          )
        : (footerTitle || footerExtra) && (
            <div className={styles.footerWrapper} style={footerStyle}>
              <div className={styles.footerTitle}>{footerTitle}</div>
              <div className={styles.footerExtra}>{footerExtra}</div>
            </div>
          )}
    </div>
  );
};

export default CardWithFooter;