import './header.scss';

import React, { useRef, useState } from 'react';

import Icon from '../../components/Icon';
import Login from '../../components/LoginPopup';
import Select from '../../components/Select';
import Settings from '../../components/SettingPopup';
import useClickOutside from '../../hooks/useClickOutside';
import { MiniAppAPI, MiniAppCBType } from '../../model/miniAppApi';
import { phoneOptions, scaleOptions } from '../../model/phoneOptions';
import ProjectUpload from '../ProjectUploadPopup/projectupload';

interface Props {
  setDevice: any;
  device: string;
  setRatio: any;
  ratio: string;
  navigationHelper: any;
  setOverlay: any;
  simulatorRef: any;
}

const Header: React.FC<Props> = (props) => {
  //const [isSendClicked, setSendState] = useState(false);
  const [popup, setPopup] = useState({
    login: false,
    settings: false,
    project: false,
  });
  const settingsContainerRef = useRef<HTMLInputElement>(null);
  const loginContainerRef = useRef<HTMLInputElement>(null);
  const uploadContainerRef = useRef<HTMLInputElement>(null);
  function handleShake() {
    props.navigationHelper
      .activeView()
      .handleEvent(MiniAppAPI.detectShakeMotion, MiniAppCBType.complete);
    props.simulatorRef.current.classList.add(
      'shake-simulator' + props.ratio.slice(-2)
    );
    setTimeout(function () {
      props.simulatorRef.current.classList.remove(
        'shake-simulator' + props.ratio.slice(-2)
      );
    }, 1000);
  }
  // function sendToBackground() {
  //   setSendState(true);
  //   props.setOverlay(true);
  //   props.navigationHelper
  //     .activeView()
  //     .handleEvent(
  //       MiniAppAPI.paypayWillEnterBackground,
  //       MiniAppCBType.complete
  //     );
  // }
  // function sendToForeground() {
  //   setSendState(false);
  //   props.setOverlay(false);
  //   props.navigationHelper
  //     .activeView()
  //     .handleEvent(
  //       MiniAppAPI.paypayWillEnterForeground,
  //       MiniAppCBType.complete
  //     );
  // }
  function resetPopup() {
    setPopup({ login: false, settings: false, project: false });
  }

  function openPopup(key: string, value: boolean) {
    resetPopup();
    setPopup((prevState) => {
      return { ...prevState, [key]: value };
    });
  }
  useClickOutside(settingsContainerRef, () => {
    if (popup.settings) {
      resetPopup();
    }
  });
  useClickOutside(uploadContainerRef, () => {
    if (popup.project) {
      resetPopup();
    }
  });
  useClickOutside(loginContainerRef, () => {
    if (popup.login) {
      resetPopup();
    }
  });
  return (
    <div className="header-wrapper">
      <div className="device-section">
        <Select onChange={props.setDevice} defaultValue={props.device}>
          {phoneOptions.map((option, i) => {
            return (
              <Select.Option
                label={option.label}
                value={option.value}
                key={`${option.value}${i}`}
              />
            );
          })}
        </Select>
      </div>
      <div className="ratio-section">
        <Select onChange={props.setRatio} defaultValue={props.ratio}>
          {scaleOptions.map((option, i) => {
            return (
              <Select.Option
                label={option.label}
                value={option.value}
                key={`${option.value}${i}`}
              />
            );
          })}
        </Select>
      </div>
      {/* <div
        role="button"
        title={isSendClicked ? 'Send to Foreground' : 'Send to Background'}
        onClick={isSendClicked ? sendToForeground : sendToBackground}
        tabIndex={0}
        className="header-icon-wrapper"
      >
        <Icon icon="forward" />
      </div> */}
      <div
        role="button"
        title="Shake"
        tabIndex={0}
        className="header-icon-wrapper"
        onClick={handleShake}
      >
        <Icon icon="mobile-alt" />
      </div>

      <div className="right-align">
        <div
          role="button"
          title="Login"
          tabIndex={0}
          ref={loginContainerRef}
          className="header-icon-wrapper"
        >
          <Icon icon="user" onClick={() => openPopup('login', !popup.login)} />
          <Login visible={popup.login}></Login>
        </div>

        <div
          role="button"
          title="Upload"
          ref={uploadContainerRef}
          tabIndex={0}
          className="header-icon-wrapper"
        >
          <Icon
            icon="upload"
            onClick={() => openPopup('project', !popup.project)}
          />
          <ProjectUpload visible={popup.project}></ProjectUpload>
        </div>

        <div
          role="button"
          title="Settings"
          ref={settingsContainerRef}
          tabIndex={0}
          className="header-icon-wrapper"
        >
          <Icon
            icon="cogs"
            onClick={() => openPopup('settings', !popup.settings)}
          />
          <Settings visible={popup.settings}></Settings>
        </div>
      </div>
    </div>
  );
};

export default Header;