import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Flex, WingBlank } from '@ant-design/react-native';
import { Card } from 'react-native-paper';
import { Div, Button, Text, Image } from 'react-native-magnus';
import { useNavigation } from '@react-navigation/native';
import useModel from 'flooks';
import HomeModel from './model';

function CardCom({ info, onPress }) {
  return (
    <Button bg="hide" block flex={1} onPress={onPress}>
      <Div px={5} flex={1} alignItems="center">
        <Image w={46} h={46} rounded="xs" source={{ uri: info.logo }} />
        <Text fontSize="xs" textAlign="center" color="gray300">
          {info.showName}
        </Text>
        <Text fontSize="xs" textAlign="center" color="red500">
          1.1km
        </Text>
      </Div>
    </Button>
  );
}

export default function RecommendStore() {
  const { newMerchants } = useModel(HomeModel, ['newMerchants']);
  const navigation = useNavigation();

  return (
    <Div p={15}>
      <Div row>
        <Text flex={1} fontSize="xl" textweight="bold">
          新店推荐
        </Text>
        <Button
          bg="white"
          fontSize="xs"
          color="gray600"
          py={5}
          px={10}
          onPress={() => {
            navigation.navigate('MerchantsList');
          }}
        >
          更多新店&gt;
        </Button>
      </Div>

      <Div row>
        {newMerchants.map((item) => {
          return (
            <CardCom
              key={item.id}
              info={item}
              onPress={() => {
                navigation.navigate('MerchantDetail', {
                  merchantId: item.id,
                });
              }}
            />
          );
        })}
      </Div>
    </Div>
  );
}

const styles = StyleSheet.create({
  image2: {
    width: 47,
    height: 47,
    alignSelf: 'center',
    marginHorizontal: 10,
    borderRadius: 3,
  },
  main2: {
    marginTop: 7,
    paddingHorizontal: 0,
  },
  card: {
    marginVertical: 5,
    borderWidth: 0,
    elevation: 0,
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0,
    shadowRadius: 0,
  },
});