import React from 'react';
import { Upload, Modal, message, Tabs, Result } from 'antd';
import { PlusOutlined, CheckCircleFilled } from '@ant-design/icons';
import ImgCrop from 'antd-img-crop';
import classnames from 'classnames';
import { UploadFile, UploadChangeParam, RcFile } from 'antd/lib/upload/interface';
import { isDev, unParams, uuid } from 'editorUtils/tool';
import req from 'utils/request';
import styles from './index.less';
import { ImgWithContext } from 'editorCore/FormRender';
import { getTenantCodeFromUrl } from 'utils/utils'
const { TabPane } = Tabs;

// 维护图片分类映射
const wallCateName: any = {
  photo: '照片',
  bg: '背景',
  chahua: '插画',
};

function getBase64(file: File | Blob) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });
}

interface PicturesWallType {
  fileList?: UploadFile<any>[];
  value?: UploadFile<any>[];
  action?: string;
  headers?: any;
  withCredentials?: boolean;
  maxLen?: number;
  onChange?: (v: any) => void;
  cropRate?: number | boolean;
  isCrop?: boolean;
  imgWith?: number;
}

class PicturesWall extends React.Component<PicturesWallType> {
  static contextType = ImgWithContext;
  state = {
    previewVisible: false,
    previewImage: '',
    wallModalVisible: false,
    previewTitle: '',
    imgBed: {
      photo: [],
      bg: [],
      chahua: [],
    },
    curSelectedImg: '',
    fileList: this.props.value || [],
  };

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

  handleModalCancel = () => this.setState({ wallModalVisible: false });

  handlePreview = async (file: UploadFile<any>) => {
    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),
    });
  };

  handleWallSelect = (url: string) => {
    this.setState({
      wallModalVisible: true,
    });
  };

  handleImgSelected = (url: string) => {
    this.setState({
      curSelectedImg: url,
    });
  };

  handleWallShow = () => {
    this.setState({
      wallModalVisible: true,
    });
  };

  handleModalOk = () => {
    const fileList = [
      {
        uid: uuid(8, 16),
        name: '图片库',
        status: 'done',
        url: this.state.curSelectedImg,
      },
    ];
    this.props.onChange && this.props.onChange(fileList);
    this.setState({ fileList, wallModalVisible: false });
  };

  handleChange = ({ file, fileList }: UploadChangeParam<UploadFile<any>>) => {
    this.setState({ fileList });
    if (file.status === 'done' || file.status === 'removed') {
      
      const files = fileList.map((item) => {
        const { uid, name, status } = item;
        const baseUrl = item.url || item.response.result;
        const width = this.context || 750
        const url = baseUrl
        return { uid, name, status, url };
      });
      this.props.onChange && this.props.onChange(files);
    }
  };

  handleBeforeUpload = (file: RcFile) => {
    const isJpgOrPng =
      file.type === 'image/jpeg' ||
      file.type === 'image/png' ||
      file.type === 'image/jpg' ||
      file.type === 'image/gif';
    if (!isJpgOrPng) {
      message.error('只能上传格式为jpeg/png/gif的图片');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片必须小于2MB!');
    }
    return isJpgOrPng && isLt2M;
  };

  componentDidMount() {
    const { fileList = [] } = this.props;
    this.init(fileList);
  }
  // componentWillReceiveProps(newProps) {
  //   if (newProps?.fileList) {
  //     this.init(newProps.fileList);
  //   }
  // }
  componentWillReceiveProps(newProps) {
    if (newProps?.value) {
      this.init(newProps.value);
    }
  }

  init = (fileList?: any) => {
    if (fileList) {
      this.setState({ fileList });
    }
  };

  render() {
    const {
      previewVisible,
      previewImage,
      fileList,
      previewTitle,
      wallModalVisible,
      imgBed,
      curSelectedImg,
    } = this.state;
    const {
      action = `${getTenantCodeFromUrl()}/api/attachment/special`,
      headers,
      withCredentials = true,
      maxLen = 1,
      cropRate = 375 / 158,
      isCrop,
    } = this.props;
    
    const newHeaders = {
      // 'x-requested-with': localStorage.getItem('user') || '',
      authorization: localStorage.getItem('token') || '',
      ...headers,
    }
    console.log("newHeaders", newHeaders)

    const uploadButton = (
      <div>
        <PlusOutlined />
        <div className="ant-upload-text">上传</div>
      </div>
    );

    const cates = Object.keys(imgBed);

    return (
      <>
        {isCrop ? (
          <ImgCrop
            modalTitle="裁剪图片"
            modalOk="确定"
            modalCancel="取消"
            rotate={true}
            aspect={cropRate}
          >
            <Upload
              fileList={fileList}
              onPreview={this.handlePreview}
              onChange={this.handleChange}
              name="file"
              listType="picture-card"
              className={styles.avatarUploader}
              action={action}
              withCredentials={withCredentials}
              headers={newHeaders}
              beforeUpload={this.handleBeforeUpload}
            >
              {fileList.length >= maxLen ? null : uploadButton}
            </Upload>
          </ImgCrop>
        ) : (
          <Upload
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
            name="file"
            listType="picture-card"
            className={styles.avatarUploader}
            action={action}
            withCredentials={withCredentials}
            headers={newHeaders}
            beforeUpload={this.handleBeforeUpload}
          >
            {fileList.length >= maxLen ? null : uploadButton}
          </Upload>
        )}
        {/* <div className={styles.wallBtn} onClick={this.handleWallShow}>
          图片库
        </div> */}
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="预览图片" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        <Modal
          visible={wallModalVisible}
          title="图片库"
          okText="确定"
          cancelText="取消"
          width={860}
          onCancel={this.handleModalCancel}
          onOk={this.handleModalOk}
        >
          <Tabs defaultActiveKey={cates[0]} tabPosition="left" style={{ height: 520 }}>
            {cates.map((item, i) => {
              return (
                <TabPane tab={wallCateName[item]} key={item}>
                  <div className={styles.imgBox}>
                    {(imgBed as any)[item] &&
                      (imgBed as any)[item].map((item: string, i: number) => {
                        return (
                          <div
                            className={classnames(
                              styles.imgItem,
                              curSelectedImg === item ? styles.seleted : '',
                            )}
                            key={i}
                            onClick={() => this.handleImgSelected(item)}
                          >
                            <img src={item} />
                            <span className={styles.iconBtn}>
                              <CheckCircleFilled />
                            </span>
                          </div>
                        );
                      })}
                  </div>
                </TabPane>
              );
            })}
            <TabPane tab="更多" key="more">
              <Result status="500" title="Dooring温馨提示" subTitle="更多素材, 正在筹备中..." />
            </TabPane>
          </Tabs>
        </Modal>
      </>
    );
  }
}

export default PicturesWall;