import React, { useState } from "react";
import {
  Form,
  Input,
  Button,
  Space,
  Table,
  Checkbox,
  InputNumber,
  Image,
} from "antd";
import Modal from "../../components/Modal";
import VideoUploader from "../../components/VideoUploader";
import ImageUploader from "../../components/ImageUploader";
import baseRequest from "../../utils/baseRequest";

//tab内容
const StreamerInformationContent = () => {
  const { TextArea } = Input;
  //展示的表头
  const [showColumns, setShowColumns] = useState([
    "baseInfo",
    "displayInfo",
    "displayPoster",
    "displayVideo",
    "displayGallery",
  ]);
  //动态的表头
  const dynamicColumns = showColumns.map((item) => {
    switch (item) {
      case "baseInfo":
        return {
          title: "基础信息",
          dataIndex: "baseInfo",
          key: "baseInfo",
          render: (data) => (
            <div>
              <Image src={data.avatar} width={50} />
              <p>
                ID：<span className="text-red-400">{data.id}</span>
              </p>
              <p>
                昵称：<span className="text-red-400">{data.name}</span>
              </p>
              <p>
                入驻时间：<span className="text-red-400">{data.joinTime}</span>
              </p>
            </div>
          ),
        };
      case "displayInfo":
        return {
          title: "个人展示信息",
          dataIndex: "displayInfo",
          key: "displayInfo",
          render: (data) => (
            <div>
              <p>
                性别：
                <span className="text-red-400">
                  {data.gender === 1 ? "女" : "男"}
                </span>
              </p>
              <p>
                全网粉丝：<span className="text-red-400">{data.fans}万</span>
              </p>
              <p>
                微信添加方式：
                <span className="text-red-400">
                  {data.wechat_lock_type === 1 ? "主动添加" : "直接展示"}
                </span>
              </p>
              <p>
                微信：
                <span className="text-red-400">
                  {data.wechat ? data.wechat : "空"}
                </span>
              </p>
              <p>
                微信价格：
                <span className="text-red-400">¥{data.wechat_price / 10}</span>
              </p>
              <p>
                个性签名：<span className="text-red-400">{data.signature}</span>
              </p>
              <p>
                私信自动回复：
                <span className="text-red-400">
                  {data.auto_response_message}
                </span>
              </p>
              <p>
                年龄：<span className="text-red-400">{data.age}</span>
              </p>
              <p>
                身高：<span className="text-red-400">{data.height}</span>
              </p>
              <p>
                体重：<span className="text-red-400">{data.weight}</span>
              </p>
              <p>
                星座：<span className="text-red-400">{data.constellation}</span>
              </p>
              <p>
                居住地：<span className="text-red-400">{data.location}</span>
              </p>
            </div>
          ),
        };
      case "displayPoster":
        return {
          title: "封面图片",
          dataIndex: "displayPoster",
          key: "displayPoster",
          render: (data) => <Image src={data[0].urls[0]} width={100} />,
        };
      case "displayVideo":
        return {
          title: "封面视频",
          dataIndex: "displayVideo",
          key: "displayVideo",
          render: (data) => (
            <video src={data[0].urls[0]} width={150} controls />
          ),
        };
      case "displayGallery":
        return {
          title: "相册",
          dataIndex: "displayGallery",
          key: "displayGallery",
          render: (data) => (
            <div>
              {data.map((item) => (
                <Image
                  key={item.urls[0]}
                  src={item.urls[0]}
                  width={100}
                  style={{ marginBottom: 10 }}
                />
              ))}
            </div>
          ),
        };
      default:
        return {};
    }
  });
  dynamicColumns.push({
    title: "操作",
    dataIndex: "opeartion",
    key: "opeartion",
    render: (_, record) => (
      <div>
        <Button type="primary" onClick={() => handleModal(record)}>
          修改
        </Button>
      </div>
    ),
  });

  //modal中select选项
  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: "澳门特别行政区" },
  ];
  //modal中平台checkbox名称
  const platformList = ["抖音", "微博", "哔哩哔哩", "快手", "秘live"];
  //表头可见性表单的checkbox选项
  const showColumnsOptions = [
    {
      label: "基础信息",
      value: "baseInfo",
    },
    {
      label: "个人展示信息",
      value: "displayInfo",
    },
    {
      label: "封面图片",
      value: "displayPoster",
    },
    {
      label: "封面视频",
      value: "displayVideo",
    },
    {
      label: "相册",
      value: "displayGallery",
    },
  ];
  //展示的数据
  const [showData, setShowData] = useState([]);
  //搜索名人
  const search = async (value) => {
    try {
      const base = baseRequest();
      const detailResponse = await fetch(`/op/streamer/list_ext_by_user_id`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          user_id: parseInt(value.id, 10),
          ...base,
        }),
      });
      const detailData = await detailResponse.json();
      if (detailData.ret === -1) {
        alert(detailData.msg);
        return;
      }
      setShowData([
        {
          key: detailData.data.streamer_ext.mid,
          baseInfo: {
            id: detailData.data.streamer_ext.user_id,
            name: detailData.data.streamer_ext.name,
            avatar: detailData.data.streamer_ext.avatar.images[0].urls[0],
            joinTime: new Date(
              detailData.data.streamer_ext.ct * 1000
            ).toLocaleString(),
          },
          displayInfo: {
            gender: detailData.data.streamer_ext.gender,
            fans: detailData.data.streamer_ext.fans,
            wechat_lock_type: detailData.data.streamer_ext.wechat_lock_type,
            wechat: detailData.data.streamer_ext.wechat_contact,
            wechat_price: detailData.data.streamer_ext.wechat_coin_price,
            signature: detailData.data.streamer_ext.bio,
            age: detailData.data.streamer_ext.age,
            height: detailData.data.streamer_ext.height,
            weight: detailData.data.streamer_ext.weight,
            constellation: detailData.data.streamer_ext.constellation,
            location: detailData.data.streamer_ext.city,
            auto_response_message:
              detailData.data.streamer_ext.auto_response_message,
          },
          displayPoster: detailData.data.streamer_ext.cover.images,
          displayVideo: detailData.data.streamer_ext.shorts.videos,
          displayGallery: detailData.data.streamer_ext.album.images,
        },
      ]);
    } catch (error) {
      console.error(error);
    }
  };
  //表单提交失败
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  //modal是否展示
  const [isModalOpen, setIsModalOpen] = useState(false);
  //点击modal取消按钮
  const handleCancel = () => {
    setShowData([]);
    setDefaultValues({});
    setDefaultMedia({});
    setDisplayVideoId([]);
    setDisplayPosterId([]);
    setDisplayGalleryId([]);
    setIsModalOpen(false);
  };
  //modal打开时的默认值
  const [defaultValues, setDefaultValues] = useState({});
  const [defaultMedia, setDefaultMedia] = useState({});
  //点击修改按钮
  const handleModal = (record) => {
    setDefaultValues(record);
    setDefaultMedia({
      displayPoster: record.displayPoster,
      displayVideo: record.displayVideo,
      displayGallery: record.displayGallery,
    });
    setIsModalOpen(true);
  };
  //表单提交成功
  const onModalFormFinish = async (value) => {
    //上传表单操作...
    const oldPosterId = defaultMedia.displayPoster.map((item) => item.id);
    const oldVideoId = defaultMedia.displayVideo.map((item) => item.id);
    const oldGalleryId = defaultMedia.displayGallery.map((item) => item.id);
    const newPosterId = [...oldPosterId, ...displayPosterId];
    const newVideoId = [...oldVideoId, ...displayVideoId];
    const newGalleryId = [...oldGalleryId, ...displayGalleryId];
    if (
      newPosterId.length === 0 ||
      newVideoId.length === 0 ||
      newGalleryId.length < 2
    ) {
      alert("请确保封面、视频不为空，且相册大于2");
      return;
    }
    if (
      newPosterId.length > 1 ||
      newVideoId.length > 1 ||
      newGalleryId.length > 9
    ) {
      alert("请确保封面、视频、相册数量未超过上限");
      return;
    }
    if (
      !defaultValues.key ||
      !value.signature ||
      !value.age ||
      !value.height ||
      !value.weight ||
      !value.constellation ||
      !value.location ||
      !value.fans ||
      !value.wechat_price ||
      !value.auto_response_message
    ) {
      alert("请完善信息后提交");
      return;
    }
    if (value.wechat_lock_type === 0 && !value.wechat) {
      alert("请填写微信后提交");
      return;
    }
    try {
      const base = baseRequest();
      const detailResponse = await fetch(`/op/streamer/update`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          mid: defaultValues.key,
          gender: parseInt(value.gender, 10),
          wechat_contact: value.wechat,
          bio: value.signature,
          cover: { image_ids: newPosterId },
          shorts: { video_ids: newVideoId },
          album: { image_ids: newGalleryId },
          age: parseInt(value.age, 10),
          height: parseInt(value.height, 10),
          weight: parseInt(value.weight, 10),
          constellation: value.constellation,
          city: value.location,
          wechat_lock_type: parseInt(value.wechat_lock_type, 10),
          fans: parseInt(value.fans, 10),
          wechat_coin_price: parseInt(value.wechat_price, 10) * 10,
          auto_response_message: value.auto_response_message,
          ...base,
        }),
      });
      const detailData = await detailResponse.json();
      if (detailData.ret === -1) {
        alert(detailData.msg);
        return;
      }
    } catch (error) {
      console.error(error);
    }
    //关闭模态
    setShowData([]);
    setDefaultValues({});
    setDefaultMedia({});
    setDisplayVideoId([]);
    setDisplayPosterId([]);
    setDisplayGalleryId([]);
    setIsModalOpen(false);
  };
  //表单提交失败
  const onModalFormFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  //保存上传的封面id
  const [displayVideoId, setDisplayVideoId] = useState([]);
  const [displayPosterId, setDisplayPosterId] = useState([]);
  const [displayGalleryId, setDisplayGalleryId] = useState([]);

  //删除默认的媒体
  const handleDeleteMedia = (type, id) => {
    if (type === "displayPoster") {
      setDefaultMedia({
        ...defaultMedia,
        displayPoster: [],
      });
      return;
    }
    if (type === "displayVideo") {
      setDefaultMedia({
        ...defaultMedia,
        displayVideo: [],
      });
      return;
    }
    if (type === "displayGallery") {
      setDefaultMedia({
        ...defaultMedia,
        displayGallery: defaultMedia.displayGallery.filter(
          (item) => item.id !== id
        ),
      });
      return;
    }
  };

  return (
    <div style={{ marginLeft: 20, marginRight: 20 }}>
      <div style={{ marginTop: 20, marginBottom: 10 }}>
        <p style={{ display: "inline" }}>数据可见性：</p>
        <Checkbox.Group
          options={showColumnsOptions}
          defaultValue={showColumns}
          onChange={(value) => setShowColumns(value)}
        />
      </div>
      <Form name="search" onFinish={search} onFinishFailed={onFinishFailed}>
        <Space style={{ marginBottom: 20 }}>
          <Form.Item label="ID" name="id" style={{ margin: 0 }}>
            <Input />
          </Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Space>
      </Form>
      <Table
        columns={dynamicColumns}
        dataSource={showData}
        pagination={{ pageSize: 20 }}
        scroll={{ y: window.innerHeight - 300 }}
      />
      {/* 模态框是否显示 */}
      {isModalOpen && (
        <Form
          name="change"
          onFinish={onModalFormFinish}
          onFinishFailed={onModalFormFinishFailed}
          autoComplete="off"
        >
          <Modal
            title="修改资料"
            cancel={handleCancel}
            content={
              <div
                className="flex flex-col overflow-y-scroll"
                style={{ height: (window.innerHeight * 2) / 3 }}
              >
                <div className="flex flex-row">
                  <Image
                    width={80}
                    height={80}
                    className="rounded-full"
                    src={defaultValues.baseInfo.avatar}
                  />
                  <div className="flex flex-col justify-between ml-2">
                    <p className="font-bold">ID：{defaultValues.baseInfo.id}</p>
                    <p className="font-bold">
                      昵称：{defaultValues.baseInfo.name}
                    </p>
                    <p className="font-bold">
                      入驻时间：{defaultValues.baseInfo.joinTime}
                    </p>
                  </div>
                </div>
                <div
                  className="flex flex-row flex-wrap"
                  style={{ width: (window.innerWidth * 2) / 3 }}
                >
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="fans"
                    label="全网粉丝（万）"
                    initialValue={defaultValues.displayInfo.fans}
                    rules={[
                      {
                        required: true,
                        message: "请输入全网粉丝数量",
                      },
                    ]}
                  >
                    <InputNumber min={0} />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="gender"
                    label="性别"
                    initialValue={defaultValues.displayInfo.gender}
                    rules={[
                      {
                        required: true,
                        message: "填写性别",
                      },
                    ]}
                  >
                    <select
                      style={{
                        height: 32,
                        padding: "4px 11px",
                        border: "1px solid #d9d9d9",
                        borderRadius: 4,
                        outline: "none",
                      }}
                    >
                      <option value={1}>女</option>
                      <option value={0}>男</option>
                    </select>
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="wechat_lock_type"
                    label="微信添加方式"
                    initialValue={defaultValues.displayInfo.wechat_lock_type}
                    rules={[
                      {
                        required: true,
                        message: "填写添加微信方式",
                      },
                    ]}
                  >
                    <select
                      style={{
                        height: 32,
                        padding: "4px 11px",
                        border: "1px solid #d9d9d9",
                        borderRadius: 4,
                        outline: "none",
                      }}
                    >
                      <option value={1}>主动添加</option>
                      <option value={0}>直接展示</option>
                    </select>
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="wechat"
                    label="微信号"
                    initialValue={defaultValues.displayInfo.wechat}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="wechat_price"
                    label="微信价格"
                    rules={[
                      {
                        required: true,
                        message: "请输入微信价格",
                      },
                    ]}
                    initialValue={defaultValues.displayInfo.wechat_price / 10}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="signature"
                    label="个性签名"
                    initialValue={defaultValues.displayInfo.signature}
                    rules={[
                      {
                        required: true,
                        message: "请输入个性签名",
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="auto_response_message"
                    label="私信自动回复"
                    initialValue={
                      defaultValues.displayInfo.auto_response_message
                    }
                    rules={[
                      {
                        required: true,
                        message: "请输入私信自动回复",
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="age"
                    label="年龄"
                    initialValue={defaultValues.displayInfo.age}
                    rules={[
                      {
                        required: true,
                        message: "请填写年龄",
                      },
                    ]}
                  >
                    <InputNumber min={18} max={60} />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="height"
                    label="身高（cm）"
                    initialValue={defaultValues.displayInfo.height}
                    rules={[
                      {
                        required: true,
                        message: "请填写身高",
                      },
                    ]}
                  >
                    <InputNumber min={140} max={200} />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="weight"
                    label="体重（kg）"
                    initialValue={defaultValues.displayInfo.weight}
                    rules={[
                      {
                        required: true,
                        message: "请填写体重",
                      },
                    ]}
                  >
                    <InputNumber min={35} max={100} />
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="constellation"
                    label="星座"
                    initialValue={defaultValues.displayInfo.constellation}
                    rules={[
                      {
                        required: true,
                        message: "请填写星座",
                      },
                    ]}
                  >
                    <select
                      style={{
                        height: 32,
                        padding: "4px 11px",
                        border: "1px solid #d9d9d9",
                        borderRadius: 4,
                        outline: "none",
                      }}
                    >
                      {constellations.map((item) => (
                        <option key={item.value} value={item.value}>
                          {item.label}
                        </option>
                      ))}
                    </select>
                  </Form.Item>
                  <Form.Item
                    className="basis-1/2 px-2"
                    name="location"
                    label="居住地"
                    initialValue={defaultValues.displayInfo.location}
                    rules={[
                      {
                        required: true,
                        message: "请填写居住地",
                      },
                    ]}
                  >
                    <select
                      style={{
                        height: 32,
                        padding: "4px 11px",
                        border: "1px solid #d9d9d9",
                        borderRadius: 4,
                        outline: "none",
                      }}
                    >
                      {provinces.map((item) => (
                        <option key={item.value} value={item.value}>
                          {item.label}
                        </option>
                      ))}
                    </select>
                  </Form.Item>
                </div>
                <div>
                  <div className="flex flexp-row flex-wrap gap-2 mb-2">
                    <p>
                      <span className="text-red-400 text-base">*</span>
                      封面图片：
                    </p>
                    {defaultMedia.displayPoster.length !== 0 && (
                      <div className="relative">
                        <Image
                          src={defaultMedia.displayPoster[0].urls[0]}
                          width={100}
                        />
                        <Button
                          className="absolute top-0 left-0 w-full"
                          danger
                          type="primary"
                          onClick={() => handleDeleteMedia("displayPoster")}
                        >
                          删除
                        </Button>
                      </div>
                    )}
                    <ImageUploader setIds={setDisplayPosterId} />
                  </div>
                  <div className="flex flexp-row flex-wrap gap-2 mb-2">
                    <p>
                      <span className="text-red-400 text-base">*</span>
                      封面视频：
                    </p>
                    {defaultMedia.displayVideo.length !== 0 && (
                      <div className="relative">
                        <video
                          src={defaultMedia.displayVideo[0].urls[0]}
                          width={150}
                          controls
                        />
                        <Button
                          className="absolute top-0 left-0 w-full"
                          danger
                          type="primary"
                          onClick={() => handleDeleteMedia("displayVideo")}
                        >
                          删除
                        </Button>
                      </div>
                    )}
                    <VideoUploader setIds={setDisplayVideoId} />
                  </div>
                  <div className="flex flexp-row flex-wrap gap-2">
                    <p>
                      <span className="text-red-400 text-base">*</span>
                      相册图片：
                    </p>
                    {defaultMedia.displayGallery.length !== 0 && (
                      <div className="flex flex-row flex-wrap gap-2">
                        {defaultMedia.displayGallery.map((item) => (
                          <div key={item.urls[0]} className="relative">
                            <Image src={item.urls[0]} width={100} />
                            <Button
                              className="absolute top-0 left-0 w-full"
                              danger
                              type="primary"
                              onClick={() =>
                                handleDeleteMedia("displayGallery", item.id)
                              }
                            >
                              删除
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}
                    <ImageUploader setIds={setDisplayGalleryId} />
                  </div>
                </div>
              </div>
            }
          />
        </Form>
      )}
    </div>
  );
};

export default function StreamerInformation() {
  return <StreamerInformationContent />;
}