"use client";
import React, { useEffect, useState } from "react";
import { useForm } from "antd/lib/form/Form";
import { useMutation } from "@tanstack/react-query";
import { Form, Button, Input, message, Upload } from "antd";
import Image from "next/image";

import { IoPerson, IoMail } from "react-icons/io5";
import { useSelector } from "react-redux";
import { useRouter } from "next/navigation";
import { useTranslations , useLocale } from "next-intl";
import axios from "@/utils/axios-config";
import { ArrowRightOutlined } from "@ant-design/icons";
import { UploadOutlined } from "@ant-design/icons";
import { IoCameraSharp } from "react-icons/io5";

export default function EditProfile() {
  const locale = useLocale();
  const [imageSrc, setImageSrc] = useState<string | null>(null);
  const [editProfileBtnClicked, setEditProfileBtnClicked] = useState(false);
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [form] = useForm();
  const t = useTranslations();
  const router = useRouter()
  const {profile} = useSelector((state:{Auth:any})=>state.Auth);

  useEffect(()=>{
form.setFieldsValue({
name:profile.name,
email:profile.email,

})
setImageSrc(profile.profile_image)
  },[profile])
  //// edit profile handler
  const editProfileMutation = useMutation({
    mutationFn: (values) => axios["post"]("auth/edit-profile", values,{
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }),
    onSuccess: (res) => {
      message.success(res?.data?.message)
      router.push(`/${locale}/profile`);
    },
    onError: (err) => {
     // console.log(err?.message);

      message.error(err?.message);
    },
  });
  const onFinish = (values: any) => {
    setEditProfileBtnClicked(true);
   
    values["_method"] = "PUT";
    if (!imageSrc) {
      return;
    }
    const formData = new FormData();
    if(imageFile) formData.append("profile_image", imageFile); 
   
    Object.keys(values).forEach((key) => {
      formData.append(key, values[key]);
    });
    // console.log(values)
    editProfileMutation.mutate(formData as any);
  };

  //// upload image handlres
  const handlePreview = (file: File) => {
    const reader = new FileReader();
    reader.onload = () => {
      setImageSrc(reader.result as string);
    };
    reader.readAsDataURL(file);
  };

  const propsAr = {
    beforeUpload: (file: File) => {
      handlePreview(file);
      setImageFile(file);
      return false;
    },
    showUploadList: false,
  };
  return (
    <div className="container mx-auto pt-[250px] px-4 text-black">
      <div className="w-[60%] sm:w-[620px] py-[50px] mx-auto px-[10px] sm:px-[25px] border border-[#D9D9D9] rounded-lg flex flex-col justify-center items-center">
        <div className="pt-4 w-fit relative">
          {/* {imageSrc && (
              <div className="m-2 w-[100px] h-[100px]">
                <Image
                  src={imageSrc}
                  alt="Uploaded"
                  style={{
                    width: "100px",
                    height: "100px",
                    objectFit: "contain",
                    border: "1px solid #d9d9d9",
                    borderRadius: "8px",
                  }}
                />
              </div>
            )} */}

          <Upload {...propsAr} className="absolute bottom-4 end-[2px] ">
            {/* <Button
                icon={<UploadOutlined />}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  height: "100px",
                  width: "100px",
                  borderRadius: "8px",
                  border: "1px solid #d9d9d9",
                  background: "#f5f5f5",
                }}
                className="m-2"
              >
               
              </Button> */}
            <IoCameraSharp className="text-[30px] text-gray-400 cursor-pointer" />
          </Upload>
          {/* <img
          
            src={imageSrc || "/images/no-image.png"}
            className="w-[150px] h-[150px]"
            alt="img"
            style={{ border: "1px solid lightgray", borderRadius: "50%" }}
          /> */}
          <Image
                  src={imageSrc || "/images/no-image.png"}
                  alt={''}
                  width={150}
                  height={150}
                  className=" rounded-full border !w-[150px] !h-[150px]"
                  priority
                />
        </div>
        {editProfileBtnClicked && !imageSrc && (
          <p className="text-custom-red text-[12px]">
            {t("please-choose-image")}
          </p>
        )}

        <Form
          className=" flex flex-col gap-[20px] w-[410px] max-[460px]:w-full mt-6"
          layout="vertical"
          form={form}
          //initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <div className="relative h-16">
            <Form.Item
              // label={<FormattedMessage id="email" />}
              name="name"
              rules={[
                {
                  required: true,
                  message: t("user-name-required"),
                },
                // {
                //   type: "email",
                //   message: <FormattedMessage id="invalid-email" />,
                // },
              ]}
            >
              <Input
                size="large"
                placeholder={t('user-name')}
                className="ps-[40px] md:ps-[50px]"
              />
            </Form.Item>
            <IoPerson
              className={`text-[20px] md:text-[25px] text-primary absolute start-4 top-1/2 -translate-y-[60%]`}
            />
          </div>
          <div className="relative h-16">
            <Form.Item
              // label={<FormattedMessage id="email" />}
              name="email"
              rules={[
                {
                  required: true,
                  message: t("email-required"),
                },
                {
                  type: "email",
                  message: t("invalid-email"),
                },
              ]}
            >
              <Input
                size="large"
                placeholder={t('email')}
                className="ps-[40px] md:ps-[50px]"
              />
            </Form.Item>
            <IoMail
              className={`text-[20px] md:text-[25px] text-primary absolute start-4 top-1/2 -translate-y-[60%]`}
            />
          </div>
          <Button
            htmlType="submit"
            loading={editProfileMutation.isPending}
            className={`w-[200px] mx-auto h-[50px] sm:h-[56px] !border-none !outline-none !text-white !bg-[#03B89E]  rounded-md text-[20px] sm:text-[24px] font-[600] flex items-center justify-center border  transition-colors duration-500 group`}
          >
            {t("save")}
            <ArrowRightOutlined
              className={`mx-[7px] bg-[#fff] text-[#03B89E] p-[4px] rounded-full text-[14px] transition-colors duration-300 rtl:rotate-180`}
            />
          </Button>
        </Form>
      </div>
    </div>
  );
}