import { View, Image, ScrollView } from "@tarojs/components";
import "./index.less";
import {
  Avatar,
  ConfigProvider,
  Flex,
  Navbar,
  Popup,
  Space,
} from "@taroify/core";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { useMemo, useState } from "react";
import icon from "../../assets/icon/icon.png";
import icon1 from "../../assets/icon/icon1.png";
import icon16 from "../../assets/icon/icon16.png";
import icon20 from "../../assets/icon/icon20.png";
import icon18 from "../../assets/icon/icon18.png";
import icon21 from "../../assets/icon/icon21.png";
import icon26 from "../../assets/icon/icon26.png";
import icon17 from "../../assets/icon/icon17.png";
import icon27 from "../../assets/icon/icon27.png";
import icon28 from "../../assets/icon/icon28.png";
import icon29 from "../../assets/icon/icon29.png";

import useGlobalStore from "@/store";
import services from "@/services";
import { composeImgUrl } from "@/utils";

export default function Index() {
  const [statusBarHeight, setStatusBarHeight] = useState(0);
  const [open, setOpen] = useState(false);
  const { userInfo } = useGlobalStore();
  const [authenticationTypesList, setAuthenticationTypesList] = useState<
    API.TypeOfLegalPerson[]
  >([]);
  const { isAuth, queryAuthenticationInfo } = useGlobalStore();
  const [reportStatistics, setReportStatistics] =
    useState<API.PersonalCenterStatisticsDto[]>();
  useDidShow(() => {
    queryAuthenticationInfo();
    services.report.getPersonalCenterStatistics().then((res) => {
      if (res.code === 200) {
        setReportStatistics(res.data);
      }
    });
  });
  const onClick = () => {
    Taro.navigateBack();
  };

  useLoad(() => {
    const systemInfo = Taro.getSystemInfoSync();
    setStatusBarHeight(systemInfo?.statusBarHeight ?? 0);
  });
  const onAuthentication = (data: API.TypeOfLegalPerson) => {
    Taro.navigateTo({
      url: `/pages/Authentication/index?name=${data.name}&id=${data.id}`,
    }).then(() => {
      setOpen(false);
    });
  };

  /** 打开法人认证弹窗 */
  const openAuthenticationSelect = () => {
    if (isAuth) {
      return;
    }
    services.login.queryAuthenticationTypes().then((res) => {
      if (res.code !== 200) {
        Taro.showToast({
          title: "无法获取法人类型",
          icon: "none",
        });
        return;
      }
      setAuthenticationTypesList(res.data);
      setOpen(true);
    });
  };

  const actionMenus = useMemo(() => {
    const findNum = (type: number) =>
      reportStatistics?.find((item) => Number(item.type) === type)
        ?.processingNum ?? 0;
    return [
      [
        {
          icon: icon20,
          extra: findNum(2) + "个",
          actionName: "建议记录",
          enable: true,
          onTap: () => {
            Taro.navigateTo({
              url: "/pages/Feedback/Record/index?type=建议",
            });
          },
        },
        {
          icon: icon18,
          actionName: "投诉记录",
          enable: true,
          extra: findNum(1) + "个",
          onTap: () => {
            Taro.navigateTo({
              url: "/pages/Feedback/Record/index?type=投诉",
            });
          },
        },

        {
          icon: icon26,
          actionName: "咨询记录",
          enable: true,
          extra: findNum(3) + "个",
          onTap: () => {
            Taro.navigateTo({
              url: "/pages/Feedback/Record/index?type=咨询",
            });
          },
        },
        {
          icon: icon17,
          actionName: "举报记录",
          enable: true,
          extra: findNum(4) + "个",
          onTap: () => {
            Taro.navigateTo({
              url: "/pages/Feedback/Record/index?type=举报",
            });
          },
        },
      ],
      [
        {
          icon: icon27,
          extra: "",
          actionName: "随手拍",
          enable: false,
        },
        {
          icon: icon28,
          actionName: "举手之劳",
          enable: false,
        },
      ],
      [
        {
          icon: icon29,
          actionName: "店招设置审批",
          enable: false,
        },
      ],
    ];
  }, [reportStatistics]);

  return (
    <View className="container">
      <View className="decoration" />
      <View style={{ height: statusBarHeight }} />
      <ConfigProvider
        theme={{
          "—navbar-background-color": "transparent",
        }}
      >
        <Navbar safeArea="top">
          <Navbar.NavLeft onClick={onClick}>返回</Navbar.NavLeft>
        </Navbar>
      </ConfigProvider>
      <Popup
        rounded
        onClose={() => setOpen(false)}
        open={open}
        style={{ height: "60%" }}
        placement="bottom"
      >
        <View className="popup-content">
          <View className="popup-content_title">认证</View>
          <ScrollView scrollY className="popup-content_scrollView">
            {authenticationTypesList.map((item) => {
              return (
                <View
                  className="popup-content_itemCard"
                  onClick={onAuthentication.bind(this, item)}
                  key={item.name}
                >
                  <Flex align="center">
                    <Image src={icon1} className="popup-content_itemIcon" />
                    <View>{item.name}</View>
                  </Flex>
                </View>
              );
            })}
          </ScrollView>
        </View>
      </Popup>
      <View className="userInfo">
        <Avatar
          size="large"
          src={composeImgUrl(userInfo?.avatar)}
          style={{ border: "5px solid #fff" }}
        ></Avatar>
        <View className="userTitle">{userInfo?.nickname}</View>
        <Flex
          align="center"
          justify="center"
          onClick={openAuthenticationSelect}
          className="authenticationBtn"
        >
          <Flex align="center">
            <Image src={icon} className="storeIcon"></Image>
            <View>{isAuth ? "已认证" : "去认证"}</View>
          </Flex>
        </Flex>
      </View>
      <View className="listWrap">
        <View className="scorePoint_view">
          <Image src={icon16} className="scorePoint_img"></Image>
          <View className="scorePoint_text">我的积分</View>
          <View className="scorePoint_num">100</View>
          <View className="scorePoint_unit">分</View>
        </View>
        {actionMenus.map((_) => {
          return (
            <View className="actionGroup">
              {_.map((child) => {
                return (
                  <View
                    className="actionGroup_cell"
                    onTap={() => {
                      if (!child.enable) {
                        Taro.showToast({
                          title: "功能暂未开放",
                          icon: "none",
                        });
                      }
                      child.onTap && child.onTap();
                    }}
                  >
                    <View className="actionGroup_cell-left">
                      <Image
                        src={child.icon}
                        className="actionGroup_cell-icon"
                      ></Image>
                      <View className="actionGroup_cell-title">
                        {child.actionName}
                      </View>
                    </View>
                    <View className="actionGroup_cell-right">
                      {child.extra && (
                        <View className="actionGroup_cell-extra">
                          {child.extra}
                        </View>
                      )}
                      <Image
                        src={icon21}
                        className="actionGroup_cell-rightIcon"
                      ></Image>
                    </View>
                  </View>
                );
              })}
            </View>
          );
        })}
      </View>
    </View>
  );
}
