import React, { useState, useEffect } from "react";
import Modal from "react-modal";
import "./Shops.scss";
import ShopList from "../../components/ShopList/ShopList.js";
import search from "./search.png";
import close from "./close.png";
import back from "./back.png";
const Shops = ({ mall, isOpen, onRequestClose, onClick, onClose }) => {
  const [q, setQ] = useState("");

  return (
    <Modal
      isOpen={isOpen}
      style={{ overlay: { zIndex: 10000, background: "#DEE6F6" } }}
      ariaHideApp={false}
      className="shops"
      onRequestClose={() => onRequestClose()}
    >
      <div className="header">
        <img src={back} className="back" onClick={() => onClose()} />
        <input
          value={q}
          className="input"
          onChange={(e) => setQ(e.target.value)}
        />
        <img alt="搜索图标" className="search" src={search} />
        {q && (
          <img
            alt="关闭"
            className="close"
            src={close}
            onClick={() => {
              setQ("");
            }}
          ></img>
        )}
      </div>
      {q && (
        <div className="search-list">
          <ShopList mall={mall} isRow={true} q={q} onClick={onClick}></ShopList>
        </div>
      )}
    </Modal>
  );
};

export default Shops;