import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView,
  Platform,
  ActivityIndicator,
} from "react-native";
import React, { useState, useMemo, useCallback, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Divider, Icon, Button, CheckBox } from "@rneui/themed";
import { Image } from "expo-image";
import { Formik } from "formik";
import Picker from "../../../components/Picker";
import MediaPickerModal from "../../../components/MediaPickerModal";
import MediaPicker from "../../../components/MediaPicker";
import Toast from "react-native-toast-message";
import { StackActions } from "@react-navigation/native";
import { get } from "../../../utils/storeInfo";
import { multiUpload } from "../../../utils/upload";
import baseRequest from "../../../utils/baseRequest";
import { generateSignature } from "../../../utils/crypto";

const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";

export default function StreamerVerificationForm({ navigation, route }) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();

  //保存封面图以及控制上传封面图Modal出现
  const [displayImagePickerModalVisible, setDisplayImagePickerModalVisible] =
    useState(false);
  const [displayImage, setDisplayImage] = useState([]);

  //保存展示视频以及控制上传展示视频Modal出现
  const [displayVideoPickerModalVisible, setDisplayVideoPickerModalVisible] =
    useState(false);
  const [displayVideo, setDisplayVideo] = useState([]);
  const [wechatInputShow, setWechatInputShow] = useState(1);

  //保存相册
  const [photos, setPhotos] = useState([]);

  //保存主播标签
  const [tags, setTags] = useState([]);
  //点击标签
  const handlePressTag = (tag, isChecked) => {
    if (isChecked) {
      setTags(tags.filter((item) => item !== tag));
    } else {
      if (tags.length >= 3) {
        Toast.show({
          type: "error",
          text1: "最多只能选择3个标签",
          topOffset: 60,
        });
        return;
      }
      setTags([...tags, tag]);
    }
  };
  //标签组件
  const TagItem = ({ tag, label }) => {
    const isChecked = tags.includes(tag);
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => handlePressTag(tag, isChecked)}
        style={
          isChecked
            ? tailwind("border border-[#FF669E] rounded-full px-2 py-1 m-1")
            : tailwind("border border-gray-400 rounded-full px-2 py-1 m-1")
        }
      >
        <Text
          style={
            isChecked
              ? tailwind("text-[#FF669E] text-sm font-medium")
              : tailwind("text-[#FFFFFF80] text-sm font-medium")
          }
        >
          {label}
        </Text>
      </TouchableOpacity>
    );
  };

  //保存账号截图
  const [accountImages, setAccountImages] = useState([]);

  //生成年龄、身高、体重、胸围、腰围、臀围、星座、省份数组
  const generateItems = useCallback((min, max) => {
    const items = [];
    for (let i = min; i <= max; i++) {
      items.push({ label: i.toString(), value: i.toString() });
    }
    return items;
  }, []);
  const ages = useMemo(() => generateItems(18, 60), []);
  const heights = useMemo(() => generateItems(140, 200), []);
  const weights = useMemo(() => generateItems(35, 100), []);
  const constellations = [
    { label: "白羊座", value: "白羊座" },
    { label: "金牛座", value: "金牛座" },
    { label: "双子座", value: "双子座" },
    { label: "巨蟹座", value: "巨蟹座" },
    { label: "狮子座", value: "狮子座" },
    { label: "处女座", value: "处女座" },
    { label: "天秤座", value: "天秤座" },
    { label: "天蝎座", value: "天蝎座" },
    { label: "射手座", value: "射手座" },
    { label: "摩羯座", value: "摩羯座" },
    { label: "水瓶座", value: "水瓶座" },
    { label: "双鱼座", value: "双鱼座" },
  ];
  const provinces = [
    { label: "北京市", value: "北京市" },
    { label: "天津市", value: "天津市" },
    { label: "河北省", value: "河北省" },
    { label: "山西省", value: "山西省" },
    { label: "内蒙古自治区", value: "内蒙古自治区" },
    { label: "辽宁省", value: "辽宁省" },
    { label: "吉林省", value: "吉林省" },
    { label: "黑龙江省", value: "黑龙江省" },
    { label: "上海市", value: "上海市" },
    { label: "江苏省", value: "江苏省" },
    { label: "浙江省", value: "浙江省" },
    { label: "安徽省", value: "安徽省" },
    { label: "福建省", value: "福建省" },
    { label: "江西省", value: "江西省" },
    { label: "山东省", value: "山东省" },
    { label: "河南省", value: "河南省" },
    { label: "湖北省", value: "湖北省" },
    { label: "湖南省", value: "湖南省" },
    { label: "广东省", value: "广东省" },
    { label: "广西壮族自治区", value: "广西壮族自治区" },
    { label: "海南省", value: "海南省" },
    { label: "重庆市", value: "重庆市" },
    { label: "四川省", value: "四川省" },
    { label: "贵州省", value: "贵州省" },
    { label: "云南省", value: "云南省" },
    { label: "西藏自治区", value: "西藏自治区" },
    { label: "陕西省", value: "陕西省" },
    { label: "甘肃省", value: "甘肃省" },
    { label: "青海省", value: "青海省" },
    { label: "宁夏回族自治区", value: "宁夏回族自治区" },
    { label: "新疆维吾尔自治区", value: "新疆维吾尔自治区" },
    { label: "台湾省", value: "台湾省" },
    { label: "香港特别行政区", value: "香港特别行政区" },
    { label: "澳门特别行政区", value: "澳门特别行政区" },
  ];

  //基本资料
  const [data, setData] = useState({ tag: {} });
  useEffect(() => {
    const getData = async () => {
      const account = await get("account");
      const apiUrl = process.env.EXPO_PUBLIC_API_URL;
      const base = await baseRequest();
      const signature = await generateSignature({
        ...base,
      });
      try {
        const response = await fetch(
          `${apiUrl}/api/streamer_tag/list?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
            }),
          }
        );
        const tagData = await response.json();
        if (tagData.ret === -1) {
          Toast.show({
            type: "error",
            text1: tagData.msg,
            topOffset: 60,
          });
          return;
        }
        setData({ ...account, tag: tagData.data });
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);

  //正在提交状态
  const [isSubmitting, setIsSubmitting] = useState(false);

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      keyboardVerticalOffset={insets.bottom + 60}
      style={{
        paddingLeft: insets.left,
        paddingRight: insets.right,
        ...tailwind("flex-1"),
      }}
    >
      <ScrollView style={tailwind("px-4 py-4")}>
        <Formik
          initialValues={{
            name: "",
            fans: "",
            platforms: "",
            gender: "",
            contact: "",
            wechat_add_way: "1",
            wechat: "",
            price: "",
            info: "",
            age: "",
            height: "",
            weight: "",
            constellation: "",
            location: "",
            inviters: "",
            auto_response_message: "",
          }}
          onSubmit={async (values) => {
            if (
              !values.name ||
              !values.fans ||
              !values.gender ||
              !values.platforms ||
              !values.contact ||
              accountImages.length === 0 ||
              !values.wechat_add_way ||
              !values.price ||
              !values.info ||
              displayImage.length === 0 ||
              displayVideo.length === 0 ||
              photos.length === 0 ||
              !values.age ||
              !values.height ||
              !values.weight ||
              !values.constellation ||
              !values.location ||
              !values.auto_response_message ||
              tags.length === 0
            ) {
              Toast.show({
                type: "error",
                text1: "请完善信息后提交",
                topOffset: 60,
              });
              return;
            }
            const fans = parseInt(values.fans, 10);
            if (isNaN(fans) || fans < 1) {
              Toast.show({
                type: "error",
                text1: "请输入有效的全网粉丝量（大于等于1的整数）",
                topOffset: 60,
              });
              return;
            }
            const price = parseInt(values.price, 10);
            if (isNaN(price) || price < 1) {
              Toast.show({
                type: "error",
                text1: "请输入有效的微信价格（大于等于1的整数）",
                topOffset: 60,
              });
              return;
            }
            if (values.wechat_add_way === "0" && !values.wechat) {
              Toast.show({
                type: "error",
                text1: "请填写微信号",
                topOffset: 60,
              });
              return;
            }
            setIsSubmitting(true);
            const account = await get("account");
            const cover = await multiUpload(displayImage);
            const shorts = await multiUpload(displayVideo);
            const album = await multiUpload(photos);
            const account_shot = await multiUpload(accountImages);
            if (
              !cover.image_ids.length ||
              !shorts.video_ids.length ||
              !album.image_ids.length ||
              !account_shot.image_ids.length
            ) {
              Toast.show({
                type: "error",
                text1: "上传失败，请联系客服进行上传",
                topOffset: 60,
              });
              return;
            }

            //获取环境变量
            const apiUrl = process.env.EXPO_PUBLIC_API_URL;

            //上传表单
            const base = await baseRequest();
            const signature = await generateSignature({
              mid: account?.mid,
              avatar: { image_ids: [account?.avatar.images[0].id] },
              name: values.name,
              gender: parseInt(values.gender, 10),
              contact_way: values.contact,
              wechat_contact: values.wechat,
              bio: values.info,
              cover: cover,
              shorts: shorts,
              album: album,
              age: parseInt(values.age, 10),
              height: parseInt(values.height, 10),
              weight: parseInt(values.weight, 10),
              constellation: values.constellation,
              city: values.location,
              tag: tags,
              wechat_lock_type: parseInt(values.wechat_add_way, 10),
              account_shot: account_shot,
              fans: parseInt(values.fans, 10),
              main_platform: values.platforms,
              wechat_coin_price: parseInt(values.price, 10) * 10,
              inviters: values.inviters ? [parseInt(values.inviters, 10)] : [],
              auto_response_message: values.auto_response_message,
              ...base,
            });
            try {
              const response = await fetch(
                `${apiUrl}/api/streamer_auth_approval/create?signature=${signature}`,
                {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify({
                    mid: account?.mid,
                    avatar: { image_ids: [account?.avatar.images[0].id] },
                    name: values.name,
                    gender: parseInt(values.gender, 10),
                    contact_way: values.contact,
                    wechat_contact: values.wechat,
                    bio: values.info,
                    cover: cover,
                    shorts: shorts,
                    album: album,
                    age: parseInt(values.age, 10),
                    height: parseInt(values.height, 10),
                    weight: parseInt(values.weight, 10),
                    constellation: values.constellation,
                    city: values.location,
                    tag: tags,
                    wechat_lock_type: parseInt(values.wechat_add_way, 10),
                    account_shot: account_shot,
                    fans: parseInt(values.fans, 10),
                    main_platform: values.platforms,
                    wechat_coin_price: parseInt(values.price, 10) * 10,
                    inviters: values.inviters
                      ? [parseInt(values.inviters, 10)]
                      : [],
                    auto_response_message: values.auto_response_message,
                    ...base,
                  }),
                }
              );
              const streamerData = await response.json();
              if (streamerData.ret === -1) {
                Toast.show({
                  type: "error",
                  text1: streamerData.msg,
                  topOffset: 60,
                });
                return;
              }
              //提交成功后跳转成功页
              navigation.dispatch(
                StackActions.replace("AfterSubmitStreamerVerification")
              );
            } catch (error) {
              console.error(error);
            } finally {
              setIsSubmitting(false);
            }
          }}
        >
          {({ handleChange, handleSubmit, values, setFieldValue }) => (
            <>
              <Text style={tailwind("text-base text-white font-medium")}>
                <Text style={tailwind("text-[#F53030]")}>*</Text>
                审核资料（仅用于审核，不对外展示）
              </Text>
              <View style={tailwind("my-2 bg-[#FFFFFF1A] p-2 rounded-2xl")}>
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    昵称
                  </Text>
                  <View
                    style={tailwind("flex-row flex-1 justify-end items-center")}
                  >
                    <TextInput
                      placeholder="请输入可搜索到您的昵称"
                      placeholderTextColor="#FFFFFF80"
                      style={tailwind("text-white flex-1")}
                      underlineColorAndroid="transparent"
                      textAlign="right"
                      onChangeText={handleChange("name")}
                      value={values.name}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    主营平台
                  </Text>
                  <View
                    style={tailwind("flex-row flex-1 justify-end items-center")}
                  >
                    <TextInput
                      placeholder="若有多个，按粉丝从多到少排序"
                      placeholderTextColor="#FFFFFF80"
                      style={tailwind("text-white flex-1")}
                      underlineColorAndroid="transparent"
                      textAlign="right"
                      onChangeText={handleChange("platforms")}
                      value={values.platforms}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    联系方式
                  </Text>
                  <View
                    style={tailwind("flex-row flex-1 justify-end items-center")}
                  >
                    <TextInput
                      placeholder="注明方式，如“电话:xxxxx”"
                      placeholderTextColor="#FFFFFF80"
                      style={tailwind("text-white flex-1")}
                      underlineColorAndroid="transparent"
                      textAlign="right"
                      onChangeText={handleChange("contact")}
                      value={values.contact}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    邀请人ID（若无，请忽略）
                  </Text>
                  <View
                    style={tailwind("flex-row flex-1 justify-end items-center")}
                  >
                    <TextInput
                      placeholder="请输入邀请人ID"
                      placeholderTextColor="#FFFFFF80"
                      keyboardType="numeric"
                      style={tailwind("text-white flex-1")}
                      underlineColorAndroid="transparent"
                      textAlign="right"
                      onChangeText={handleChange("inviters")}
                      value={values.inviters}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View>
                  <View
                    style={tailwind("flex-row justify-between items-center")}
                  >
                    <Text style={tailwind("text-base text-white font-medium")}>
                      <Text style={tailwind("text-[#F53030]")}>*</Text>
                      账号截图
                    </Text>
                    <Text
                      style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
                    >
                      各平台账号截图（最多9张）
                    </Text>
                  </View>
                  <MediaPicker
                    maxCount={9}
                    type="image"
                    setAssets={setAccountImages}
                  />
                </View>
              </View>
              <Text style={tailwind("text-base text-white font-medium mt-2")}>
                <Text style={tailwind("text-[#F53030]")}>*</Text>
                展示资料（将在个人主页、大厅展示）
              </Text>
              <View style={tailwind("my-2 bg-[#FFFFFF1A] p-2 rounded-2xl")}>
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    头像(需在“我的”修改)
                  </Text>
                  <Image
                    style={tailwind("w-12 h-12 rounded-full")}
                    source={data?.avatar?.images[0]?.urls[0]}
                    placeholder={blurhash}
                    contentFit="cover"
                    transition={1000}
                    cachePolicy="disk"
                  />
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    昵称(需在“我的”修改)
                  </Text>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    {data?.name}
                  </Text>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    全网粉丝量（万）
                  </Text>
                  <View
                    style={tailwind("flex-row flex-1 justify-end items-center")}
                  >
                    <TextInput
                      placeholder="请输入真实有效数据"
                      placeholderTextColor="#FFFFFF80"
                      keyboardType="numeric"
                      style={tailwind("text-white flex-1")}
                      underlineColorAndroid="transparent"
                      textAlign="right"
                      onChangeText={handleChange("fans")}
                      value={values.fans}
                    />
                    <Text
                      style={tailwind("text-base text-white font-medium ml-1")}
                    >
                      万
                    </Text>
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    性别
                  </Text>
                  <View style={tailwind("w-1/2")}>
                    <Picker
                      items={[
                        {
                          label: "女",
                          value: "1",
                        },
                        { label: "男", value: "0" },
                      ]}
                      onChange={handleChange("gender")}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-col justify-between")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    添加标签
                  </Text>
                  <View style={tailwind("flex-row flex-wrap")}>
                    {Object.entries(data?.tag).map(([tag, label]) => {
                      return <TagItem key={tag} tag={label} label={label} />;
                    })}
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-col justify-between")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    添加微信方式
                  </Text>
                  <View
                    style={tailwind("flex-row items-center justify-around")}
                  >
                    <TouchableOpacity
                      activeOpacity={1}
                      onPress={() => {
                        setWechatInputShow(1);
                        setFieldValue("wechat_add_way", "1");
                      }}
                      style={tailwind("flex-row items-center")}
                    >
                      <CheckBox
                        checked={values.wechat_add_way === "1"}
                        onPress={() => {
                          setWechatInputShow(1);
                          setFieldValue("wechat_add_way", "1");
                        }}
                        iconType="material-community"
                        checkedIcon="checkbox-marked"
                        uncheckedIcon="checkbox-blank-outline"
                        checkedColor="#FF669E"
                        containerStyle={tailwind("p-0 m-0 bg-transparent")}
                        size={18}
                      />
                      <Text
                        style={tailwind("text-base text-white font-medium")}
                      >
                        主动添加对方
                      </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      activeOpacity={1}
                      onPress={() => {
                        setWechatInputShow(0);
                        setFieldValue("wechat_add_way", "0");
                      }}
                      style={tailwind("flex-row items-center")}
                    >
                      <CheckBox
                        checked={values.wechat_add_way === "0"}
                        onPress={() => {
                          setWechatInputShow(0);
                          setFieldValue("wechat_add_way", "0");
                        }}
                        iconType="material-community"
                        checkedIcon="checkbox-marked"
                        uncheckedIcon="checkbox-blank-outline"
                        checkedColor="#FF669E"
                        containerStyle={tailwind("p-0 m-0 bg-transparent")}
                        size={18}
                      />
                      <Text
                        style={tailwind("text-base text-white font-medium")}
                      >
                        向对方展示微信
                      </Text>
                    </TouchableOpacity>
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                {wechatInputShow === 0 && (
                  <>
                    <View
                      style={tailwind("flex-row justify-between items-center")}
                    >
                      <Text
                        style={tailwind("text-base text-white font-medium")}
                      >
                        <Text style={tailwind("text-[#F53030]")}>*</Text>
                        微信号
                      </Text>
                      <View
                        style={tailwind(
                          "flex-row flex-1 justify-end items-center"
                        )}
                      >
                        <TextInput
                          placeholder="对方付费购买后展示"
                          placeholderTextColor="#FFFFFF80"
                          style={tailwind("text-white flex-1")}
                          underlineColorAndroid="transparent"
                          textAlign="right"
                          maxLength={20}
                          onChangeText={handleChange("wechat")}
                          value={values.wechat}
                        />
                      </View>
                    </View>
                    <Divider style={tailwind("my-2")} />
                  </>
                )}
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    加微信价格（元）
                  </Text>
                  <View
                    style={tailwind("flex-row flex-1 justify-end items-center")}
                  >
                    <TextInput
                      placeholder="请输入心仪价格"
                      placeholderTextColor="#FFFFFF80"
                      keyboardType="numeric"
                      style={tailwind("text-white flex-1")}
                      underlineColorAndroid="transparent"
                      textAlign="right"
                      onChangeText={handleChange("price")}
                      value={values.price}
                    />
                    <Text
                      style={tailwind("text-base text-white font-medium ml-1")}
                    >
                      元
                    </Text>
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-col")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    个性签名
                  </Text>
                  <View style={tailwind("flex-row items-center")}>
                    <TextInput
                      multiline
                      scrollEnabled={false}
                      placeholder="点此输入，文案将在“主页”展示"
                      placeholderTextColor="#FFFFFF80"
                      style={tailwind("text-white")}
                      underlineColorAndroid="transparent"
                      textAlign="top"
                      onChangeText={handleChange("info")}
                      value={values.info}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    封面图
                  </Text>
                  <TouchableOpacity
                    onPress={() => setDisplayImagePickerModalVisible(true)}
                    style={tailwind("flex-row items-center")}
                  >
                    {displayImage.length !== 0 ? (
                      <Image
                        style={tailwind("w-12 h-12 rounded-lg")}
                        source={displayImage[0].uri}
                        placeholder={blurhash}
                        contentFit="cover"
                        transition={1000}
                        cachePolicy="disk"
                      />
                    ) : (
                      <Text
                        style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
                      >
                        将在“发现”和“主页”展示
                      </Text>
                    )}
                    <Icon
                      name="chevron-forward-outline"
                      type="ionicon"
                      color="white"
                    />
                  </TouchableOpacity>
                  <MediaPickerModal
                    visible={displayImagePickerModalVisible}
                    setVisible={setDisplayImagePickerModalVisible}
                    type="image"
                    maxCount={1}
                    setAssets={setDisplayImage}
                  />
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    展示视频
                  </Text>
                  <TouchableOpacity
                    onPress={() => setDisplayVideoPickerModalVisible(true)}
                    style={tailwind("flex-row items-center")}
                  >
                    {displayVideo.length !== 0 ? (
                      <Image
                        style={tailwind("w-12 h-16 rounded-lg")}
                        source={displayVideo[0].old_uri}
                        placeholder={blurhash}
                        contentFit="cover"
                        transition={1000}
                        cachePolicy="disk"
                      />
                    ) : (
                      <Text
                        style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
                      >
                        将在“发现”和“主页”展示
                      </Text>
                    )}
                    <Icon
                      name="chevron-forward-outline"
                      type="ionicon"
                      color="white"
                    />
                  </TouchableOpacity>
                  <MediaPickerModal
                    visible={displayVideoPickerModalVisible}
                    setVisible={setDisplayVideoPickerModalVisible}
                    type="video"
                    maxCount={1}
                    setAssets={setDisplayVideo}
                  />
                </View>
                <Divider style={tailwind("my-2")} />
                <View>
                  <View
                    style={tailwind("flex-row justify-between items-center")}
                  >
                    <Text style={tailwind("text-base text-white font-medium")}>
                      <Text style={tailwind("text-[#F53030]")}>*</Text>
                      相册
                    </Text>
                    <Text
                      style={tailwind("text-xs text-[#FFFFFF80] font-medium")}
                    >
                      将在“主页”展示（最多9张）
                    </Text>
                  </View>
                  <MediaPicker
                    maxCount={9}
                    type="image"
                    setAssets={setPhotos}
                  />
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    年龄（岁）
                  </Text>
                  <View style={tailwind("w-1/2")}>
                    <Picker items={ages} onChange={handleChange("age")} />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    身高（cm）
                  </Text>
                  <View style={tailwind("w-1/2")}>
                    <Picker items={heights} onChange={handleChange("height")} />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    体重（kg）
                  </Text>
                  <View style={tailwind("w-1/2")}>
                    <Picker items={weights} onChange={handleChange("weight")} />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>星座
                  </Text>
                  <View style={tailwind("w-1/2")}>
                    <Picker
                      items={constellations}
                      onChange={handleChange("constellation")}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-row justify-between items-center")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>所在地
                  </Text>
                  <View style={tailwind("w-1/2")}>
                    <Picker
                      items={provinces}
                      onChange={handleChange("location")}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
                <View style={tailwind("flex-col")}>
                  <Text style={tailwind("text-base text-white font-medium")}>
                    <Text style={tailwind("text-[#F53030]")}>*</Text>
                    解锁微信福利介绍
                  </Text>
                  <View style={tailwind("flex-row items-center")}>
                    <TextInput
                      multiline
                      scrollEnabled={false}
                      placeholder="文案将在分享页展示，并自动发送给点开私信的用户"
                      placeholderTextColor="#FFFFFF80"
                      style={tailwind("text-white")}
                      underlineColorAndroid="transparent"
                      textAlign="top"
                      onChangeText={handleChange("auto_response_message")}
                      value={values.auto_response_message}
                    />
                  </View>
                </View>
                <Divider style={tailwind("my-2")} />
              </View>
              <Button
                color="#FF669E"
                radius="999"
                size="md"
                disabled={isSubmitting}
                disabledStyle={tailwind("bg-[#FFFFFF80]")}
                disabledTitleStyle={tailwind("text-white")}
                onPress={(e) => {
                  handleSubmit(e);
                }}
                titleStyle={tailwind("text-base")}
                containerStyle={{
                  marginBottom: insets.bottom + 60,
                  ...tailwind("mt-4"),
                }}
              >
                {isSubmitting && (
                  <ActivityIndicator size="small" color="white" />
                )}
                {isSubmitting ? "正在提交..." : "提交"}
              </Button>
            </>
          )}
        </Formik>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}