import React from 'react';
import { Renderer, RendererProps } from '../../../../factory';
import { BaseSchema } from '../../../../Schema';
import AntdImage from 'antd/lib/image';
import Popover from 'antd/lib/Popover';
import { ModalPrint } from '../../LabelPrint';
import CellPopover from './CellPopover'
import { getLodop } from '../../../../utils/print/LodopFuncs'

import RcImage, { ImageProps } from 'rc-image';
import { downloadFile } from '../../utils/utils'
import { isMobile } from '../../../../utils/helper';


export interface LionCellImgSchema extends BaseSchema {
  type: 'lion-cell-img';
  title: string;
}

export interface FileValue {
  value?: any;
  src?: string;
  [propName: string]: any;
}

export interface LionCellImgProps extends RendererProps, Omit<LionCellImgSchema, 'type' | 'className'> { }

export interface LionCellImgState {
  files: Array<FileValue>;
  selectList: Array<number>;

  _print_visible: boolean;
  ctx: {
    items: Array<any>;
    rows: Array<any>;
    selectedItems: Array<any>;
    unSelectedItems: Array<any>;
    ids: string;
    primaryField?: string;
    [key: string]: any;
  }

  visible: boolean
}

const errImg = 'data:image/png;base64,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'
export class LionCellImg extends React.Component<LionCellImgProps, LionCellImgState>{
  static defaultProps: Partial<LionCellImgProps> = {
    title: '附件图片'
  }

  baseURL: string = ''
  files: Array<FileValue>


  constructor(props: LionCellImgProps) {
    super(props)

    this.initFiles = this.initFiles.bind(this)
    this.handleImageError = this.handleImageError.bind(this)
    this.handleCheckMedia = this.handleCheckMedia.bind(this)
    this.handlePreviewMedia = this.handlePreviewMedia.bind(this)
    this.handleLabelPrint = this.handleLabelPrint.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleDownloadMedia = this.handleDownloadMedia.bind(this)


    this.baseURL = props.env?.axiosInstance?.defaults?.baseURL
    process.env.NODE_ENV === 'development' && (this.baseURL = 'https://saasdev.fastlion.cn/saas')

    const files = this.initFiles()
    this.state = {
      files,
      selectList: [], // 选中列表
      visible: false,
      _print_visible: false,
      ctx: {
        items: [],
        rows: [],
        selectedItems: [],
        unSelectedItems: [],
        ids: ''
      }
    }
  }

  initFiles() {
    let files: Array<FileValue> = []
    const value: any = this.props.value
    if (value) {
      const { value: fileMd5, info: fileList } = value
      if (fileMd5 && Array.isArray(fileList) && fileList.length) {
        this.files = fileList // 存一个原数据，打印用
        const fileMd5List = fileMd5.split(',')
        files = fileList.map((item, index) => {
          return {
            value: fileMd5List[index],
            src: this.baseURL + (item.thumbnailAddr || item?.addr),
            originalSrc: this.baseURL + item.preview,
            downloadSrc: this.baseURL + item?.addr,
            title: item.name || '',
          }
        })
      }
    }
    return files
  }

  componentDidUpdate(prevProps: LionCellImgProps) {
    if (prevProps.value !== this.props.value) {
      this.setState(
        {
          files: this.initFiles()
        }, () => {
          // console.log(this.state.files)
        }
      );
    }
  }

  matchPdfImg = (str: string) => {
    return /(.jpe?)g|(.png)|(.pdf)/i.test(str)
  }

  // 打印
  handleLabelPrint = () => {
    let list = this.files.filter((_, mediaIndex) => this.state.selectList.includes(mediaIndex))
    // if (!this.matchPdfImg(current?.title)) {
    //   return;
    // }
    this.setState({
      ctx: {
        ...this.state.ctx,
        items: list,
        rows: list,
        selectedItems: list,
        unSelectedItems: []
      }
    }, () => {
      const LODOP = getLodop()
      if (LODOP) {
        this.setState({
          _print_visible: true
        })
      }
    });
  }

  // 下载
  handleDownloadMedia() {
    const { files, selectList } = this.state
    files.filter((_, mediaIndex) => selectList.includes(mediaIndex)).map(item => {
      downloadFile(item.downloadSrc, item.title)
    })
  }

  // 选中操作
  handleSelect = (type: 'all' | 'invert' | 'clear') => {
    // let indexList = [...new Array(this.state.files.length).keys()]
    let indexList: Array<number> = []
    this.state.files.map((item, index) => {
      if (!item.err) {
        indexList.push(index)
      }
    })
    switch (type) {
      case 'all':
        this.setState({
          selectList: indexList
        })
        break;
      case 'invert':
        let invertList = indexList.filter(item => !this.state.selectList.includes(item))
        this.setState({
          selectList: invertList
        })
        break;
      case 'clear':
        this.setState({
          selectList: []
        })
        break;
      default: break;
    }
  }


  handleImageLoaded(el: any, index: number) {
  }

  // 错误处理
  handleImageError(el: any, index: number) {
    const files = this.state.files.concat()
    const file = files[index]
    file.src = errImg
    file.err = true
    files.splice(index, 1, file)
    this.setState({ files })
  }
  handleCheckMedia(index: number) {
    let list = this.state.selectList.concat()
    let findIndex = list.findIndex(item => item === index)
    if (~findIndex) {
      list = list.filter(item => item !== index)
    } else {
      list.push(index)
    }
    this.setState({ selectList: list })

  }

  handlePreviewMedia(index: number) {
    const { onImageEnlarge } = this.props
    const { files } = this.state
    onImageEnlarge && onImageEnlarge({
      src: files[index].src,
      originalSrc: files[index].originalSrc,
      index: index,
      list: files
    })


  }

  render() {
    const { classnames: cx, popOverContainer } = this.props;
    const { selectList, files } = this.state;

    return (
      <>
        <div className={cx('Cell-img')}>
          {
            files && files.length
              ? <Popover
                content={
                  <CellPopover
                    mediaList={files}
                    selectList={selectList}
                    printMedia={this.handleLabelPrint}
                    downloadMedia={this.handleDownloadMedia}
                    selectMedia={this.handleSelect}
                    checkMedia={this.handleCheckMedia}
                    previewMedia={this.handlePreviewMedia} />
                }
                trigger={isMobile() ? [] : 'hover'}
                // trigger="click"
                placement='bottom'
                destroyTooltipOnHide={true}
                getPopupContainer={popOverContainer}
                overlayClassName='table-media-format-popover'
              >
                <div className={cx('Cell-img-wrapper')}>
                  {
                    files.map((item: FileValue, index: number) => {
                      return <img
                        key={item.value || index}
                        src={item.src}
                        className={cx('Cell-img')}
                        // onLoad={(e) => this.handleImageLoaded(e, index)}
                        onError={(e) => this.handleImageError(e, index)}
                      />
                    })
                  }
                </div>
              </Popover>
              : "-"
          }

        </div>

        {this.state._print_visible && <ModalPrint type="lion-print" {...this.props as any} isFilePrint={true} isSingleFilePrint={true} ctx={this.state.ctx as any} show={this.state._print_visible} onHide={() => { this.setState({ _print_visible: false }) }}></ModalPrint>}
      </>
    )

  }
}

@Renderer({
  type: 'lion-cell-img'
})
export class LionCellImgRenderer extends LionCellImg { }