import React from 'react';
import classNames from 'classnames';
import { Popover } from 'antd';
import QRCode from 'qrcode.react';
import baseStyles from '../style.less';

const useRenderQcode = props => {
  const styles = props.styles || baseStyles;
  if (!props.qrcode) {
    return null;
  }
  const qrcodes = props.qrcode.split('|');
  const qcodeComponent = url => (
    <img
      src={url}
      className="QuickMark-cont"
      style={{ width: '150px', height: '150px' }}
      alt=""
    />
  );
  const element = [];
  qrcodes.forEach((item, index) => {
    const firstValue = item.split('=');
    switch (firstValue[0]) {
      case '小程序':
        element.push(
          <div
            className={classNames(
              styles['quickMark-single'],
              styles['mini-single'],
            )}
            key={firstValue[0]}
          >
            <Popover
              placement="top"
              content={qcodeComponent(
                'https://panda-water.cn/web4/assets/images/小程序二维码.jpg',
              )}
            >
              <div className={styles['icon-Container']}>
                <span className={styles.Wechat} />
                <span className="iconText WechatText">Wechat</span>
              </div>
            </Popover>
          </div>,
        );
        break;
      case '智联小程序':
        element.push(
          <div
            className={classNames(styles['quickMark-single'], 'miniIOT-single')}
            key={firstValue[0]}
          >
            <Popover
              placement="top"
              content={qcodeComponent(
                'https://panda-water.cn/web4/assets/images/智联小程序二维码.jpg',
              )}
            >
              <div className={styles['icon-Container']}>
                <span className={styles.Wechat} />
                <span
                  className={classNames(styles.iconText, styles.WechatText)}
                >
                  熊猫智联
                </span>
              </div>
            </Popover>
          </div>,
        );
        break;

      case 'Android':
        if (firstValue[1] && firstValue[1].replace(/ /g, '').length > 0) {
          element.push(
            <div
              className={classNames(
                styles['quickMark-single'],
                'Android-single',
              )}
              key={firstValue[0]}
            >
              <Popover
                placement="top"
                content={
                  <QRCode
                    value={firstValue[1].replace(
                      /{ip}/gi,
                      props.ip || window.location.host,
                    )}
                  />
                }
              >
                <div className={styles['icon-Container']}>
                  <span className={styles.Android} />
                  <span
                    className={classNames(styles.iconText, styles.AndroidText)}
                  >
                    Android
                  </span>
                </div>
              </Popover>
            </div>,
          );
        }
        break;
      case 'iPhone':
        if (firstValue[1] && firstValue[1].replace(/ /g, '').length > 0) {
          element.push(
            <div
              className={classNames(
                styles['quickMark-single'],
                'iphone-single',
              )}
              key={firstValue[0]}
            >
              <Popover
                placement="top"
                content={
                  <QRCode
                    value={firstValue[1].replace(
                      /{ip}/gi,
                      props.ip || window.location.host,
                    )}
                  />
                }
              >
                <div className={styles['icon-Container']}>
                  <span className={styles.Wechat} />
                  <span
                    className={classNames(styles.iconText, styles.iphoneText)}
                  >
                    iPhone
                  </span>
                </div>
              </Popover>
            </div>,
          );
        }
        break;
      default:
        if (item && item.replace(/ /g, '').length > 0) {
          const indexIndex = element.findIndex(
            // eslint-disable-next-line no-shadow
            item => item.props.className.indexOf('Android-single') > -1,
          );
          element.splice(indexIndex, 1);
          element.push(
            <div
              className={classNames(
                styles['quickMark-single'],
                'Android-single',
              )}
              key={index}
            >
              <Popover
                placement="top"
                content={
                  <QRCode
                    value={item.replace(
                      /{ip}/gi,
                      props.ip || window.location.host,
                    )}
                  />
                }
              >
                <div className={styles['icon-Container']}>
                  <span className={styles.Android} />
                  <span
                    className={classNames(styles.iconText, styles.AndroidText)}
                  >
                    Android
                  </span>
                </div>
              </Popover>
            </div>,
          );
        }
        break;
    }
  });
  return element;
};

export default useRenderQcode;
