import React, { useState, useEffect } from "react";
import ShopList from "../ShopList/ShopList.js";
import "./HeadBar.scss";
import { searchTypes } from "../Options/Options";
import backpng from './back.png'

const HeadBar = ({
  mall,
  exit,
  start,
  end,
  floors,
  onSwap,
  shop,
  onSetStart,
  onSetEnd,
  isPick,
  setIsPick,
  blurMap,
  showSearchType,
  onClickSearchType,
  searchType,
  onIsTypingChange
}) => {
  const [isTypingStart, setIsTypingStart] = useState(false);
  const [isTypingEnd, setIsTypingEnd] = useState(false);
  const isTyping = isTypingStart || isTypingEnd;
  const [q, setQ] = useState(null);
  const onlyShowStart = isTypingStart || (!start && isPick);
  const onlyShowEnd = isTypingEnd || (!end && isPick);
  const showStart = !onlyShowEnd;
  const showEnd = !onlyShowStart;
  const showBoth = !(isPick || isTyping);
  const hasBoth = start && end;
  const startValue =
    q !== null ? q : isPick ? (shop ? shop.name : "") : start ? start.name : "";
  const endValue =
    q !== null ? q : isPick ? (shop ? shop.name : "") : end ? end.name : "";

  useEffect(() => { onIsTypingChange(isTyping) }, [isTyping])
  return (
    <div
      className={"head-bar" + (showBoth ? " double" : "")}
      onClick={() => blurMap()}
    >
      <div
        className="back"
        onClick={() => {
          if (isPick) setIsPick(false);
          else if (isTypingStart) {
            setQ(null);
            setIsTypingStart(false);
          } else if (isTypingEnd) {
            setQ(null);
            setIsTypingEnd(false);
          } else exit();
        }}
      >
        <img src={backpng}></img>
      </div>
      <div className="content">
        {showBoth && <div className="dots"></div>}
        {showStart && (
          <div className={"row start" + (onlyShowStart ? " single" : "")}>
            <div className="text">
              <input
                value={startValue}
                onFocus={() => setIsTypingStart(true)}
                onChange={(e) => setQ(e.target.value)}
                readOnly={isPick}
                disabled={isPick}
                placeholder={isPick ? "请点击地图选择起点" : "请输入起点"}
              ></input>
              {(start || (isPick && shop)) && (
                <span className="label">
                  {floors[(start ? start : shop).floorOrder][1]}
                </span>
              )}
              <div style={{ flex: 1 }}></div>
              {start === null && isPick && (
                <div
                  className='right'
                  onClick={() => {
                    setIsPick(false);
                    onSetStart(shop);
                  }}
                >
                  开始导航
                </div>
              )}
              {start === null && !isPick && !isTypingStart && (
                <div
                  className="right"
                  onClick={() => {
                    setQ(null);
                    setIsPick(true);
                    setIsTypingStart(false);
                    setIsTypingEnd(false);
                  }}
                >
                  地图选点
                </div>
              )}
            </div>
          </div>
        )}
        {showEnd && (
          <div className={"row end" + (isPick ? " single" : "")}>
            <div className={"text " + (isTypingEnd ? '' : 'has-border')}>
              <input
                value={endValue}
                onFocus={() => setIsTypingEnd(true)}
                onChange={(e) => setQ(e.target.value)}
                readOnly={isPick}
                disabled={isPick}
                placeholder={isPick ? "请点击地图选择终点" : "请输入终点"}
              ></input>
              {((isPick && shop) || end) && (
                <span className="label">
                  {floors[(end ? end : shop).floorOrder][1]}
                </span>
              )}
              <div style={{ flex: 1 }}></div>
              {end === null && isPick && (
                <div
                  className={shop ? "right green" : "right grey"}
                  onClick={() => {
                    setIsPick(false);
                    onSetEnd(shop);
                  }}
                >
                  开始导航
                </div>
              )}
              {end === null && !isPick && !isTypingEnd && (
                <div
                  className="right"
                  onClick={() => {
                    setQ(null);
                    setIsPick(true);
                    setIsTypingEnd(false);
                  }}
                >
                  地图选点
                </div>
              )}
            </div>
          </div>
        )}

        {showBoth && <div className="switch" onClick={() => onSwap()}></div>}
      </div>
      {showBoth && !hasBoth && (
        <div className={"banner " + (start === null ? "start" : "end")}>
          请在顶部选择{!start ? "起" : "终"}点
        </div>
      )}
      {isTyping && q && (
        <div className="shop-list-wrapper">
          <ShopList
            mall={mall}
            q={q}
            onClick={(shop) => {
              if (isTypingStart) {
                onSetStart(shop);
                setQ(null);
                setIsTypingStart(false);
              }
              if (isTypingEnd) {
                onSetEnd(shop);
                setQ(null);
                setIsTypingEnd(false);
              }
            }}
            top={"70px"}
            isRow={true}
          ></ShopList>
        </div>
      )}
    </div>
  );
};

export default HeadBar;