import { useCallback, useEffect, useState } from "react";
import { FC } from "@tarojs/taro";
import { AtFloatLayout, AtInput, AtTabs, AtTabsPane } from "taro-ui";
import { AtFloatLayoutProps } from "taro-ui/types/float-layout";
import { View } from "@tarojs/components";
import { CITY_LIST, SIGHT_LIST } from "../../constants";
import { debounce } from "../../../../utils";
import { getSignListApi } from "../../../../api";
import "./index.scss";

export interface SearchLayoutProps extends AtFloatLayoutProps {
  openDetail(id: (typeof SIGHT_LIST)[0]): void;
}

export const SearchLayout: FC<SearchLayoutProps> = (props) => {
  const [curTab, setCurTab] = useState(0);
  const [keyword, setKeyword] = useState("");
  const [input, setInput] = useState("");
  const [list, setList] = useState<any>({});

  useEffect(() => {
    if (props.isOpened) {
      getSignList();
    }
  }, [props.isOpened]);

  const getSignList = async (idx?: number) => {
    const _idx = idx ?? curTab;
    if (list[_idx]) return;

    const data = await getSignListApi({
      region: CITY_LIST[_idx].title,
      type: "scene",
    });
    setList({
      ...list,
      [_idx]: data,
    });
  };

  const handleTabClick = (idx: number) => {
    setCurTab(idx);
    getSignList(idx);
  };

  const debounceSearch = useCallback(
    debounce((v: string) => {
      setKeyword(v);
    }, 1000),
    []
  );

  const fakeSearch = (v: string) => {
    return v.match(keyword) !== null;
  };

  return (
    <AtFloatLayout className="search-layout" {...props}>
      <View className="search-input">
        {props.isOpened && (
          <AtInput
            clear
            className="search-input__input"
            name="keyword"
            value={input}
            placeholder="请输入要搜索的内容..."
            onChange={(v) => {
              setInput(v as string);
              debounceSearch(v as string);
            }}
          />
        )}
        <View className="search-input__cancel" onClick={props.onClose}>
          取消
        </View>
      </View>

      <AtTabs
        current={curTab}
        scroll
        className="search-tab"
        tabList={CITY_LIST}
        onClick={handleTabClick}
      >
        {CITY_LIST.map((item, idx) => (
          <AtTabsPane current={curTab} index={item.id}>
            {(list[idx] || [])
              .filter((i) => (keyword ? fakeSearch(i.name) : true))
              .map((subItem) => (
                <View
                  key={subItem.id}
                  className="search-tab__item"
                  onClick={props.openDetail.bind(undefined, subItem)}
                >
                  <View className="search-tab__item-inner">
                    <View className="search-tab__item-inner__label">
                      {subItem.name}
                    </View>
                    <View className="limit-line">
                      {subItem.description.slice(0, 50)}
                    </View>
                  </View>

                  <View className="search-tab__item__more" />
                </View>
              ))}
          </AtTabsPane>
        ))}
      </AtTabs>
    </AtFloatLayout>
  );
};
