import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';

import { useTranslation } from 'react-i18next';
import { useRequest } from '@umijs/hooks';
import useModel from 'flooks';
import User from '../../flooks/User'; // detail模块通用方法

import Header from '../../components/Header';
import MerchantCom from '../Main/Home/MerchantCom';

export default function CollectionScreen() {
  const { t } = useTranslation();
  const { id } = useModel(User, ['id']);
  const [Collection, setCollection] = React.useState([]);
  const CollectionRequest = useRequest(
    () => {
      const params = {
        query: {
          userId: id,
          page: 0,
          size: 100,
        },
      };
      const urls = Object.keys(params).map((item) => {
        return `${item}=${encodeURI(JSON.stringify(params[item]))}`;
      });
      return `/myCollection/all?${urls.join('&')}`;
    },
    {
      refreshDeps: [id],
      onSuccess: (result) => {
        setCollection(result.content || []);
      },
    }
  );
  return (
    <>
      <Header title={t('wo-de-shou-cang')} />
      <ScrollView
        contentContainerStyle={{ backgroundColor: '#fff', flexGrow: 1 }}
      >
        {Collection.length === 0 && (
          <Div p={10}>
            <Text color="gray300" textAlign="center">
              {t('zan-wu-shu-ju')}
            </Text>
          </Div>
        )}

        {Collection.map((item) => {
          return (
            <MerchantCom
              key={item.id}
              CollectionId={item.id}
              isCollection
              info={item.merchant}
              freash={CollectionRequest.run}
            />
          );
        })}
      </ScrollView>
    </>
  );
}