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

export default function RecommendStore() {
  const { categories, timeTag } = useModel(HomeModel);

  const navigation = useNavigation();

  const CardCom = ({ info }) => (
    <Div flex={1}>
      <Card
        elevation={0}
        style={styles.card}
        onPress={() =>
          navigation.navigate('HomeCategory', {
            categoryId: info.id,
          })
        }
      >
        <Card.Cover
          style={styles.image2}
          resizeMode="cover"
          source={{ uri: info.icon }}
        />
        <Card.Content style={styles.main2}>
          <Text fontSize="xs" textAlign="center">
            {info.name}
          </Text>
        </Card.Content>
      </Card>
    </Div>
  );

  return (
    <Div row px={15}>
      {categories.concat([timeTag]).map((item, index) => {
        return <CardCom key={index} info={item} />;
      })}
    </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,
  },
});