"use client";

import { useRef, useState } from "react";
import { Button } from "@mui/material";
import ProfileP from "@/components/icons/ProfileP";
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
import { uploadImage } from "@/helper";
import ModalUpload from "./ModalUpload";
import Image from "next/image";

function UploadFile({ image, setImage }) {
  const fileRef = useRef();

  const [open, setOpen] = useState(false);
  const [data, setData] = useState();

  const handleClose = () => setOpen(false);
  const handleOpen = () => setOpen(true);

  const openInput = () => fileRef.current.click();
  const handleChange = async (event) => {
    const result = await uploadImage(event);
    handleOpen();
    setData(result);
  };

  const uploadImg = (prop) => {
    setImage(prop);
    handleClose();
  };

  return (
    <>
      <ModalUpload
        open={open}
        data={data}
        uploadImg={uploadImg}
        handleClose={handleClose}
      />
      <input
        type="file"
        ref={fileRef}
        className="contents"
        onChange={handleChange}
      />
      {image ? (
        <Image
          width={24}
          height={24}
          src={image}
          alt="img-uploaded"
          className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
        />
      ) : (
        <div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
          <ProfileP />
        </div>
      )}
      <Button
        variant="text"
        onClick={openInput}
        className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
      >
        انتخاب تصویر
        <ArrowLeftPU />
      </Button>
    </>
  );
}

export default UploadFile;