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, Button, CheckBox } from "@rneui/themed";
import { Image } from "expo-image";
import { Formik } from "formik";
import Picker from "../../components/Picker";
import Toast from "react-native-toast-message";
import { get } from "../../utils/storeInfo";
import baseRequest from "../../utils/baseRequest";
import { generateSignature } from "../../utils/crypto";

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

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

  //控制填写微信的输入框是否出现1不出现，0出现
  const [wechatInputShow, setWechatInputShow] = useState(1);

  //保存主播标签
  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 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: {} });
  //正在加载数据
  const [isLoading, setIsloading] = useState(true);
  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({
        mid: account?.mid,
        ...base,
      });
      try {
        //获取主播数据
        const streamerResponse = await fetch(
          `${apiUrl}/api/streamer/list_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              mid: account?.mid,
              ...base,
            }),
          }
        );
        const streamerData = await streamerResponse.json();
        if (streamerData.ret === -1) {
          Toast.show({
            type: "error",
            text1: streamerData.msg,
            topOffset: 60,
          });
          return;
        }
        //获取所有的标签
        const signature2 = await generateSignature({
          ...base,
        });
        const response = await fetch(
          `${apiUrl}/api/streamer_tag/list?signature=${signature2}`,
          {
            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, ...streamerData.data, tag: tagData.data });
        setWechatInputShow(streamerData.data.streamer.wechat_lock_type);
        setTags(streamerData.data.streamer.tag);
        setIsloading(false);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);

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

  //loading时展示加载中
  if (isLoading) {
    return (
      <ActivityIndicator style={tailwind("mt-32")} size="large" color="white" />
    );
  }

  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={{
            gender: data?.streamer?.gender?.toString(),
            wechat_add_way: data?.streamer?.wechat_lock_type?.toString(),
            wechat: data?.streamer?.wechat_contact?.toString(),
            price: (data?.streamer?.wechat_coin_price / 10)?.toString(),
            info: data?.streamer?.bio?.toString(),
            age: data?.streamer?.age?.toString(),
            height: data?.streamer?.height?.toString(),
            weight: data?.streamer?.weight?.toString(),
            constellation: data?.streamer?.constellation?.toString(),
            location: data?.streamer?.city?.toString(),
            auto_response_message:
              data?.streamer?.auto_response_message?.toString(),
          }}
          enableReinitialize
          onSubmit={async (values) => {
            if (
              !values.gender ||
              !values.wechat_add_way ||
              !values.price ||
              !values.info ||
              !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 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 apiUrl = process.env.EXPO_PUBLIC_API_URL;

            //上传表单
            const base = await baseRequest();
            const signature = await generateSignature({
              mid: account?.mid,
              gender: parseInt(values.gender, 10),
              wechat_contact: values.wechat,
              bio: values.info,
              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),
              wechat_coin_price: parseInt(values.price, 10) * 10,
              auto_response_message: values.auto_response_message,
              ...base,
            });
            try {
              const response = await fetch(
                `${apiUrl}/api/streamer/update?signature=${signature}`,
                {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify({
                    mid: account?.mid,
                    gender: parseInt(values.gender, 10),
                    wechat_contact: values.wechat,
                    bio: values.info,
                    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),
                    wechat_coin_price: parseInt(values.price, 10) * 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;
              }
              //提交成功后弹窗提示并返回上级
              Toast.show({
                type: "success",
                text1: "更改成功",
                topOffset: 60,
              });
              navigation.goBack();
            } catch (error) {
              console.error(error);
            } finally {
              setIsSubmitting(false);
            }
          }}
        >
          {({ handleChange, handleSubmit, values, setFieldValue }) => (
            <>
              <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("w-1/2")}>
                    <Picker
                      items={[
                        {
                          label: "女",
                          value: "1",
                        },
                        { label: "男", value: "0" },
                      ]}
                      value={values.gender}
                      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>
                  <View style={tailwind("w-1/2")}>
                    <Picker
                      items={ages}
                      value={values.age}
                      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}
                      value={values.height}
                      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}
                      value={values.weight}
                      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}
                      value={values.constellation}
                      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}
                      value={values.location}
                      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>
  );
}