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 { useTranslation } from 'react-i18next';
import { Div, Button, Text, Image } from 'react-native-magnus';
import { useNavigation } from '@react-navigation/native';
import useModel from 'flooks';
import { useCreation } from '@umijs/hooks';
import HomeModel from './model';

function CardCom({ info, distance, onPress }) {
  const long = useCreation(() => {
    if (distance) {
      return `${(distance / 1000).toFixed(2)}km`;
    } else {
      return false;
    }
  }, [distance]);
  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 { t } = useTranslation();
  const { newMerchants } = useModel(HomeModel, ['newMerchants']);
  const navigation = useNavigation();

  return (
    <Div p={15}>
      <Div row>
        <Text flex={1} fontSize="xl" textweight="bold">
          {t('xin-dian-tui-jian')}
        </Text>
        <Button
          bg="white"
          fontSize="xs"
          color="gray600"
          py={5}
          px={10}
          onPress={() => {
            navigation.navigate('MerchantsList');
          }}
        >
          {t('geng-duo-xin-dian')}
        </Button>
      </Div>

      <Div row>
        {newMerchants.map((item) => {
          return (
            <CardCom
              key={item.id}
              info={item}
              distance={item.distance}
              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,
  },
});