import React, { useState, useRef } from "react";
import { ToastContainer } from "react-toastify";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string } from "yup";
import {
  Form,
  FormGroup,
  FormControl,
  FormLabel,
  Row,
  Col,
} from "react-bootstrap";
import Image from "next/image";
import Avatar from "@/public/images/Avatar.svg";

const AccountDetail: React.FC = () => {
  const [buttonDisable, setButtonDisable] = useState(false);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const { register, handleSubmit, formState } = useForm({
    resolver: yupResolver(
      object().shape({
        name: string().required("The name value is required."),
        username: string().required("The name value is required."),
        email: string().email().required("The email value is required."),
        business_city: string().required("The business city value is required"),
        business_state: string().required("Please select business state."),
        business_number: string().matches(/^[6-9]\d{9}$/, {
          message: "Please enter valid number.",
          excludeEmptyString: false,
        }),
      }),
    ),
  });

  const { errors } = formState;
  const onSubmit = async (data: object) => {
    setButtonDisable(true);
  };

  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    const reader = new FileReader();

    reader.onload = () => {
      setSelectedImage(reader.result as string);
    };
    if (file) {
      reader.readAsDataURL(file);
    }
  };

  const handleImageDelete = () => {
    setSelectedImage(null);
  };
  return (
    <>
      <ToastContainer />
      <div className="form_body" id="profile_page">
        <div className="my-3 account-box">
          <div className="profile_block">
            <div className="mb-4">
              <input
                type="file"
                accept="image/*"
                onChange={handleImageUpload}
                style={{ display: "none" }}
                ref={fileInputRef}
              />
              <Image
                src={selectedImage ? selectedImage : Avatar}
                alt="avatar"
                width={100}
                height={100}
                className="image-profile"
              />
              <span
                className="load_pic"
                onClick={() => fileInputRef.current?.click()}
              >
                <i className="bi bi-camera-fill"></i>
              </span>
            </div>
            <div className="d-flex gap-5 btn-main-block">
              <button
                type="button"
                className="btn btn-primary-my btn-my-profile"
                onClick={() => fileInputRef.current?.click()}
              >
                Upload New
              </button>
              <button
                type="button"
                className="btn btn-secondary btn-my-profile"
                onClick={handleImageDelete}
              >
                Delete
              </button>
            </div>
          </div>
          <Form onSubmit={handleSubmit(onSubmit)}>
            <Row>
              <Col>
                <FormLabel htmlFor="port_ramp">Name</FormLabel>
                <FormGroup className="mb-2">
                  <FormControl
                    type="text"
                    {...register("name")}
                    id="name"
                    autoComplete="off"
                    placeholder="Enter your name"
                    className={errors.name ? "is-invalid" : ""}
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.name?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>

                <FormLabel htmlFor="port_ramp">Email</FormLabel>
                <FormGroup className="mb-2">
                  <FormControl
                    type="email"
                    {...register("email")}
                    id="name"
                    autoComplete="off"
                    placeholder="Enter your email"
                    className={errors.email ? "is-invalid" : ""}
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.email?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>

                <FormLabel htmlFor="port_ramp">Business State</FormLabel>
                <FormGroup className="mb-2">
                  <Form.Select
                    aria-label="Default select example"
                    {...register("business_state")}
                    id="name"
                    className={errors.business_state ? "is-invalid" : ""}
                  >
                    <option value="">Open this select menu</option>
                    <option value="1">Lucknow</option>
                    <option value="2">Delhi</option>
                    <option value="3">Madhya Pradesh</option>
                  </Form.Select>
                  <Form.Control.Feedback type="invalid">
                    {errors.business_state?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>
              </Col>
              <Col>
                <FormLabel htmlFor="port_ramp">Username</FormLabel>
                <FormGroup className="mb-2">
                  <FormControl
                    type="text"
                    {...register("username")}
                    id="name"
                    autoComplete="off"
                    placeholder="Enter your username"
                    className={errors.username ? "is-invalid" : ""}
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.username?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>

                <FormLabel htmlFor="port_ramp">Business City</FormLabel>
                <FormGroup className="mb-2">
                  <FormControl
                    type="text"
                    {...register("business_city")}
                    id="name"
                    autoComplete="off"
                    placeholder="Enter your city"
                    className={errors.business_city ? "is-invalid" : ""}
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.business_city?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>

                <FormLabel htmlFor="port_ramp">Business Phone Number</FormLabel>
                <FormGroup className="mb-2">
                  <FormControl
                    type="text"
                    {...register("business_number")}
                    id="name"
                    autoComplete="off"
                    placeholder="Enter phone number"
                    className={errors.business_number ? "is-invalid" : ""}
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.business_number?.message?.toString()}
                  </Form.Control.Feedback>
                </FormGroup>
              </Col>
              <Row>
                <Col className="justify-content-center my-3 px-3">
                  <button
                    type="submit"
                    className="W-0 btn-block primary_btn_profile"
                    disabled={buttonDisable}
                  >
                    {buttonDisable ? (
                      <>
                        <span
                          className="spinner-border spinner-border-sm"
                          role="status"
                          aria-hidden="true"
                        ></span>{" "}
                        Please wait...
                      </>
                    ) : (
                      "REGISTER"
                    )}
                  </button>
                </Col>
              </Row>
            </Row>
          </Form>
        </div>
      </div>
    </>
  );
};

export default AccountDetail;