import Button from '../button';
import ConfigProvider from '../config-provider';
import Icon from '../icon';
import React, { Component } from 'react';
import cls from 'classnames';
import { Card as NextCard } from '@alifd/next';
import {
  CardActionsProps as NextCardActionsProps,
  CardMediaProps as NextCardMediaProps,
  CardProps as NextCardProps,
} from '@alifd/next/types/card';

interface CardProps extends NextCardProps {
  direction?: 'horizontal' | 'vertical';
}
interface CardMediaProps extends NextCardMediaProps {
  fullMedia?: boolean;
}

interface CardActionsProps extends NextCardActionsProps {
  btnActions?: boolean | Array<string>;
  onOk?: (event: React.MouseEvent) => void;
  onCancel?: (event: React.MouseEvent) => void;
  okProps?: any;
  cancelProps?: any;
  socialActions?: boolean;
  onTags?: (event: React.MouseEvent) => void;
  onLike?: (event: React.MouseEvent) => void;
  onShare?: (event: React.MouseEvent) => void;
}
class BdesignCardMedia extends Component<CardMediaProps> {
  render() {
    const { prefix = 'next-', fullMedia, className } = this.props;
    return (
      <NextCard.Media
        className={cls(className, {
          [`${prefix}full-media`]: fullMedia === true,
        })}
        {...this.props}
      ></NextCard.Media>
    );
  }
}

class BdesignCardActions extends Component<CardActionsProps> {
  render() {
    const {
      prefix = 'next-',
      className,
      children,
      btnActions,
      onOk,
      onCancel,
      okProps,
      cancelProps,
      socialActions,
      onTags,
      onLike,
      onShare,
    } = this.props;

    if (btnActions) {
      return (
        <NextCard.Actions
          className={cls(className, {
            [`${prefix}card-btn-action-only-ok`]:
                            (Array.isArray(btnActions)
                              ? btnActions.join('')
                              : '') === [ 'ok' ].join(''),
            [`${prefix}card-btn-action-only-cancel`]:
                            (Array.isArray(btnActions)
                              ? btnActions.join('')
                              : '') === [ 'cancel' ].join(''),
            [`${prefix}card-btn-action-reverse`]:
                            (Array.isArray(btnActions)
                              ? btnActions.join('')
                              : '') === [ 'ok', 'cancel' ].join(''),
          })}
          {...this.props}
        >
          <Button
            type="secondary"
            size="medium"
            className="btn-cancel"
            onClick={onCancel}
          >
            {cancelProps ? cancelProps : '取消'}
          </Button>

          <Button
            type="primary"
            size="medium"
            className="btn-ok"
            onClick={onOk}
          >
            {okProps ? okProps : '确认'}
          </Button>
        </NextCard.Actions>
      );
    } else if (socialActions) {
      return (
        <NextCard.Actions
          className={cls(className, {
            [`${prefix}card-social-action`]: true,
          })}
        >
          <div className="cardtags" onClick={onTags}>
            <Icon type="Thumbsup-outlined" />
          </div>

          <div className="cardlike" onClick={onLike}>
            <Icon type="Favorite-outlined" />
          </div>

          <div className="cardshare" onClick={onShare}>
            <Icon type="Share-outlined" />
          </div>
        </NextCard.Actions>
      );
    }

    return (
      <NextCard.Actions {...this.props}>
        {children ? children : undefined}
      </NextCard.Actions>
    );
  }
}
class Card extends Component<CardProps> {
  static BulletHeader = NextCard.BulletHeader;
  static CollaspeContent = NextCard.CollaspeContent;
  static Header = NextCard.Header;
  static Content = NextCard.Content;
  static Media = ConfigProvider.config(BdesignCardMedia);
  static Actions = ConfigProvider.config(BdesignCardActions);
  static Divider = NextCard.Divider;

  render() {
    const { prefix = 'next-', className, direction } = this.props;
    return (
      <NextCard
        {...this.props}
        className={cls(className, {
          [`${prefix}card-horizontal`]: direction === 'horizontal',
        })}
      />
    );
  }
}

export default ConfigProvider.config(Card);