import PageCustom from "@/components/page-custom/index";
import NavBarNormal from "@/components/NavBarNormal";
import IconVisibleForDirect from "@/images/svgs/privacy/IconVisibleForDirect.svg";
import IconVisibleForForward from "@/images/svgs/privacy/IconVisibleForForward.svg";
import IconVisibleForContact from "@/images/svgs/privacy/IconVisibleForContact.svg";
import { View, Image } from "@tarojs/components";
import ListWrapper from "@/components/list/ListWrapper";
import ListRow from "@/components/list/ListRow";
import WemetaSwitch from "@/components/WemetaSwitch";

import { useUserStore } from "@/store/userStore";

import { setMyPrivacy } from "@/service/user";
import { useDidShow } from "@tarojs/taro";
import {restrictedPage} from '@/utils'

export default function Index() {
  restrictedPage()
  const { fetchMyPrivacy, privacy } = useUserStore();
  const handleSwitchChange = async (checked: boolean, key: string) => {
    await setMyPrivacy({
      ...privacy,
      [key]: checked,
    });
    fetchMyPrivacy();
  };
  useDidShow(()=> {
    fetchMyPrivacy()
  })
  return (
    <PageCustom>
      <NavBarNormal backText="隐私设置"></NavBarNormal>
      <View className="w-full px-16 py-24 flex flex-col gap-16">
        <ListWrapper>
          <ListRow underline>
            <View className="flex flex-col gap-8">
              <View className="flex items-center">
                <View className="flex items-center flex-1 gap-8">
                  <Image
                    src={IconVisibleForDirect}
                    className="w-28 h-28"
                    mode="widthFix"
                  />
                  <View className="label-text">直发可见</View>
                </View>
                <View>
                  <WemetaSwitch
                    checked={privacy.directVisibleMyInfo}
                    onChange={(checked) =>
                      handleSwitchChange(checked, "directVisibleMyInfo")
                    }
                  ></WemetaSwitch>
                </View>
              </View>
              <View className="text-gray-4 text-12 leading-20">
                开启后，本人直接将智能体发送给好友，该好友可查看你的联系方式（手机、邮箱、微信二维码）
              </View>
            </View>
          </ListRow>
          <ListRow underline>
            <View className="flex flex-col gap-8">
              <View className="flex items-center">
                <View className="flex items-center flex-1 gap-8">
                  <Image
                    src={IconVisibleForForward}
                    className="w-28 h-28"
                    mode="widthFix"
                  />
                  <View className="label-text">转发可见</View>
                </View>
                <View>
                  <WemetaSwitch
                    checked={privacy.forwardVisibleMyInfo}
                    onChange={(checked) =>
                      handleSwitchChange(checked, "forwardVisibleMyInfo")
                    }
                  ></WemetaSwitch>
                </View>
              </View>
              <View className="text-gray-4 text-12 leading-20">
              开启后，好友将你的智能体转发给他人时，他人可查看你的联系方式（手机、邮箱、微信二维码）
              </View>
            </View>
          </ListRow>
          <ListRow >
            <View className="flex flex-col gap-8">
              <View className="flex items-center">
                <View className="flex items-center flex-1 gap-8">
                  <Image
                    src={IconVisibleForContact}
                    className="w-28 h-28"
                    mode="widthFix"
                  />
                  <View className="label-text">联系人可见</View>
                </View>
                <View>
                  <WemetaSwitch
                    checked={privacy.contactVisibleMyInfo}
                    onChange={(checked) =>
                      handleSwitchChange(checked, "contactVisibleMyInfo")
                    }
                  ></WemetaSwitch>
                </View>
              </View>
              <View className="text-gray-4 text-12 leading-20">
              开启后，在本人联系人列表中的人（本人访问过的智能体所属人）可查看到你的联系方式（手机、邮箱、微信二维码）
              </View>
            </View>
          </ListRow>
        </ListWrapper>
      </View>
    </PageCustom>
  );
}
