import { Text, View } from "@tarojs/components";

import { postDetailApi, reportApi } from "../../api/post";
import {
  showToast,
  navigateBack,
  useDidShow,
  getCurrentInstance,
} from "@tarojs/taro";
import { useState } from "react";
import "./index.scss";
import {
  Button,
  Col,
  Form,
  FormItem,
  Image,
  Radio,
  Row,
  TextArea,
  NavBar,
} from "@nutui/nutui-react-taro";
import { ArrowLeft } from "@nutui/icons-react-taro";

const Report = () => {
  const [form] = Form.useForm();
  const reportType = Form.useWatch("report_type", form);
  const [postData, setPostData] = useState<any>(null);

  useDidShow(() => {
    const { target_type, target_id } =
      getCurrentInstance()?.router?.params || {};
    if (target_type === "post") {
      getPostDetail(Number(target_id));
    }
  });

  // 获取帖子详情
  const getPostDetail = (target_id: number) => {
    postDetailApi({ id: target_id }).then((res: any) => {
      if (res.code === 200) {
        setPostData(res.data);
      }
    });
  };

  // 提交
  const submit = () => {
    const params = form.getFieldsValue(true);
    if (params.report_type === "9") {
      if (!params.reason) {
        showToast({ title: "请输入理由", icon: "none" });
        return;
      }
    }
    params.target_type = "post";
    params.target_id = postData.id;
    reportApi(params).then((res: any) => {
      if (res.code === 200) {
        showToast({ title: "举报成功", icon: "success" });
        setTimeout(() => {
          navigateBack();
        }, 1500);
      }
    });
  };
  return (
    <>
      <NavBar
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        onBackClick={(e) => {
          e.preventDefault();
          navigateBack({ delta: 1 });
        }}
      >
        举报
      </NavBar>
      <View className="p-[10px] report">
        {postData ? (
          <>
            <View className="text-[14px] text-[#333]">
              举报{" "}
              <Text className="text-[#595cab]">
                {" "}
                @{postData.user.nickname || postData.user.username}
              </Text>{" "}
              的动态
            </View>
            <View className="p-[10px] mt-[15px] flex items-start bg-[#f4f4f4] rounded-[10px]">
              <Image
                height="70"
                width="70"
                className="mr-[10px] rounded-[20px] bg-[#595cab]"
                src={postData.media_url[0].src}
              ></Image>
              <View className="text-[14px] text-[#807b83]">
                <Text className="text-[#595cab]">
                  {" "}
                  @{postData.user.nickname || postData.user.username}
                </Text>
                {"："}
                {postData.content}
              </View>
            </View>
            <Form form={form} onFinish={() => submit()}>
              <View className="mt-[15px]">
                <Text className="text-[20px] font-[800] text-[#333]">
                  举报理由
                </Text>
                <View className="mt-[10px]">
                  <FormItem name="report_type">
                    <Radio.Group>
                      <Row>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="1" className="radio-item">
                            人身攻击
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="2" className="radio-item">
                            淫秽色情
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="3" className="radio-item">
                            违法信息
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="4" className="radio-item">
                            有害信息
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="5" className="radio-item">
                            垃圾广告
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="6" className="radio-item">
                            侵权抄袭
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="7" className="radio-item">
                            诈骗
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="8" className="radio-item">
                            未成年人相关举报
                          </Radio>
                        </Col>
                        <Col span={12} className="nut-grid-square">
                          <Radio value="9" className="radio-item">
                            其他
                          </Radio>
                        </Col>
                      </Row>
                    </Radio.Group>
                  </FormItem>
                </View>
                {reportType === "9" && (
                  <>
                    <FormItem name="reason">
                      <TextArea
                        placeholder="请输入理由（必填）"
                        className="textarea-item"
                        onChange={(value) => console.log("change", value)}
                        onBlur={() => console.log("blur")}
                        onFocus={() => console.log("focus")}
                      />
                    </FormItem>
                  </>
                )}
              </View>
              <FormItem>
                <Button
                  block
                  type="primary"
                  disabled={!reportType}
                  onClick={() => form.submit()}
                >
                  提交
                </Button>
              </FormItem>
            </Form>
          </>
        ) : (
          <></>
        )}
      </View>
    </>
  );
};

export default Report;