"use client";

import React, { useState } from "react";
import { Button, Input, Divider } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
import UploadImgs from "@/components/UploadImgs";
export default function EditPassword() {
  const [regionCode, setRegionCode] = useState("");
  const [mobilePhone, setMobilePhone] = useState("");
  const [veriCode, setVeriCode] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [isCounting, setIsCounting] = useState(false);
  const [seconds, setSeconds] = useState(60);
  const router = useRouter();
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9"></p>
      </div>
      {/* 内容 */}
      <div className="pt-32 px-4">
        <p className="text-3xl text-white font-medium">修改密码</p>
        <p className="text-base text-white mb-10">请牢记密码</p>
        <div className="border-2 border-[#2c2b2f] rounded-2xl p-4">
          <div className="flex flex-row flex-nowrap items-center mb-4">
            <p className="text-base text-white mr-4">+{regionCode}</p>
            <Input
              placeholder="未获取到手机号，请重新登录"
              // disabled={true}
              type="number"
              maxLength={11}
              onChangeText={(value) => setMobilePhone(value)}
              value={mobilePhone}
              style={{"--color":"#FFFFFF","--font-size":"16px"}}
            />
          </div>
          <Divider />
          <div className="flex flex-row flex-nowrap items-center my-4">
            <p className="text-base text-white mr-4 whitespace-nowrap">验证码</p>
            <Input
              placeholder="请输入验证码"
              onChangeText={(value) => setVeriCode(value)}
              value={veriCode}
              type="number"
              style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
            />
            <Button
              shape="rounded"
              size="mini"
              disabled={isCounting}
              // onClick={handleSubmit}
              style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
              className="whitespace-nowrap"
            >
              {isCounting ? `(${seconds})重新发送` : "获取验证码"}
            </Button>
          </div>
          <Divider />
          <div className="flex flex-row flex-nowrap items-center my-4">
            <p className="text-base text-white mr-4 whitespace-nowrap">新密码</p>
            <Input
              placeholder="请输入8-15位新密码"
              placeholderTextColor="#FFFFFF80"
              underlineColorAndroid="transparent"
              onChangeText={(value) => setNewPassword(value)}
              value={newPassword}
              style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
            />
          </div>
          <Divider />
          <div className="flex flex-row flex-nowrap items-center mt-4">
            <p className="text-base text-white mr-4 whitespace-nowrap">确认密码</p>
            <Input
              placeholder="请再次输入新密码"
              onChangeText={(value) => setConfirmPassword(value)}
              value={confirmPassword}
              style={{"--placeholder-color":"#FFFFFF80","--font-size":"16px"}}
            />
          </div>
        </div>
        <div className="mt-16">
          <Button
            shape="rounded"
            size="middle"
            block
            // onClick={handleSubmit}
            style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
          >
            确认修改
          </Button>
        </div>
      </div>
    </div>
  );
}