/* eslint-disable no-lonely-if */
/* eslint-disable no-unused-expressions */
/* eslint-disable prefer-template */
/* eslint-disable react/jsx-boolean-value */
import React, { useState, useEffect } from 'react';
import { Modal, Collapse, notification } from 'antd';
import { GetIntegratedloginIcon } from '@/services/integratedLogin/api';
import { CheckCircleTwoTone } from '@ant-design/icons';
import classnames from 'classnames';
import styles from './integrate.less';

const { Panel } = Collapse;

const PreviewModal = props => {
  const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl, type } = props;
  const [imgData, setImgData] = useState([]);
  const [pickItem, setPickItem] = useState('');
  const [keepItem, setKeepItem] = useState('');
  const [keepGroupName, setKeepGroupName] = useState([]);

  useEffect(() => {
    console.log(type);
    console.log(process.env, 'process.env.PROXY');
    setPickItem('');
    setKeepItem('');
    update();
    if (!visible) {
      setPickItem('');
      setKeepItem('');
    }
  }, [visible]);

  const update = () => {
    console.log(keepImgeUrl);
    console.log(imageUrl);
    GetIntegratedloginIcon()
      .then(res => {
        if (res.code === 0) {
          let bb = [];
          let aa = [];
          res.data.map((i, a) => {
            if (i.files.length > 0 && type !== '' && i.groupName !== '网站图标') {
              bb.push(i);
              aa.push(i.groupName);
            }
            if (i.files.length > 0 && type === '' && i.groupName === '网站图标') {
              bb.push(i);
              aa.push(i.groupName);
            }
          });
          setKeepGroupName(aa);
          setImgData(bb);
          res.data.map(i => {
            i.files.map((j, index) => {
              if (keepImgeUrl) {
                if (j.path == keepImgeUrl) {
                  setKeepItem(i.groupName);
                  setPickItem(index);
                }
              } else {
                if (j.path == imageUrl) {
                  setKeepItem(i.groupName);
                  setPickItem(index);
                }
              }
            });
          });
        } else {
          notification.error({
            message: '获取失败',
            description: res.msg,
          });
        }
      })
      .catch(err => {
        console.error(err);
      });
  };

  // 提交
  const onSubmit = () => {
    if (keepItem) {
      let aa = imgData.find(i => i.groupName === keepItem);
      callBackSubmit(aa.files[pickItem]);
    }
    onCancel();
  };

  const handleCollapseChange = key => {
    setKeepGroupName(key);
  };

  return (
    <Modal
      title="图片库"
      style={{ top: '100px' }}
      width="1000px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender={true}
      getContainer={false}
    >
      <Collapse
        style={{ height: '600px', overflow: 'scroll' }}
        bordered={false}
        activeKey={keepGroupName}
        onChange={handleCollapseChange}
      >
        {imgData.map((i, j) => {
          return (
            <Panel
              header={i.groupName}
              key={i.groupName}
              style={{
                marginBottom: '24px',
                overflow: 'hidden',
                border: '0px',
                background: '#f7f7f7',
                borderRadius: '2px',
              }}
            >
              {i.files.map((k, index) => {
                return (
                  // <Image
                  //   src={`${isDev ? process.env.PROXY : window.location.origin}${k}`}
                  //   height="100px"
                  // />
                  <div className={styles.divItem} key={index}>
                    {/* <CheckCircleTwoTone
                      className={classnames({
                        [styles.iconHidden]: index !== pickItem || i.groupName !== keepItem,
                        [styles.iconItem]: index === pickItem && i.groupName === keepItem,
                      })}
                    /> */}
                    <img
                      src={window.location.origin + `/${k.path}`}
                      className={classnames({
                        [styles.imgHidden]: index !== pickItem || i.groupName !== keepItem,
                        [styles.imgItem]: index === pickItem && i.groupName === keepItem,
                      })}
                      height="80px"
                      width="80px"
                      alt="集成登录默认"
                      onClick={e => {
                        setPickItem(index);
                        setKeepItem(i.groupName);
                      }}
                    />
                    <div style={{ textAlign: 'center' }}>
                      <p>{k.name}</p>
                    </div>
                  </div>
                );
              })}
            </Panel>
          );
        })}
      </Collapse>
    </Modal>
  );
};
export default PreviewModal;
