import { useState } from "react";
import { Image, Label, View } from "@tarojs/components";
import Taro, { FC, useRouter } from "@tarojs/taro";
import { AtButton, AtInput, AtTextarea } from "taro-ui";
import BgImg from "../../images/feedback@2x-min.png";
import { Rules } from "async-validator";
import { handleValidate } from "../../../utils";
import { redeemApi } from "../../../api";
import "../feedback/index.scss";
import "./index.scss";

const formRules: Rules = {
  name: [{ required: true, message: "请输入称呼" }],
  phone: [{ required: true, message: "请输入联系方式" }],
  description: [{ required: true, message: "请输入地址及留言" }],
};

const DEFAULT_PARAMS = {
  name: "",
  phone: "",
  description: "",
};

const OrderPage: FC = () => {
  const router = useRouter();
  const remainder = Number(router.params.point) - Number(router.params.score);
  const [params, setParams] = useState({ ...DEFAULT_PARAMS });
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!(await handleValidate(params, formRules))) return;

    Taro.showModal({
      title: "提示",
      content: "确认是否兑换",
      async success() {
        try {
          setLoading(true);
          await redeemApi({
            ...params,
            prizeId: router.params.id,
            score: -Number(router.params.score),
          });

          Taro.showToast({
            title: "兑换成功",
            icon: "success",
            duration: 3000,
          });

          setTimeout(() => {
            Taro.navigateBack();
          }, 3000);
        } finally {
          setLoading(false);
        }
      },
    });
  };

  return (
    <View className="feedback-page">
      <View className="feedback order">
        <View className="feedback-main">
          <View className="feedback-main__form">
            <Label className="feedback__label">您的称呼</Label>
            <AtInput
              name="name"
              className="feedback__input"
              placeholder="请输入内容，20字以内"
              value={params.name}
              onChange={(val) =>
                setParams({
                  ...params,
                  name: val as string,
                })
              }
            />

            <Label className="feedback__label">联系方式</Label>
            <AtInput
              name="phone"
              type="phone"
              className="feedback__input"
              placeholder="请输入内容，20字以内"
              value={params.phone}
              onChange={(val) =>
                setParams({
                  ...params,
                  phone: val as string,
                })
              }
            />

            <Label className="feedback__label">地址及留言</Label>
            <AtTextarea
              className="feedback__input textarea"
              maxLength={50}
              placeholder="请输入省市区街道，50字以内"
              value={params.description}
              onChange={(val) =>
                setParams({
                  ...params,
                  description: val,
                })
              }
            />
          </View>

          <View className="feedback-main__form">
            <View className="order__line">
              <View className="order__line__label size38 bold">您的积分</View>
              <View className="order__line__num size38 bold">
                {router.params.point}
              </View>
            </View>

            <View className="order__line">
              <View className="order__line__label">消费</View>
              <View className="order__line__num red">
                {router.params.score}
              </View>
            </View>

            <View className="order__line">
              <View className="order__line__label bold">结余</View>
              <View className="order__line__num green">{remainder}</View>
            </View>

            <View className="toolbar">
              <AtButton
                className="toolbar__btn cancel"
                onClick={() => Taro.navigateBack()}
              >
                取消
              </AtButton>
              <AtButton
                className="toolbar__btn submit"
                loading={loading}
                onClick={handleSubmit}
              >
                兑换
              </AtButton>
            </View>
          </View>
        </View>

        <Image src={BgImg} className="feedback__bg" mode="widthFix" />
      </View>
    </View>
  );
};

export default OrderPage;
