import React, { CSSProperties, useContext, useState } from 'react';
import {
  Card as OldCard,
  CardProps,
  ConfigProvider,
  SkeletonProps,
} from 'antd';
import { Skeleton } from '../Skeleton';
import './index.less';
import classNames from 'classnames';

interface CardExtraProps {
  skeletonProps?: SkeletonProps;
  hasSkeletion?: boolean;
  hoverStyle?: CSSProperties;
  isBoxShadow?: boolean; // 是否加入阴影样式
}

const Card = ({
  className,
  children,
  loading,
  skeletonProps,
  hasSkeletion,
  hoverStyle,
  bordered = true,
  isBoxShadow = false,
  ...props
}: CardProps & CardExtraProps) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-card');

  const getChildren = () => {
    return !hasSkeletion ? (
      children
    ) : (
      <Skeleton {...skeletonProps} loading={loading} active>
        {children}
      </Skeleton>
    );
  };

  const [isHover, setHover] = useState(false);
  const toggleHover = () => setHover(v => !v);
  const getHoverStyle = () => {
    return isHover && props.hoverable
      ? {
          boxShadow: '0px 2px 8px 0px var(--fill-1)',
          ...hoverStyle,
        }
      : {};
  };

  return (
    <OldCard
      {...props}
      bordered={bordered}
      className={classNames(
        `${prefixCls}-box`,
        `${prefixCls}-grid`,
        {
          [`${prefixCls}-cover`]: props.cover,
          [`${prefixCls}-noTitle`]: !props.title,
          [`${prefixCls}--noBordered`]: !bordered,
          [`${prefixCls}--isBoxShadow`]: isBoxShadow,
        },

        className,
      )}
      style={{
        ...getHoverStyle(),
        ...props.style,
      }}
      onMouseEnter={toggleHover}
      onMouseLeave={toggleHover}
    >
      {getChildren()}
    </OldCard>
  );
};

Card.Meta = OldCard.Meta;
Card.Grid = OldCard.Grid;

export { Card };