import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';

import { ScrollView } from 'react-native-gesture-handler';
import { useCreation, useRequest } from '@umijs/hooks';
import useModel from 'flooks';
import Detail from './model';
import { navigate } from '../../navigation/RootNavigation';

export default function Merchant() {
  const { merchantInfo } = useModel(Detail, ['merchantInfo']);

  const {
    img,
    name,
    introduction,
    category,
    address,
    phone,
    endTime,
    startTime,
  } = merchantInfo;

  const imgList = useCreation(() => {
    return img ? img.split(',') : [];
  }, [img]);

  const categoryName = useCreation(() => {
    return category && category.length > 0 ? category[0].name : '';
  }, [category]);

  return (
    <>
      <Div bg="white" py={20} px={15}>
        <Div row>
          {imgList.map((item, index) => {
            return (
              <Image
                mr={3}
                mb={10}
                h={87}
                w={87}
                key={index}
                source={{ uri: item }}
              />
            );
          })}
        </Div>
        <Text fontSize="xl" fontWeight="bold" textAlign="left">
          商家名称 -{name}
        </Text>
        <Text p={10} fontSize="xs" textAlign="left">
          {introduction}
        </Text>
      </Div>
      <Div bg="white" mt={10} py={5} px={15}>
        <Div row py={12}>
          <Text flex={1} fontSize="sm" textAlign="left">
            商家品类
          </Text>
          <Text fontSize="sm" color="gray300" textAlign="left">
            {categoryName}
          </Text>
        </Div>
        <Div row py={12}>
          <Text flex={1} fontSize="sm" textAlign="left">
            商家地址
          </Text>
          <Text fontSize="sm" color="gray300" textAlign="left">
            {address}
          </Text>
        </Div>
        <Div row py={12}>
          <Text flex={1} fontSize="sm" textAlign="left">
            商家电话
          </Text>
          <Text fontSize="sm" color="gray300" textAlign="left">
            {phone}
          </Text>
        </Div>
        <Div row py={12}>
          <Text flex={1} fontSize="sm" textAlign="left">
            营业时间
          </Text>
          <Text fontSize="sm" color="gray300" textAlign="left">
            {startTime}~{endTime}
          </Text>
        </Div>
      </Div>
      <Button
        bg="brand500"
        block
        mx={15}
        mt={10}
        mb={20}
        onPress={() => navigate('ReportBusiness')}
      >
        举报商家
      </Button>
    </>
  );
}