import { useState } from "react";
import Form from "./Form";
import { Button } from "@mui/material";
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
import { request } from "@/services/response";

function Information({ user, dataUser }) {
  const [disable, setDisable] = useState(true);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(dataUser || {});

  const changeData = (value, type, name) => {
    disable && setDisable(false);
    setData({
      ...data,
      [name]: value,
    });
  };

  const sendReq = () => {
    setLoading(true);
    request[dataUser ? "patchUserProfile" : "postUserProfile"](data)
      .then((res) => {
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
  };

  return (
    <div className="opacity-page">
      <Form data={data} changeData={changeData} prevData={dataUser} />
      <Button
        disabled={disable}
        variant="contained"
        onClick={sendReq}
        loading={loading}
        className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
                 !rounded-[4px] !text-[14px] md:!text-[16px] !font-medium
                !mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
              `}
      >
        ثبت اطلاعات
        <ArrowLeftWhiteD />
      </Button>
    </div>
  );
}

export default Information;