import { Modal, Tooltip } from 'antd';
import qs from 'query-string';
import React, { useMemo } from 'react';
import HomeBlackIcon from '../../assets/images/home-black-icon.png';
import LogoNormalImg from '../../assets/images/logo-normal.svg';
import LogoutBlackIcon from '../../assets/images/logout-black-icon.png';
import NoticeBlackIcon from '../../assets/images/notice-black-icon.png';
import { CommonController, ConfigurationController } from '../../services';
import { sessionStore } from '../../utils/store';
import styles from './index.less';
import { LOGIN_PATHNAME } from '../../constants';
import classnames from 'classnames';
import Pass from './Pass';
import { pathHolder } from '../../utils/route';
const { search = '' } = location;
const { _groupName_ } = qs.parse(search);

const Header: React.FC<unknown> = () => {
  const {
    casLogoutUrl,
    casService,
    isCasOpen,
    logoImage,
    logoStatus = 'y',
    titleStatus = 'y',
    groupTitleStatus = 'y',
    title,
    homeBtnStatus,
    messageBtnStatus,
    logoutBtnStatus = 'y',
  } = useMemo(() => {
    const systemConfig: ConfigurationController.SystemConfigFields =
      sessionStore.get('system-config') || {};
    const { configValue: configValueSource } = systemConfig;
    const configValue: ConfigurationController.SystemConfigValueFields =
      JSON.parse(configValueSource || '{}');
    return configValue;
  }, []);
  const userInfo: CommonController.UserInfoResult =
    sessionStore.get('user-info');

  const onJumpLoginApp = () => {
    sessionStore.set('login-info', undefined);
    const url = qs.stringifyUrl({
      // query: { redirect: location.href },
      url: `${location.origin}${pathHolder(LOGIN_PATHNAME)}`,
    });
    location.replace(url);
  };

  const onLogout = async () => {
    Modal.confirm({
      title: '操作提示',
      content: `是否确认退出登录?`,
      maskClosable: true,
      onOk: async () => {
        if (isCasOpen === 'y') {
          const search = qs.stringify({
            service: casService,
          });
          const casHref = `${casLogoutUrl}?${search}`;
          location.replace(casHref);
        } else {
          await CommonController.logoutApi();
          onJumpLoginApp();
        }
      },
      okText: '确定',
      cancelText: '取消',
    });
  };
  const onGoHome = () => {
    const userInfo = sessionStore.get('user-info');
    const [role] = userInfo?.user?.roles || [];
    const { defaultPage = '' } = role || {};
    location.replace(pathHolder(defaultPage));
  };
  return (
    <div className={styles.headerNormalBlock}>
      <div
        className={classnames({
          [styles.logoNormalBlock]: true,
          [styles.logoNormalAction]: true,
        })}
        onClick={onGoHome}
      >
        {Boolean(logoStatus === 'y') && (
          <img src={logoImage || LogoNormalImg} />
        )}
        {Boolean(titleStatus === 'y') && (
          <span className={styles.logoNormalTitle}>
            {(Boolean(groupTitleStatus === 'y')
              ? _groupName_ || title
              : title) || '旗云健康'}
          </span>
        )}
      </div>
      <div className={styles.actionNormalBlock}>
        {Boolean(homeBtnStatus === 'y') && (
          <Tooltip title="首页">
            <div className={styles.actionNormalItem} onClick={onGoHome}>
              <img
                className={styles.actionNormalItemIcon}
                src={HomeBlackIcon}
              />
            </div>
          </Tooltip>
        )}
        {Boolean(messageBtnStatus === 'y') && (
          <div className={styles.actionNormalItem}>
            <img
              className={styles.actionNormalItemIcon}
              src={NoticeBlackIcon}
            />
          </div>
        )}
        {Boolean(logoutBtnStatus === 'y') && (
          <div className={styles.actionDefaultItem}>
            <Pass title="修改密码">
              <span className={styles.name}>
                {userInfo?.user?.nickName || ''}
              </span>
            </Pass>
            <span className={styles.name}>
              {userInfo?.medicalInfo?.orgName || ''}
            </span>
            <img
              onClick={onLogout}
              className={styles.actionNormalItemIcon}
              src={LogoutBlackIcon}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default Header;
