import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { Div, Image, Text, Icon, Tag } from "react-native-magnus";
import { useRequest } from "@umijs/hooks";
import { useModel } from "flooks";

const AppraisalSortMap = new Map([
  [
    "ALL",
    {
      name: "全部",
    },
  ],
  [
    "LATEST",
    {
      name: "最新",
    },
  ],
  [
    "PRAISE",
    {
      name: "好评",
    },
  ],
  [
    "BAD_REVIEW",
    {
      name: "差评",
      isBad: true,
    },
  ],
  [
    "HAVE_PIC",
    {
      name: "有图",
    },
  ],
]);
const CommentItem = ({ info }) => {
  const imgs = info.img ? info.img.split(",") : [];

  const imageSize = imgs.length > 1 ? 80 : 167;
  return (
    <Div row py={10} px={15} bg="white" mt={10}>
      <Image source={{ uri: info.avatar }} w={33} h={33} />
      <Div flex={1} ml={5}>
        <Div row>
          <Div flex={1}>
            <Text fontSize="sm" textAlign="left">
              {info.nickname}
            </Text>
            <Div row>
              <Icon name="like1" color="yellow500" />
              <Text fontSize="sm" color="yellow500" textAlign="left">
                {info.likes || 0}
              </Text>
            </Div>
          </Div>
          <Text fontSize="sm" color="gray400" textAlign="left">
            {info.appraiseTime}
          </Text>
        </Div>
        <Text my={5} textAlign="left">
          {info.goodsAppraise}
        </Text>
        <Div row>
          {imgs.map((item, index) => {
            return (
              <Image
                key={index}
                mt={5}
                mr={5}
                source={{ uri: item }}
                w={imageSize}
                h={imageSize}
                rounded={3}
              />
            );
          })}
        </Div>
      </Div>
    </Div>
  );
};

export default function Comment() {
  const { mid } = useModel("userModel");
  const { httpGet } = useModel("httpModel");
  const [comments, setcomments] = React.useState([]);

  const [appraisalSort, setappraisalSort] = React.useState("ALL");
  useRequest(
    () => {
      return httpGet(
        `/appraisal/my?merchantId=${mid}&appraisalSort=${appraisalSort}`
      );
    },
    {
      refreshDeps: [mid, appraisalSort],
      onSuccess: result => {
        setcomments(result);
      },
    }
  );

  return (
    <Div flex={1} bg="gray100">
      <Div row p={15}>
        {[...AppraisalSortMap.keys()].map(item => {
          const info = AppraisalSortMap.get(item);
          const isChoose = appraisalSort === item;
          return (
            <Tag
              key={item}
              bg={isChoose ? "yellow500" : info.isBad ? "gray200" : "yellow100"}
              color={isChoose ? "white" : info.isBad ? "gray500" : "yellow500"}
              fontSize="sm"
              mr={5}
              mb={5}
              onPress={() => setappraisalSort(item)}
            >
              {info.name}
            </Tag>
          );
        })}
      </Div>

      {comments.map(item => {
        return <CommentItem info={item} key={item.goodsAppraise} />;
      })}

      {comments.length === 0 && (
        <Div px={10} py={20}>
          <Text color="gray300" textAlign="center">
            暂无数据
          </Text>
        </Div>
      )}
    </Div>
  );
}