import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react';
import { Modal, ModalProps, Space, SpaceProps } from 'antd';
import theme from 'antd/lib/theme';
import { DownloadOutlined } from '@ant-design/icons';
import './index.less'

type ViewLargerImageModalParams = {
  imgSrc?: string;
  warningData?: {
    label?: string;
    value?: string;
  }[];
};

export interface ViewLargerImageModalRef {
  show: (params?: ViewLargerImageModalParams) => void;
  handleCancel: () => void;
}

export interface ViewLargerImageModalProps {
  imgStyle?: React.CSSProperties;
  downloadImg?: (imgSrc?: string) => void;
  title?: string;
  downloadText?: string;
  modalProps?: ModalProps
  spaceProps?: SpaceProps;
}

export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLargerImageModalProps>(
  (props, ref) => {

    const { modalProps, downloadImg, imgStyle, title = '预警大图', downloadText = '下载大图', spaceProps } = props
    const { useToken } = theme
    const { token } = useToken()
    const [open, setOpen] = useState<boolean>(false);
    const [imgSrc, setImgSrc] = useState<string>();
    const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();

    const handleCancel = () => {
      setOpen(false);
    }

    useImperativeHandle(ref, () => {
      return {
        show: (_params) => {
          setOpen(true);
          setImgSrc(_params?.imgSrc)
          setWarningData(_params?.warningData)
        },
        handleCancel
      };
    });

    return (
      <Modal
        className='zhst-biz-view-warning-larger-image-modal'
        open={open}
        destroyOnClose
        title={title}
        width="1029px"
        footer={null}
        onCancel={handleCancel}
        {...modalProps}
      >
        <Space size={0} styles={{ item: { backgroundColor: '#F6F9FAFF' } }} {...spaceProps}>
          <img alt={title} src={imgSrc} style={{ width: 789, height: 444, display: 'block', ...imgStyle }} />
          <div className='right-context'>
            {warningData?.map(({ label, value }) => (
              <div key={label} >
                <span className='context-key'>{`${label}: `}</span>
                {value}
              </div>
            ))}
            {imgSrc && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imgSrc)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
          </div>
        </Space>
      </Modal>
    );
  }
)

export default ViewLargerImageModal;

export const useViewLargerImageModal = () => {
  return useRef<ViewLargerImageModalRef>(null);
};