import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { Dimensions } from "react-native";
import { Button } from "@ui-kitten/components";
import { Div, Image, Text, Avatar, Input, Icon } from "react-native-magnus";
import { ScrollView } from "react-native-gesture-handler";
import { useFocusEffect } from "@react-navigation/native";
import { useModel } from "flooks";
import { useMount, useCreation, useRequest } from "ahooks";
import UpLoadImage from "../../components/UpLoadImage";
import OpenTime from "../../components/OpenTime";
import CommentCard from "../../components/Comment";

const { width } = Dimensions.get("window");

const img1 = require("../../assets/images/zan.png");

const img2 = require("../../assets/images/cai.png");

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>
              <Image source={img1} w={12} h={12} />
              <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 LinksScreen({ navigation, route }) {
  const { changeBackground } = useModel("barModel");
  const { httpGet, httpPost } = useModel("httpModel");
  const { success, loading, clearLoading } = useModel("loadingModel", true);

  useFocusEffect(
    React.useCallback(() => {
      changeBackground("rgba(0,0,0,0)");
    }, [])
  );

  const {
    addClassification,
    editGoodsMap,
    saveClassByList,
    removeGoodsClassMap,
    sortClassification,
  } = useModel("goodsModel");

  const { GVDYKL, IQYCDU } = useModel("wordsModel");

  const { params } = route;
  const { goodsId } = params;

  const [goodsInfo, setgoodsInfo] = React.useState({});

  const [comments, setcomments] = React.useState([]);

  const [appraisalSort, setappraisalSort] = React.useState("ALL");
  useRequest(
    () => {
      return httpGet(`/appraisal/goods?goodsId=${goodsId}`)
        .then(res => {
          return Promise.resolve(res);
        })
        .catch(e => {
          return Promise.resolve([]);
        });
    },
    {
      refreshDeps: [goodsId],
      onSuccess: result => {
        setcomments(result);
      },
      onError: e => {
        setcomments([]);
      },
    }
  );

  useMount(() => {
    if (goodsId) {
      loading();
      httpGet(`/goods/get/${goodsId}`, {}, true)
        .then(res => {
          setgoodsInfo(res);
          setname(res.name);
          setimg(res.img);
          setinventory(res.inventory.toString());
          setamount((res.amount || "").toString());
          setdiscountAmount((res.discountAmount || "").toString());
          setintroduction(res.introduction);
          changeGoodsSpecification(sortClassification(res.specifications));
          setpackingPrice((res.packingPrice || 0).toString());
          changeWeek(res.week || "");
          changeStartTime(res.startTime || "");
          changeEndTime(res.endTime || "");
        })
        .finally(() => {
          clearLoading();
        });
    }
  });

  React.useEffect(() => {
    if (editGoodsMap.has(goodsId)) {
      changeGoodsSpecification(editGoodsMap.get(goodsId));
    }
  }, [editGoodsMap.get(goodsId)]);

  const { goodNum, badNum, monthSales, merchantId } = goodsInfo;

  const [img, setimg] = React.useState();
  const [name, setname] = React.useState("");
  const [inventory, setinventory] = React.useState(0);
  const [amount, setamount] = React.useState("");
  const [discountAmount, setdiscountAmount] = React.useState();
  const [packingPrice, setpackingPrice] = React.useState("0");
  const [introduction, setintroduction] = React.useState("");
  const [goodsSpecification, changeGoodsSpecification] = React.useState([]);
  const [week, changeWeek] = React.useState("");
  const [startTime, changeStartTime] = React.useState("08:00:00");
  const [endTime, changeEndTime] = React.useState("18:00:00");

  // 需要批量提交的规格
  const postByList = useCreation(() => {
    return goodsSpecification.filter(item => {
      return !item.id || item.id < 0;
    });
  }, [goodsSpecification]);

  return (
    <>
      {/* <NavHeaderBar title="商品规格编辑" /> */}
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: "#eee",
        }}
      >
        <Div h={width}>
          <UpLoadImage value={img} changeIcon={setimg} size="100%" />
        </Div>
        <Div bg="white" py={20} px={15}>
          <Div row>
            <Text fontSize="sm" minW={70}>
              商品名
            </Text>
            <Div flex={1} ml={5} alignItems="flex-start">
              <Input
                value={name}
                h={25}
                py={2}
                lineHeight={21}
                fontSize="md"
                bg="gray100"
                minW={119}
                onChangeText={setname}
              />

              <Div row alignItems="center" my={10}>
                <Image source={img1} w={12} h={12} />
                <Text fontSize="xs" mr={10} ml={3} color="yellow500">
                  {goodNum || 0}
                </Text>
                <Image source={img2} w={12} h={12} />
                <Text fontSize="xs" ml={3} mr={10} color="gray300">
                  {badNum || 0}
                </Text>
                <Text fontSize="xs" color="gray300">
                  月售
                  {monthSales || 0}
                </Text>
              </Div>
            </Div>
          </Div>

          <Div row alignItems="center">
            <Text fontSize="sm" minW={70}>
              份数
            </Text>
            <Input
              value={inventory}
              bg="gray100"
              minW={70}
              px={12}
              ml={5}
              h={25}
              py={2}
              lineHeight={21}
              fontSize="md"
              keyboardType="numeric"
              onChangeText={setinventory}
            />
          </Div>
          <Div h={1} bg="gray100" my={20} />
          <Div>
            <Div alignSelf="flex-start" pb={10}>
              <Button
                appearance="outline"
                onPress={() => {
                  navigation.navigate("GoodsSpecification", {
                    goodsId: goodsId,
                  });
                }}
              >
                编辑规格
              </Button>
            </Div>

            <Div w={200}>
              {goodsSpecification.map((item, index) => {
                return (
                  <Div key={index}>
                    {item.parent ? (
                      <Div row alignItems="center" mt={3} pl={20}>
                        <Text fontSize="md" flex={1}>
                          添加 {item.name}
                        </Text>
                        <Text fontSize="sm" color="red500">
                          ¥{item.amount || 0}
                        </Text>
                      </Div>
                    ) : (
                      <Div row mt={10}>
                        <Text flex={1} fonySize="xl">
                          分类名： {item.name}
                        </Text>
                        <Text fontSize="sm">
                          {item.multiple ? IQYCDU : GVDYKL}
                        </Text>
                      </Div>
                    )}
                  </Div>
                );
              })}
            </Div>
          </Div>

          <Div h={1} bg="gray100" my={20} />

          <Div>
            <Text fontSize="sm" minW={70} mb={10}>
              商品简介
            </Text>
            <Input
              placeholder="添加商品简介（不超过50字）"
              value={introduction}
              bg="gray100"
              px={12}
              onChangeText={setintroduction}
              multiline
              numberOfLines={4}
              maxLength={50}
              textAlignVertical="top"
            />
            <Div position="absolute" right={12} bottom={12}>
              <Text fontSize="xs" color="gary500">
                {introduction.length}
                /50
              </Text>
            </Div>
          </Div>

          <Div h={1} bg="gray100" my={20} />

          <Div row alignItems="center">
            <Text fontSize="sm" minW={70}>
              原价
            </Text>
            <Input
              value={amount}
              h={30}
              py={5}
              lineHeight={20}
              fontSize="xl"
              bg="gray100"
              minW={70}
              px={12}
              ml={5}
              keyboardType="numeric"
              onChangeText={setamount}
            />
          </Div>
          <Div row alignItems="center" my={10}>
            <Text fontSize="sm" minW={70}>
              优惠价
            </Text>
            <Input
              value={discountAmount}
              h={30}
              py={5}
              lineHeight={20}
              fontSize="xl"
              bg="gray100"
              minW={70}
              px={12}
              ml={5}
              keyboardType="numeric"
              onChangeText={setdiscountAmount}
            />
          </Div>
          <Div row alignItems="center" my={10}>
            <Text fontSize="sm" minW={70}>
              包装价格
            </Text>
            <Input
              value={packingPrice}
              h={30}
              py={5}
              lineHeight={20}
              fontSize="xl"
              bg="gray100"
              minW={70}
              px={12}
              ml={5}
              keyboardType="numeric"
              onChangeText={setpackingPrice}
            />
          </Div>

          <Div row alignItems="center" my={10}>
            <Text fontSize="sm" minW={70}>
              供应时间
            </Text>
            <OpenTime
              submit={(_week, _startTime, _endTime) => {
                changeWeek(_week);
                changeStartTime(_startTime);
                changeEndTime(_endTime);
              }}
              week={week}
              startTime={startTime}
              endTime={endTime}
            />
          </Div>

          <Div my={20} minW={112} alignSelf="center">
            <Button
              status="primary"
              onPress={() => {
                loading();
                const info = { ...goodsInfo };
                delete info.merchant;
                delete info.specifications;
                delete info.isFullReduction;
                httpPost(
                  "/goods/save",
                  {
                    id: goodsId,
                    merchantId: info.merchantId,
                    name,
                    amount,
                    discountAmount,
                    inventory,
                    week,
                    startTime,
                    endTime,
                    introduction,
                    img,
                    packingPrice,
                  },
                  { body: "json" },
                  true
                )
                  .then(res => {
                    return saveClassByList(postByList, res.id);
                  })
                  .then(() => {
                    success("提交成功");
                    navigation.goBack();
                  })
                  .finally(() => {
                    clearLoading();
                  });
              }}
            >
              提交审核
            </Button>
          </Div>
        </Div>

        <Div bg="gray100">
          <Text lineHeight={45} px={15} fontSize="xl">
            商品评价
          </Text>
          {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>
      </ScrollView>
    </>
  );
}