/* eslint-disable react/style-prop-object */
import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import Constants from 'expo-constants';
import {
  Div,
  Button,
  Image,
  Text,
  Avatar,
  Input,
  Icon,
  Tag,
} from 'react-native-magnus';
import { FlatList } from 'react-native-gesture-handler';

import { useTranslation } from 'react-i18next';

import useModel from 'flooks';
import HomeModel from './Home/model';
import MerchantCom from './Home/MerchantCom';

import Header from '../../components/Header';

import { filterMap } from '../../Utils/MerchantUtils';

export default function SearchScreen({ navigation }) {
  const { t } = useTranslation();
  const { searchHome } = useModel(HomeModel, ['searchHome']);

  const [isSearch, setIsSearch] = React.useState(false);
  const [searchType, setsearchType] = React.useState('');
  const [empty, setEmpty] = React.useState(false);
  const [last, setLast] = React.useState(false);
  const [searchVal, setsearchVal] = React.useState('');

  const [searchKey, setsearchKey] = React.useState('');
  const [page, setPage] = React.useState(0);
  const [list, setlist] = React.useState([]);

  function search() {
    if (searchHome.loading) {
      return;
    }
    setIsSearch(true);
    setEmpty(false);
    setLast(false);
    searchHome(searchVal, searchType, page)
      .then((res) => {
        if (!res.last) {
          setPage(page + 1);
        } else {
          setLast(true);
        }
        if (res.empty) {
          setEmpty(true);
        }
        if (page === 0) {
          setlist(res.content);
        } else {
          setlist(list.concat(res.content));
        }
      })
      .catch(() => {
        setlist([]);
        setLast(true);
        setEmpty(true);
      });
  }
  function chooseTag(key) {
    setsearchKey(filterMap.get(key).name);
    setPage(0);
    setsearchType('popularTag');
    setsearchVal(key);
    search();
  }

  return (
    <>
      <StatusBar backgroundColor="transparent" style="dark" translucent />
      <Div h={Constants.statusBarHeight} bg="white" />
      <Div row bg="white" py={10} alignItems="center">
        <Input
          bg="gray200"
          placeholder={t('xiang-chi-shi-mo-sou-yi-sou')}
          p={10}
          fontSize="xs"
          flex={1}
          ml={15}
          autoFocus
          blurOnSubmit
          value={searchKey}
          focusBorderColor="brand500"
          prefix={<Icon name="search" color="gray300" fontFamily="Feather" />}
          onChangeText={(text) => {
            setsearchKey(text);
          }}
          onSubmitEditing={() => {
            setPage(0);
            setsearchType('search');
            setsearchVal(searchKey);
            search();
          }}
        />
        <Div>
          {isSearch ? (
            <Button
              w={60}
              bg="hide"
              color="brand500"
              fontSize="xs"
              onPress={() => {
                setsearchKey('');
                setIsSearch(false);
              }}
            >
              {t('qu-xiao')}
            </Button>
          ) : (
            <Button
              w={60}
              bg="hide"
              color="brand500"
              fontSize="xs"
              onPress={() => navigation.goBack()}
            >
              {t('fan-hui')}
            </Button>
          )}
        </Div>
      </Div>
      {!isSearch && (
        <Div bg="white" flex={1}>
          <Div px={10} mt={10}>
            <Text>{t('re-men-sou-suo')}</Text>

            <Div row flexWrap="wrap">
              {[...filterMap.keys()].map((item, index) => {
                return (
                  <Div key={index} w="33.33%" px={3} mt={10}>
                    <Button
                      block
                      bg="gray200"
                      color="gray300"
                      fontSize="xs"
                      onPress={() => chooseTag(item)}
                    >
                      {filterMap.get(item).name}
                    </Button>
                  </Div>
                );
              })}
            </Div>
          </Div>
        </Div>
      )}
      {isSearch && (
        <FlatList
          data={list}
          renderItem={({ item }) => <MerchantCom info={item} />}
          onEndReached={search}
          ListEmptyComponent={() => empty && <Text>{t('zan-wu-shu-ju')}</Text>}
        />
      )}
    </>
  );
}