import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Div, Text, Image, Tag } from 'react-native-magnus';
import { Flex, SwipeAction } from '@ant-design/react-native';
import { TouchableRipple } from 'react-native-paper';
import { useTranslation } from 'react-i18next';
import useModel from 'flooks';
import { useCreation } from '@umijs/hooks';
import { useNavigation } from '@react-navigation/native';
import Chip from '../../../components/Chip';
import Icon from '../../../components/SvgIcon';
import DetailModel from '../../Detail/model';
import { getColor } from '../../../Utils/ColorUtils';

// 首页商家组件

export default function MerchantCom(props) {
  const { info, isCollection, CollectionId, freash, isNew } = props;
  const navigation = useNavigation();

  const { delLike } = useModel(DetailModel, []);
  const { t } = useTranslation();
  const {
    showName,
    logo,
    distance,
    category,
    merchantNature,
    startingAmount,
    monthSales,
    goodNum,
    badNum,
    preparationTime,
    mid,
  } = info || { showName: '' };

  const tags = useCreation(() => {
    let list = [];
    if (merchantNature) {
      list.push({
        name: merchantNature.name,
      });
    }
    if (category) {
      list = list.concat(
        category.map((item) => {
          return { name: item.name };
        })
      );
    }
    return list;
  }, [category, merchantNature]);

  const long = useCreation(() => {
    if (distance) {
      return `${(distance / 1000).toFixed(2)}km`;
    } else {
      return false;
    }
  }, [distance]);

  const right = [
    {
      text: t('shan-chu'),
      onPress: () => {
        console.log('删除');
        delLike(CollectionId).then(() => freash());
      },
      style: { backgroundColor: 'red', color: 'white' },
    },
  ];

  return (
    <SwipeAction
      autoClose
      style={{ backgroundColor: 'transparent' }}
      right={right}
      disabled={!isCollection}
    >
      <Div my={isCollection || isNew ? 5 : 0}>
        <TouchableRipple
          onPress={() => {
            navigation.navigate('MerchantDetail', {
              merchantId: isCollection || isNew ? info.id : mid,
            });
          }}
        >
          <Div row px={10} pt={10} bg="white">
            {logo ? (
              <Image
                w={67}
                h={67}
                bg="gray200"
                rounded="sm"
                source={{ uri: logo || '' }}
              />
            ) : (
              <Div w={67} h={67} bg="gray200" />
            )}
            <Div
              flex={1}
              ml={10}
              pb={4}
              borderColor="gray300"
              borderBottomWidth={1}
            >
              <Text size="xl" fontWeight="bold" textAlign="left">
                {showName}
              </Text>
              {tags.length > 0 && (
                <Div row my={3}>
                  {tags.map((item, index) => {
                    return (
                      <Tag
                        bg={getColor()}
                        color="white"
                        key={index}
                        rounded="circle"
                        fontSize="sm"
                        py={2}
                        ml={3}
                      >
                        {item.name}
                      </Tag>
                    );
                  })}
                </Div>
              )}

              <Flex>
                <Flex>
                  <Icon name="zan" type="primary" width={18} height={18} />
                  <Text fontSize="sm" color="brand500" textAlign="left">
                    {goodNum || 0}
                  </Text>
                </Flex>
                <Flex style={styles.text}>
                  <Icon name="zan" Flip color="#000" width={18} height={18} />
                  <Text fontSize="sm" color="gray300" textAlign="left">
                    {badNum || 0}
                  </Text>
                </Flex>
                <Flex style={styles.text}>
                  <Text size="c1" color="gray300" textAlign="left">
                    {t('yue-shou')}
                    {monthSales}
                  </Text>
                </Flex>
              </Flex>
              <Flex>
                <Text fontSize="sm" color="gray300" textAlign="left">
                  {t('qi-song')}${startingAmount || 0}
                </Text>
                <Flex.Item style={styles.text}>
                  <Text fontSize="sm" color="gray300" textAlign="left">
                    {t('pei-song')}$ 10
                  </Text>
                </Flex.Item>
                <Text fontSize="sm" color="gray300" textAlign="left">
                  {preparationTime || 60}
                  {t('fen-zhong')}
                </Text>
                {!!long && (
                  <View style={styles.text}>
                    <Text fontSize="sm" color="gray300" textAlign="left">
                      {long}
                    </Text>
                  </View>
                )}
              </Flex>
              {/* <Flex style={styles.label2}>
                <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
                  {t(
                    'xi-huan-nin-lai-jin-gong-men-xi-huan-nin-lai-jin-gong-men'
                  )}
                </Chip>
                <Chip size="mini" color="#FFE3B9" fontColor="#FF0000">
                  “喜欢您来金拱门喜欢您来金拱门”
                </Chip>
              </Flex> */}
              <Flex style={styles.label2} wrap="wrap">
                <Chip size="mini" outline color="#FF0000">
                  12{t('jian')}5
                </Chip>
              </Flex>
            </Div>
          </Div>
        </TouchableRipple>
      </Div>
    </SwipeAction>
  );
}

const styles = StyleSheet.create({
  image: {
    width: 67,
    height: 67,
    borderRadius: 3,
  },
  text: {
    marginLeft: 6,
  },
  label2: {
    marginTop: 4,
    overflow: 'hidden',
  },
  main: {
    marginLeft: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#C9C9C9',
    paddingBottom: 4,
  },
  merchant: {
    paddingTop: 10,
  },
});