import { UploadFile, UploadFileStatus } from 'antd/lib/upload/interface'
import React from 'react';
import { RendererProps } from '../../../../../factory';
import { FormItem, FormControlProps, FormBaseControl } from '../../../../Form/Item'
import Image from 'antd/lib/Image';
import { UploadProps } from 'antd/lib/Upload';

import './LionShowImg.scss';
import { Warpper } from './style';

interface IState {
  previewVisible: boolean;
  previewImage: string;
  previewTitle: string;
  showfileList: Array<UploadFile>;
  errorImage: UploadFile;
  type: string;
  imgHeight: string;
}

function getBase64(file: any) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export interface LionShowImgSchema extends FormBaseControl {
  type: 'lion-show-img';
}

export interface LionShowImgProps extends FormControlProps, Omit<LionShowImgSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> { }

export class LionShowImg extends React.Component<LionShowImgProps & UploadProps & RendererProps, IState>{

  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    errorImage: {
      url: 'data:image/png;base64,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',
      uid: 'error',
      status: 'error' as UploadFileStatus,
      name: 'error.png'
    },
    showfileList: [] as any,
    type: '',
    imgHeight: '100%'
  };

  componentDidMount() {
    // this.props.onChange('');
    let content;

    const { data, name, env, store } = this.props;
    const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi || ''
    content = data[name as string] || store?.data[name as string];
    const { thumbRatio } = this.props;
    switch (thumbRatio) {
      case '4:3':
        this.setState({
          imgHeight: '75%'
        })
        break;
      case '16:9':
        this.setState({
          imgHeight: '56.25%'
        })
        break;
      case '1:1':
      default:
        this.setState({
          imgHeight: '100%'
        })
        break;

    }
    // this.props.onBulkChange({ ['temp_' + name as string]: '' });
    if (content) {

      const { info, value } = content;

      if (info && value?.length && info.length !== 0) {
        const md5Map = value.split(',');
        let initialList: any = [];
        info.map((ele: any, idx: number) => {
          initialList.push({
            uid: md5Map[idx],
            status: 'done',
            name: ele.name,
            url: baseUrl + ele.addr,
            thumbUrl: baseUrl + ele.thumbnailAddr // 缩略图地址
          })
        })
        this.setState({
          showfileList: [
            ...initialList
          ]
        });
        // this.props.onBulkChange({ ['temp_' + name as string]: value });
      }

    }


  }
  componentDidUpdate(prevProps: any, prevState: any) {
    const { data, name, env } = this.props;
    const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi || ''
    const content = data[name as string]
    if (content && (content !== prevProps.data[name as string])) {
      // if (content) {
      const { info, value } = content;
      if (info && value?.length && info.length !== 0) {
        const md5Map = value.split(',');
        let initialList: any = [];
        info.map((ele: any, idx: number) => {
          initialList.push({
            uid: md5Map[idx],
            status: 'done',
            name: ele.name,
            url: baseUrl + ele.addr,
            thumbUrl: baseUrl + ele.thumbnailAddr // 缩略图地址
          })
        })
        this.setState({
          showfileList: [
            ...initialList
          ]
        });
        // this.props.onBulkChange({ ['temp_' + name as string]: value });
        // }

      } else {
        this.setState({
          showfileList: []
        });
      }
    }

  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async (file: any) => {
    if (file?.status === 'error') {
      return
    }
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  render() {
    const { errorImage, previewVisible, previewImage, previewTitle, showfileList } = this.state;
    const uploadProps: UploadProps = {
      disabled: false,
      listType: "picture-card",
      showUploadList: {
        showPreviewIcon: true,
        showRemoveIcon: false,
        showDownloadIcon: false
      },
      fileList: showfileList && showfileList?.length >= 1 ? showfileList : [errorImage],
      onPreview: this.handlePreview,
      beforeUpload: () => {
        return false
      }
    };
    return (
      <>
        {/* <Warpper {...this.props as any} imgHeight={this.state.imgHeight}>
        <Upload {...uploadProps}>
          {null}
        </Upload>
        <Modal
          className='fastlion-modal'
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
          zIndex={9999}
          maskStyle={{
            zIndex: 9999
          }}
        >
          <img title={previewTitle} alt={previewTitle} style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </Warpper> */}
        <div className={'lion-show-img'}>
          {showfileList.length
            ? showfileList.map((item: any, index: number) => (
              <Image fallback={errorImage.url} key={index} src={item.thumbUrl} alt={item.name} title={item.name} preview={{ src: item.url }} />
            ))
            : <Image src="error" fallback={errorImage.url} />
          }
        </div>
      </>
    );
  }
}

@FormItem({
  type: 'lion-show-img'
})
export class LionShowImgRenderer extends LionShowImg { }