import React from 'react';
import { isClickOnInput, isMobile } from '../utils/helper';
import { ClassNamesFn, themeable, ThemeProps } from '../theme';
import { RendererEnv } from '../env'
import { Icon } from './icons';
import { FileX } from '../renderers/Form/InputImage';
import { ImageThumbProps } from '../renderers/Image';
import { Modal } from 'antd';
import { linkJump, ModleHandleClick, openImageEnlarge } from '../utils/utils';
import Image from '../renderers/Image';
export interface CardProps extends ThemeProps {
  className?: string;
  headerClassName?: string;
  titleClassName?: string;
  subTitleClassName?: string;
  descriptionClassName?: string;
  avatarTextStyle?: object;
  avatarTextClassName?: string;
  avatarClassName?: string;
  secondaryClassName?: string;
  imageClassName?: string;
  bodyClassName?: string;
  footerClassName?: string;
  media?: React.ReactNode;
  mediaPosition?: 'top' | 'left' | 'right' | 'bottom';
  toolbar?: React.ReactNode;
  children?: React.ReactNode;
  actions?: React.ReactNode;
  title?: string | JSX.Element;
  subTitle?: string | JSX.Element;
  subTitlePlaceholder?: string | JSX.Element;
  description?: string | JSX.Element;
  descriptionPlaceholder?: string | JSX.Element;
  avatar?: any;
  avatarText?: string | JSX.Element;
  secondary?: string | JSX.Element;
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
  classnames: ClassNamesFn;
  icon?: string | JSX.Element;
  // chencicsy
  env: RendererEnv;
  handleModleClick?: (visible: boolean) => void;
  onImageEnlarge?: (
    info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
      index?: number;
      list?: Array<
        Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>
      >;
    }
  ) => void;
  titleField?: string;//标题字段下钻
  subTitleField?: string;//副标题下钻
  dataColumns?: obj[];//列信息
  data?: obj;
  thumbRatio?: '1:1' | '4:3' | '16:9';//图片显示比例
}

export class Card extends React.Component<CardProps> {
  static defaultProps: Partial<CardProps> = {
    className: '',
    avatarClassName: '',
    headerClassName: '',
    footerClassName: '',
    secondaryClassName: '',
    avatarTextClassName: '',
    bodyClassName: '',
    titleClassName: '',
    subTitleClassName: '',
    descriptionClassName: '',
    imageClassName: '',
    mediaPosition: 'left',
    thumbRatio: '16:9'
  };
  avatarRef: React.RefObject<HTMLDivElement> = React.createRef();
  pressTimer: any
  stopCounter: boolean
  constructor(props: CardProps) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    const { thumbRatio, classPrefix } = this.props;
    if(this.avatarRef.current && thumbRatio) {
      const basicWidth = this.avatarRef.current.clientWidth;
      const [wl, hl] = thumbRatio.split(':').map(item => Number(item));
      const calcHeight = basicWidth * (hl/wl);
      const emptyPic = this.avatarRef.current.querySelector('.card-empty-pic') as HTMLDivElement;
      if(emptyPic) {
        emptyPic.style.height = calcHeight + 8 + 'px'
      }
    }
  }

  handleClick(e: React.MouseEvent<HTMLDivElement>) {
    if (isClickOnInput(e)) {
      return;
    }

    this.props.onClick && this.props.onClick(e);
  }

  // 触摸开始
  touchStart = (e: any) => {
    this.stopCounter = true
    this.pressTimer = setTimeout(() => {
      this.stopCounter = false
      // this.props?.handleModleClick?.(true);
    }, 500); // 设置长按时间阈值，单位为毫秒
  }

  // 触摸移动
  touchMove = () => {
    clearTimeout(this.pressTimer);
    this.stopCounter = false
  }

  touchEnd = (e: any) => {
    clearTimeout(this.pressTimer);
    // 短按事件处理
    if (this.stopCounter) {
      this.props.onClick && this.props.onClick(e);
    }
  }

  render() {
    const {
      classnames: cx,
      className,
      headerClassName,
      bodyClassName,
      titleClassName,
      subTitleClassName,
      descriptionClassName,
      avatarClassName,
      avatarTextStyle,
      imageClassName,
      avatarTextClassName,
      secondaryClassName,
      footerClassName,
      media,
      mediaPosition,
      actions,
      children,
      onClick,
      toolbar,
      title,
      subTitle,
      subTitlePlaceholder,
      description,
      descriptionPlaceholder,
      secondary,
      avatar,
      avatarText,
      icon,
      env,
      onImageEnlarge,
      titleField,
      subTitleField,
      data,
      dataColumns,
      classPrefix,
      thumbRatio
    } = this.props;

    const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi || '';

    let heading = null;
    const isShowHeading =
      avatar ||
      avatarText ||
      title ||
      subTitle ||
      subTitlePlaceholder ||
      description ||
      descriptionPlaceholder ||
      icon ||
      toolbar;
    const imgUrl = (avatar?.info?.[0]?.addr as string)?.startsWith?.("http") ? avatar?.info?.[0]?.addr : ((baseUrl ? baseUrl : '') + avatar?.info?.[0]?.addr)
    if (isShowHeading) {
      heading = (
        <div className={cx('Card-heading', headerClassName)} ref={this.avatarRef}>
          {media ? null : (
            avatar && <div className={cx('Card-avtarimg')}>
              {avatar?.info?.[0]?.addr ?
                <div className={cx('Card-img-container')} onClick={(e) => {
                  e.stopPropagation()
                  openImageEnlarge([avatar?.info?.[0]], baseUrl, onImageEnlarge, env)
                }}><Image
                  autoCalc
                  className={'Auto-calc-size'}
                  src={imgUrl}
                  thumbMode={'cover'}
                  thumbRatio={thumbRatio}
                  classPrefix={classPrefix}
                /></div> : <div onClick={(e) => e.stopPropagation()} className='card-empty-pic'>
                  <Icon icon='no-resources' />
                  No image
              </div>}
            </div>)
          }
          <div className={cx('Card-body-content')}>
            {icon}
            <div className={cx('Card-meta')}>
              <div className={cx('Card-meta-content')}>
                <div className={cx('Card-title-body',)}>
                  {title ? (
                    <div onClick={(e) => {
                      //解析是否有跳转
                      let linkParam = {};
                      let canJump = false;
                      if(titleField?.includes('${')) {
                        const colName = titleField.split('{')?.[1].split('}')?.[0];
                        const targetCol = dataColumns?.find((item: obj) => item.name === colName);
                        if(targetCol?.linkId) {
                          linkParam = targetCol;
                          canJump = linkJump(targetCol.linkId, data, targetCol.jumpDisabledOn);
                        }
                      }
                      if(canJump) {
                        e.stopPropagation()
                        ModleHandleClick({...this.props, ...linkParam, value: data?.[(linkParam as any).name]}, e.target)
                      }
                    }} className={cx('Card-title', titleClassName)}>{title}</div>
                  ) : null}
                  {avatarText ? (
                    <div className={cx('Card-title-text')}>{avatarText}</div>
                  ) : null}
                </div>

                {subTitle || subTitlePlaceholder ? (
                  <div className={cx('Card-subTitle', subTitleClassName)} 
                  onClick={(e) => {
                    //解析是否有跳转
                    let linkParam = {};
                    let canJump = false;
                    if(subTitleField?.includes('${')) {
                      const colName = subTitleField.split('{')?.[1].split('}')?.[0];
                      const targetCol = dataColumns?.find((item: obj) => item.name === colName);
                      if(targetCol?.linkId) {
                        linkParam = targetCol;
                        canJump = linkJump(targetCol.linkId, data, targetCol.jumpDisabledOn);
                      }
                    }
                    if(canJump) {
                      e.stopPropagation()
                      ModleHandleClick({...this.props, ...linkParam, value: data?.[(linkParam as any).name]}, e.target)
                    }
                  }}
                  >
                    {subTitle
                      ? subTitle
                      : subTitlePlaceholder
                        ? subTitlePlaceholder
                        : null}
                  </div>
                ) : null}
              </div>
            </div>
            {toolbar}
          </div>

        </div>
      );
    }

    const body = children;

    return (
      <div
        onClick={(e) => { !isMobile() && this.handleClick(e) }}
        className={cx('Card', className, {
          'Card--link': onClick,
          'Card--NoAvatar': !avatar
        })}
      >
        {media ? (
          <div className={cx(`Card-multiMedia--${mediaPosition}`)}>
            {media}
            <div className={cx('Card-multiMedia-flex')}>
              {heading}
              {body ? (
                <div className={cx('Card-body', bodyClassName)}
                  onTouchStart={this.touchStart}
                  onTouchMove={this.touchMove}
                  onTouchEnd={this.touchEnd}>
                  {body}
                  {description || descriptionPlaceholder ? (
                    <div className={cx('Card-desc', descriptionClassName)}>
                      {description
                        ? description
                        : descriptionPlaceholder
                          ? descriptionPlaceholder
                          : null}
                    </div>
                  ) : null}
                </div>
              ) : null}

              {secondary || actions ? (
                <div className={cx('Card-footer-wrapper', footerClassName)}>
                  {secondary ? (
                    <div className={cx('Card-secondary', secondaryClassName)}>
                      {secondary}
                    </div>
                  ) : null}
                  {actions && !isMobile() ? (
                    <div className={cx('Card-actions-wrapper')}>{actions}</div>
                  ) : null}
                </div>
              ) : null}
            </div>
          </div>
        ) : (
          <>
            {heading}
            {body ? (
              <div className={cx('Card-body', bodyClassName)}
                onTouchStart={this.touchStart}
                onTouchMove={this.touchMove}
                onTouchEnd={this.touchEnd}>
                {body}
                {description || descriptionPlaceholder ? (
                  <div className={cx('Card-desc', descriptionClassName)}>
                    {description
                      ? description
                      : descriptionPlaceholder
                        ? descriptionPlaceholder
                        : null}
                  </div>
                ) : null}
              </div>
            ) : null}
            {secondary || actions ? (
              <div className={cx('Card-footer-wrapper', footerClassName)}>
                {secondary ? (
                  <div className={cx('Card-secondary', secondaryClassName)}>
                    {secondary}
                  </div>
                ) : null}
                {actions && !isMobile() ? (
                  <div className={cx('Card-actions-wrapper')}>{actions}</div>
                ) : null}
              </div>
            ) : null}
          </>
        )}
      </div>
    );
  }
}

export default themeable(Card);