/**
 * @file Alert2
 * @author fex
 */

import React from 'react';
import { ClassNamesFn, themeable } from '../theme';
import { Icon } from './icons';
import { isMobile } from '../utils/helper';

export interface AlertProps {
  level: 'danger' | 'info' | 'success' | 'warning';
  title?: string;
  className?: string;
  showCloseButton: boolean;
  showIcon?: boolean;
  icon?: string | React.ReactNode;
  iconClassName?: string;
  closeButtonClassName?: string;
  onClose?: () => void;
  classnames: ClassNamesFn;
  classPrefix: string;
  todayAlter?: boolean;
  pageUniqueMark?: string;
}

export interface AlertState {
  show: boolean;
  /** 折叠全部 */
  foldAll: boolean;
  /** 展示折叠按钮 */
  showFold?: boolean;
}

export class Alert extends React.Component<AlertProps, AlertState> {
  static defaultProps: Pick<
    AlertProps,
    'level' | 'className' | 'showCloseButton'
  > = {
      level: 'info',
      className: '',
      showCloseButton: false
    };
  static propsList: Array<string> = [
    'level',
    'className',
    'showCloseButton',
    'onClose'
  ];
  alertRef: React.RefObject<HTMLDivElement> = React.createRef();
  constructor(props: AlertProps) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
    // this.handleHideToday = this.handleHideToday.bind(this);
    // this.handleJudgeHideToday = this.handleJudgeHideToday.bind(this);
    this.handleFoldContent = this.handleFoldContent.bind(this);
    this.setFoldAll = this.setFoldAll.bind(this);
    this.setShowFold = this.setShowFold.bind(this);
    this.state = { show: true, foldAll: false, showFold: false };
    // 判断今天是否显示
    // this.handleJudgeHideToday();
  }

  handleClick() {
    this.setState(
      {
        show: false
      },
      this.props.onClose
    );
  }
  getDefaultStorageItem() {
    return {
      timeStamp: new Date().getTime()
    }
  }
  setFoldAll(foldAll: boolean) {
    this.setState({ foldAll });
  }
  setShowFold(showFold: boolean) {
    this.setState({showFold})
  }
  /** 执行折叠 */
  handleFoldContent(e) {
    e.stopPropagation();
    this.setFoldAll(!this.state.foldAll)
  }
  
  componentDidMount() {
    // 延迟一下计算的时机 防止计算出错
    setTimeout(() => {
      requestAnimationFrame(() => {
        const realHigh = this.alertRef.current?.scrollHeight || 0;
        this.setShowFold(48 < realHigh)
      })
    }, 800)
  }
  render() {
    const {
      classnames: cx,
      className,
      level,
      children,
      showCloseButton,
      title,
      icon,
      showIcon,
      iconClassName,
      closeButtonClassName,
      todayAlter
    } = this.props;

    const iconNode = icon ? (
      typeof icon === 'string' ? (
        <Icon icon={icon} className={cx(`Alert-icon icon`)} />
      ) : React.isValidElement(icon) ? (
        React.cloneElement(icon, {
          className: cx(`Alert-icon`, icon.props?.className)
        })
      ) : null
    ) : showIcon ? (
      <Icon icon={`alert-${level}`} className={cx(`Alert-icon icon`)} />
    ) : null;

    return this.state.show ? (
      <div ref={this.alertRef}
        className={cx('Alert', level ? `Alert--${level}` : '', className)}

      >
        {showIcon && iconNode ? (
          <div className={cx('Alert-icon', iconClassName)}>{iconNode}</div>
        ) : null}
        <div className={cx('Alert-content')}
          style={{
            maxHeight: this.state.foldAll ? '32px' : 'unset'
          }}
        >
          {title ? <div className={cx('Alert-title')}>{title}</div> : null}
          <div className={cx('Alert-desc')}>{children}</div>
        </div>
        {
          todayAlter && this.state.showFold ? (
            <div
              className={'fold-all-btn'}
              onClick={this.handleFoldContent}
            >
              <Icon className="icon" icon={this.state.foldAll ? '#icon-tooltool_down' : '#icon-tooltool_up'} symbol />
            </div>
          ) : null
        }
        {showCloseButton ? (
          <button
            className={cx('Alert-close', closeButtonClassName)}
            onClick={this.handleClick}
            type="button"
          >
            <Icon icon="close" className="icon" />
          </button>
        ) : null}
      </div>
    ) : null;
  }
}

export default themeable(Alert);