import './navigationbar.scss';

import classNames from 'classnames';
import React, { useContext, useEffect, useState } from 'react';

import Icon from '../../components/Icon';
import ImageIcon from '../../components/ImageIcon';
import { MiniAppContext } from '../../context/miniAppContext';
import { getClientID } from '../../factory/api';
import { MiniAppView } from '../../model/miniAppView';
import { hexToRgba } from '../../utils/cssHelper';

export enum NavBarTextColorType {
  black = 'black',
  white = 'white',
}

interface Props {
  navbgColor?: string;
  time?: string;
  navBarTextColor?: NavBarTextColorType;
  navTitle?: string;
  isBack?: boolean;
  backButtonTap: any;
  navigationHelper: any;
  navBarHeight: any;
  className: any;
  appDetail: any;
  hasRefresh?: boolean;
  setHasRefresh: any;
}

const NavigationBar: React.FC<Props> = (props) => {
  const {
    navbgColor,
    time,
    navBarTextColor,
    navTitle,
    isBack,
    backButtonTap,
    navBarHeight,
    className,
    appDetail,
    hasRefresh,
    setHasRefresh,
  } = props;

  const { state } = useContext(MiniAppContext);
  const [navStyle, setNavStyle] = useState({});
  const [navIconStyle, setNavIconStyle] = useState({});
  const [isShowNotificationCenter, setIsShowNotificationCenter] = useState(
    false
  );

  const navigationClasses = classNames(
    ['simulator-navbar', 'simulator-fixed'],
    {
      'header-event-propagate': state.window.navigationStyle !== 'default',
    }
  );
  const statusToolClasses = classNames(['status-tool'], {
    hide: state.window.navigationStyle === 'none',
  });
  const iconClasses = classNames('status-tool-close', className, {
    'icon-event-propagate': state.window.navigationStyle !== 'default',
  });

  const closeIconClasses = classNames('status-tool-close', className, {
    'icon-event-propagate': state.window.navigationStyle !== 'default',
    'black-close-icon': navBarTextColor === 'black',
  });

  const backIconClasses = classNames('status-tool-left', {
    'icon-event-propagate':
      state.window.navigationStyle !== 'default' && isBack,
  });

  const timeClasses = classNames('status-time', {
    'iphonex-time': navBarHeight === 88,
  });

  useEffect(() => {
    if (state.window.navigationStyle && navbgColor) {
      const opacity = state.window.navigationStyle !== 'default' ? 0 : 1;
      setNavStyle({
        backgroundColor: hexToRgba(navbgColor, opacity),
        color: `${navBarTextColor}`,
        height:
          state.window.navigationStyle !== 'none'
            ? navBarHeight + 'px'
            : '20px',
      });
      if (state.window.navigationStyle === 'default') {
        setNavIconStyle({
          backgroundColor: hexToRgba(navbgColor, 1, 0.9),
          border: '0px',
        });
      } else {
        if (navBarTextColor === 'black') {
          setNavIconStyle({
            background: 'rgba(0, 0, 0, 0.05)',
            border: '0.5px solid rgba(0, 0, 0, 0.1)',
          });
        } else {
          setNavIconStyle({
            backgroundColor: 'transparent',
            border: '0.5px solid rgba(0, 0, 0, 0.25)',
          });
        }
      }
    }
  }, [state.window.navigationStyle, navbgColor, navBarTextColor, navBarHeight]);

  useEffect(() => {
    const permissions = appDetail.permissions;
    if (permissions && permissions?.length > 0) {
      const notification = permissions?.find((item: any) => {
        return item.name === 'mini_app_notification_center';
      });
      setIsShowNotificationCenter(notification != null);
    }
  }, [appDetail]);

  function settingsClick() {
    window.postMessage(
      JSON.stringify({
        event: 'showMenusheet',
        payload: {
          alertBoxName: 'showMenusheet',
          buttonTitle: '閉じる',
        },
      }),
      '*'
    );
  }

  const openNotification = (env = 'staging') => {
    let url = '';
    setHasRefresh(false);
    switch (env) {
      case 'dev':
        url = 'https://dev-www.baymax.jp/app/notification-center';
        break;
      case 'staging':
        url = 'https://stg-www.paypay-corp.co.jp/app/notification-center';
        break;
      case 'production':
        url = 'https://www.paypay.ne.jp/app/notification-center';
        break;
      default:
        url = 'https://dev-www.baymax.jp/app/notification-center';
        break;
    }
    url += `?clientId=${getClientID()}`;
    props.navigationHelper.push(
      new MiniAppView(url)
      //WIP: new MiniAppView('/notification-center?url=' + url)
    );
  };

  return (
    <div className={navigationClasses} style={navStyle}>
      <div
        className="status-bar"
        style={{ paddingTop: navBarHeight === 88 ? '36px' : '0' }}
      >
        <div className="status-bar-left">
          <span className="adaptor-name">PayPay </span>
          <Icon icon="wifi" theme="black" />
        </div>
        <span className={timeClasses}>{time}</span>
        <div className="battery-level">
          <Icon icon="battery-full" theme="black" />
        </div>
      </div>

      <div className={statusToolClasses}>
        {isBack ? (
          <div
            role="presentation"
            className={backIconClasses}
            onClick={backButtonTap}
          >
            <Icon icon="chevron-left" theme={navBarTextColor} />
          </div>
        ) : (
          <div className="status-tool-left-wrapper" />
        )}

        <div className="status-placeholder">
          <div className="status-placeholder-inner">{navTitle}</div>
        </div>
        <div className="status-tool-right">
          <div className="status-setting-container">
            {isShowNotificationCenter ? (
              <>
                {hasRefresh ? <i className="notification"></i> : null}
                <div
                  role="button"
                  tabIndex={0}
                  className={iconClasses}
                  style={navIconStyle}
                  onClick={() => openNotification()}
                >
                  <ImageIcon
                    src={
                      navBarTextColor === 'black'
                        ? 'icon_navigation_btn_notice_onlight_black'
                        : 'icon_navigation_btn_notice_onlight_white'
                    }
                    type="svg"
                  />
                </div>
              </>
            ) : null}
            <div className="status-settings-middle" />
            {appDetail.channelId == null &&
            appDetail.menuItems?.settings === false &&
            appDetail.menuItems?.share === false &&
            appDetail.menuItems?.guidance === false &&
            appDetail.menuItems?.help === false ? null : (
              <div
                role="button"
                tabIndex={0}
                className={iconClasses}
                style={navIconStyle}
                onClick={settingsClick}
              >
                <ImageIcon
                  src={
                    navBarTextColor === 'black'
                      ? 'icon_navigation_btn_menu_onlight_black'
                      : 'icon_navigation_btn_menu_onlight'
                  }
                  type="svg"
                />
              </div>
            )}
            <div className="status-settings-middle" />
            <div
              role="button"
              tabIndex={0}
              className={closeIconClasses}
              style={navIconStyle}
              onClick={() => {
                window.location.reload();
              }}
            >
              <ImageIcon
                src={
                  navBarTextColor === 'black'
                    ? 'icon_navigation_back_onlight_black'
                    : 'icon_navigation_btn_close_onlight'
                }
                type="svg"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NavigationBar;