import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import Constants from 'expo-constants';
import { StyleSheet, View, Image } from 'react-native';
import { Text } from 'react-native-magnus';
import { Flex } from '@ant-design/react-native';
import { TouchableRipple } from 'react-native-paper';
import { useRequest } from '@umijs/hooks';
import useModel from 'flooks';
import Icon from 'react-native-vector-icons/FontAwesome';
import Detail from './model';
import User from '../../flooks/User';
import Chip from '../../components/Chip';
import SvgIcon from '../../components/SvgIcon';

export default function Center() {
  const { merchantInfo, like, delLike } = useModel(Detail, ['merchantInfo']);
  const { id } = useModel(User, ['id']);
  const {
    logo,
    showName,
    monthSales,
    goodNum,
    badNum,
    fullReductions,
    proclamation,
    mid,
  } = merchantInfo;

  const [Collection, setCollection] = React.useState({});

  const collectRequest = useRequest(
    () => {
      const params = {
        query: {
          merchantId: mid,
          userId: id,
        },
      };
      const urls = Object.keys(params).map((item) => {
        return `${item}=${encodeURI(JSON.stringify(params[item]))}`;
      });
      return `/myCollection/all?${urls.join('&')}`;
    },
    {
      refreshDeps: [mid],
      onSuccess: (result) => {
        if (!result.empty) {
          setCollection(result.content[0]);
        } else {
          setCollection({});
        }
      },
    }
  );

  return (
    <View style={styles.box}>
      <View style={styles.main}>
        <Flex>
          <Image
            style={styles.icon}
            resizeMode="cover"
            source={{ uri: logo }}
          />
          <Flex.Item style={styles.center}>
            <Text fontSize="xl" textAlign="center" fontWeight="bold">
              {showName}
            </Text>
            <Flex justify="space-around" style={styles.lab}>
              <Flex>
                <SvgIcon name="zan" type="primary" width={18} height={18} />
                <Text fontSize="sm" textAlign="left" color="brand500">
                  {goodNum || 0}
                </Text>
              </Flex>
              <Flex style={styles.text}>
                <SvgIcon name="zan" Flip color="#000" width={18} height={18} />
                <Text fontSize="sm" textAlign="left" color="gray300">
                  {badNum || 0}
                </Text>
              </Flex>
              <Flex style={styles.text}>
                <Text fontSize="sm" textAlign="left" color="gray300">
                  月售
                  {monthSales}
                </Text>
              </Flex>
            </Flex>
          </Flex.Item>
          <TouchableRipple
            onPress={() => {
              Collection.id
                ? delLike(Collection.id).then(() => {
                    collectRequest.run();
                  })
                : like().then(() => {
                    collectRequest.run();
                  });
            }}
            style={styles.like}
          >
            <Icon
              name={Collection.id ? 'heart' : 'heart-o'}
              size={16}
              color="#FF0000"
            />
          </TouchableRipple>
        </Flex>

        {fullReductions && (
          <Flex style={styles.chips}>
            {fullReductions.map((item) => {
              return (
                <Chip size="mini" key={item.id} outline color="#FF0000">
                  满{item.fullAmount}减{item.minusAmount}
                </Chip>
              );
            })}
          </Flex>
        )}
        <Text fontSize="sm" color="gray500" mt={3} textAlign="center">
          {proclamation}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    marginBottom: -56 - Constants.statusBarHeight,
    zIndex: 12,
    backgroundColor: '#eee',
  },
  main: {
    marginHorizontal: 15,
    backgroundColor: '#fff',
    borderRadius: 3,
    padding: 10,
    marginTop: -20,
  },
  icon: {
    width: 53,
    height: 53,
    borderRadius: 3,
  },
  text: {
    marginLeft: 5,
  },
  like: {
    padding: 5,
    alignSelf: 'flex-start',
  },
  pro: {
    marginTop: 3,
  },
  center: {
    alignItems: 'center',
    paddingRight: 28,
  },
  lab: {
    minWidth: 180,
  },
  chips: {
    maxWidth: '80%',
    overflow: 'hidden',
    alignSelf: 'center',
    marginTop: 5,
  },
});