import React, { useEffect } from 'react'
import { Checkbox } from 'antd'
import { classNames, getMediaIcon, isImg } from '../../utils/utils'
import { Icon } from '../../../../components/icons'

const CellPopover: React.FC<any> = (props) => {
  return <MediaAction {...props}>
    <ImgContent {...props} />
  </MediaAction>
}

const MediaAction: React.FC<any> = (props) => {
  const { Print, remove, tabSample, readonly, children, selectMedia, mediaList, printMedia, downloadMedia, selectList, isSingleFile, isImage, canDelete, canUpload, upload, maxLength } = props
  const actionList = [
    {
      name: "下载",
      icon: 'fa-download',
      disabled: !selectList?.length,
      action: downloadMedia
    },
    {
      name: "打印",
      icon: 'fa-print',
      disabled: !selectList?.length,
      action: printMedia
    },
    {
      name: "删除",
      icon: 'fa-remove',
      disabled: canDelete === false || !selectList?.length,
      action: remove
    },
    {
      name: "上传",
      icon: 'fa-upload',
      disabled: canUpload === false || mediaList?.length >= maxLength,
      action: upload
    },
  ]
  const fileactionList = [
    {
      name: "下载",
      icon: 'fa-download',
      disabled: true,
      action: downloadMedia
    },
    {
      name: "打印",
      icon: 'fa-print',
      disabled: Print?.(),
      action: printMedia
    },
    {
      name: "删除",
      icon: 'fa-remove',
      disabled: true,
      action: remove
    },
  ]

  return <div className="mediaPopoverContent">
    {
      mediaList.length > 0 &&
      <div className={classNames(
        "topAction"
      )}>
        <div className="actionTitle">文件列表</div>
        {/* // 是否只展示单个文件 */}
        {isSingleFile ? "" :
          <div className="afterActionWrapper">
            <span style={{ cursor: 'pointer' }} onClick={() => { selectMedia('all') }}>全选</span>
            <span style={{ cursor: 'pointer', marginLeft: 16 }} onClick={() => { selectMedia('invert') }} >反选</span>
          </div>
        }
      </div>
    }
    {
      mediaList.length > 0 &&
      <div className="centerContent" style={tabSample ? { minHeight: 124, maxHeight: 230, height: "auto", overflow: "auto" } : {}}>

        {children}
      </div>
    }
    <div className="bottomAction">
      {/* // 是否只展示单个文件-这个是原来tabsample=true的时候操作，感觉应该没什么用了，先放着 */}
      {
        isSingleFile ?
          fileactionList.map((actionItem, actionIndex) => {
            return readonly && actionIndex !== 2 ?
              (
                <div className={
                  classNames(
                    "actionItem",
                    !actionItem.disabled && "actionDisabled"
                  )} key={actionIndex} onClick={() => {
                    actionItem.disabled && actionItem.action?.()
                  }}>
                  <i className={`fa ${actionItem.icon}`}></i>
                  <div className="actionItemName">{actionItem.name}</div>
                </div>
              )
              : ""
          })
          :
          actionList.map((actionItem, actionIndex) => {

            if (actionIndex === 2 && (readonly || canDelete === false)) return ''
            if (actionIndex === 3 && (readonly || canUpload === false)) return ''
            return <div className={classNames(
              "actionItem",
              actionItem.disabled && "actionDisabled"
            )} key={actionIndex} onClick={() => {
              !actionItem.disabled && actionItem.action?.()
            }}>
              <i className={`fa ${actionItem.icon}`}></i>
              <div className="actionItemName">{actionItem.name}</div>
            </div>
          })
      }
    </div>
  </div >
}

const ImgContent: React.FC<any> = (props) => {
  const { singlePhoto, tabSample, formatFileSize, mediaList, selectList, checkMedia, previewMedia, isSingleFile, isImage } = props
  const filetext = (fileName: string) => {
    // if (/(.pdf)/i.test(fileName)) {
    //   return <Icon icon={'file-pdf'} className="icon"></Icon>
    // } else if (/(.ppt)/i.test(fileName)) {
    //   return <Icon icon={'file-ppt'} className="icon"></Icon>
    // } else if (/(.jpe?)g|(.png)|(.svg)|(.gif)/i.test(fileName)) {
    //   const [iconName, iconColor] = getMediaIcon(fileName);
    //   return <Icon icon={iconName} color={iconColor} className="icon" symbol></Icon>
    // } else if (/(.xlsx)|(.xls)/i.test(fileName)) {
    //   return <Icon icon={'file-xls'} className="icon"></Icon>
    // } else if (/(.docx)|(.doc)/i.test(fileName)) {
    //   return <Icon icon={'file-doc'} className="icon"></Icon>
    // } else {
    //   return <Icon icon={'file-file'} className="icon"></Icon>
    // }
    const [iconName, iconColor] = getMediaIcon(fileName);
    return <Icon icon={iconName} color={iconColor} className="icon" symbol></Icon>
  }
  // 是否只展示单个文件
  if (isSingleFile) {
    return (
      <div className={classNames("allImgContent", "popoverContentScrollBar")}
        style={{ textAlign: "center", placeContent: "center", padding: "0 5px" }}>
        {
          <div key={singlePhoto} style={{ textAlign: "center" }}>
            {/* <img
              key={singlePhoto.name}
              src={singlePhoto.thumbnailAddr || singlePhoto.src}
              alt={singlePhoto.sourceFileName}
              style={{ maxWidth: "100%", width: "auto", height: "auto" }}
              onClick={(e) => {
                previewMedia?.(-1, e)
              }}
            /> */}
            <span style={{ margin: '0 2px' }} onClick={(e) => {
              previewMedia?.(-1, e)
            }}>{filetext(singlePhoto.name)}</span>
            {/* 判断是不是图片，图片无文字，文件有文字 */
              isImg(singlePhoto.name) ? null :
                (
                  <>
                    <p className='image-info'>{singlePhoto.name}</p>
                    <p className='image-info'>{singlePhoto.size && formatFileSize(singlePhoto.size)}</p>
                  </>
                )
            }
          </div>
        }
      </div>
    )
  } else {
    return (
      <div className={classNames(
        "allImgContent",
        "popoverContentScrollBar"
      )}>
        {
          mediaList.map((mediaItem: any, mediaIndex: number) => {
            // if (!mediaItem.err) {
              // 图片展示部分
            if (isImage) {
              return <div className={classNames(
                "commonBorder",
                "MediaSelectedWrapper_common",
                mediaList.length === 1 && "singleImgWrapper",
                mediaList.length === 2 && "doubleImgWrapper",
                mediaList.length >= 3 && "mostImgWrapper",
                selectList?.includes(mediaIndex) && "MediaSelectedWrapper_selected",
              )} key={mediaIndex} >
                <img
                  key={mediaIndex}
                  src={mediaItem.thumbnailAddr || mediaItem.src}
                  alt={mediaItem.sourceFileName}
                  onClick={(e) => {
                    !mediaItem.err &&
                      previewMedia?.(mediaIndex, e)
                  }}
                />
                {
                  !mediaItem.err ?
                    <Checkbox
                      className={"selectCheckBox"}
                      checked={selectList?.includes(mediaIndex)}
                      onClick={(e) => {
                        e.stopPropagation()
                        checkMedia(mediaIndex)
                      }}
                    />
                    : null
                }
              </div>
              // 文件列表展示部分
            } else {
              return <div className={'fileListWarp'} style={{ cursor: 'pointer' }} key={mediaIndex} onClick={(e) => {
                previewMedia?.(mediaIndex, e)
              }}>
                <Checkbox
                  className={"selectCheckBox"}
                  checked={selectList?.includes(mediaIndex)}
                  onClick={(e) => {
                    e.stopPropagation()
                    checkMedia(mediaIndex)
                  }}
                />
                {/* <img
                key={mediaItem.name}
                src={mediaItem.thumbnailAddr || mediaItem.src}
                alt={mediaItem.sourceFileName}
                style={{ height: '16px', width: '16px', margin: '8px' }}
              /> */}
                <span style={{ margin: '0 2px' }} >{filetext(mediaItem.name)}</span>
                {/* 文件名 */}
                <span title={`${mediaItem.name}`} className={"fileNameWrapper"}>{`${mediaItem.name}`}</span>
                {/* 文件大小 */}
                <span>{`(${mediaItem.size ? formatFileSize(mediaItem.size) : 0})`}</span>
              </div>
            }
            // }
            
          })
        }
      </div>
    )
  }

}

export default CellPopover