import React, { useCallback, useRef, useState } from 'react';
import { useModel } from 'umi';
import Cropper from 'react-cropper';
import { Button, Modal, message } from 'antd';
import { updateLogo } from '../../service';
import styles from './index.less';
import 'cropperjs/dist/cropper.css';

export default ({ onShouldChange, url }) => {
  const { refresh } = useModel('@@initialState');
  const fileInputRef = useRef();
  const [logoUrl, setLogoUrl] = useState('');
  const [cropper, setCropper] = useState();
  const [uploading, setUploading] = useState(false);
  const handleFileSelected = useCallback(
    (e) => {
      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = () => {
        setLogoUrl(reader.result);
      };
    },
    [onShouldChange],
  );

  const handleSubmit = useCallback(() => {
    if (typeof cropper !== 'undefined') {
      cropper.getCroppedCanvas().toBlob((file) => {
        setUploading(true);
        updateLogo(file).then((r) => {
          setUploading(false);
          if (r?.code === 1) {
            message.success('上传成功');
            refresh();
            setLogoUrl('');
            onShouldChange();
          }
        });
      });
    }
  }, [cropper]);

  return (
    <div>
      <input
        type="file"
        hidden
        accept="image/gif,image/jpeg,image/jpg,image/png"
        ref={fileInputRef}
        onChange={(e) => {
          handleFileSelected(e);
        }}
      />

      {!url && (
        <div className={styles.trigger} onClick={() => fileInputRef.current.click()}>
          {/* <Icon type="upload" style={{ fontSize: '24px', marginBottom: 5 }} /> */}
          上传企业 Logo
        </div>
      )}

      {url && (
        <div
          style={{
            backgroundImage: `url(${url})`,
          }}
          className={styles.logo}
        />
      )}

      {url && (
        <div className={styles.modify}>
          <span onClick={() => fileInputRef.current.click()}>修改 Logo</span>
        </div>
      )}

      {logoUrl && (
        <Modal
          title={null}
          width={388}
          visible
          closable={false}
          maskClosable={false}
          keyboard={false}
          footer={null}
        >
          <div className={styles.c}>
            <div className={styles.h}>
              裁剪图片
              <div className={styles.close} onClick={() => setLogoUrl('')}>
                {/* <Icon type="close" /> */}
              </div>
            </div>
            <div className={styles.cc}>
              <Cropper
                style={{ height: 179, width: 300 }}
                src={logoUrl}
                viewMode={0}
                dragMode="move"
                aspectRatio={1}
                movable
                rotatable={false}
                cropBoxMovable={false}
                cropBoxResizable={false}
                toggleDragModeOnDblclick={false}
                onInitialized={(instance) => {
                  setCropper(instance);
                }}
              />
              <div className={styles.submit}>
                <Button
                  type="primary"
                  size="large"
                  loading={uploading}
                  onClick={() => handleSubmit()}
                >
                  保存
                </Button>
              </div>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
};
