"use client";
import AppHeader from "@comp/AppHeader/page";
import Buttonbriz from "plugins/Buttonbriz/page";
import Input from "plugins/Input/page";
import React, { useContext, useEffect, useRef, useState } from "react";
import person from "@img/person.png";
import Image from "next/image";
import AppContext from "@ctx/AppContext";
import Avatar from "boring-avatars";
import { toast } from "react-toastify";
import SimpleReactValidator from "simple-react-validator";
import DatePickerIran from "plugins/DatePickerIran/page";
import moment from "jalali-moment";

const page = () => {
  const CTX = useContext(AppContext);
  const profile = CTX.state.profile;

  const [fistName, setFistName] = useState("");
  const [lastName, setLastName] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [nationalId, setNationalId] = useState("");
  const [birthDateTimeStamp, setBirthDateTimeStamp] = useState("");
  const [, forceUpdate] = useState();

  const validator = useRef(
    new SimpleReactValidator({
      messages: {
        required: "پر کردن این فیلد الزامی میباشد",
      },
      element: (message) => (
        <>
          <div className="text-right px-1 ">
            <small className="text-red-600 t-ig-small  ">{message}</small>
          </div>
        </>
      ),
    })
  );

  useEffect(() => {
    // if (profile.birthDateTimeStamp < 0) {
    //   return (date = moment
    //     .unix(profile.birthDateTimeStamp)
    //     .locale("fa")
    //     .format("YYYY/MM/DD")
    //     .split("/"));
    // }

    console.log(profile.birthDateTimeStamp < 0);
    setFistName(profile.firstName);
    setLastName(profile.lastName);
    setPhoneNumber(profile.phoneNumber);
    setNationalId(profile.nationalId);

    // setBirthDateTimeStamp(
    //   profile.birthDateTimeStamp < 0 ? ["1376", "09", "14"] : ""
    // );
  }, [profile]);

  return (
    <div className="pb-20">
      <AppHeader
        title={profile?.firstName + "     " + profile?.lastName}
        sub={profile.selectedComplexName}
        icon2={true}
        iconName2="ARROW"
        iconHref2="/home"
      />

      <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl">
        <div className="w-full flex justify-center ml-2">
          <div className="bg-white shadow w-[100px] h-[100px] rounded-full overflow-hidden">
            <div className="">
              <Avatar
                size={100}
                name={profile?.firstName}
                variant="beam"
                colors={["#9d9f88", "#83af96", "#b2de93"]}
              />
            </div>
          </div>

          <div className="absolute ml-[76px] mt-[59px]">
            <div
              className="bg-white w-[40px] h-[40px] rounded-full pt-2"
              onClick={() => {
                toast.warning(
                  `  ${profile?.firstName}  جان 
                فعلا دکوریه بعدا تلاش کن`,
                  {
                    position: "bottom-right",
                    closeOnClick: true,
                  }
                );
              }}
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 270 270"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className="mx-auto"
              >
                <path
                  d="M164.512 35.9879C164.512 35.9879 165.95 60.6129 187.675 82.3254C209.4 104.05 234.012 105.5 234.012 105.5L245.6 93.9129C254.817 84.695 259.996 72.1928 259.996 59.1567C259.996 46.1205 254.817 33.6183 245.6 24.4004C236.382 15.1825 223.879 10.0039 210.843 10.0039C197.807 10.0039 185.305 15.1825 176.087 24.4004L164.5 35.9879L135 65.4879M234.012 105.488L168.262 171.263L129.5 210L127.5 212.013C120.275 219.225 116.662 222.838 112.687 225.938C107.996 229.599 102.92 232.739 97.5496 235.3C92.9996 237.463 88.1621 239.075 78.4746 242.3L37.4621 255.975M37.4621 255.975L27.4371 259.325C25.1002 260.109 22.5912 260.225 20.1919 259.661C17.7926 259.097 15.5983 257.875 13.8554 256.132C12.1126 254.389 10.8905 252.195 10.3263 249.796C9.76222 247.396 9.87848 244.887 10.6621 242.55L14.0121 232.525M37.4621 255.975L14.0121 232.525M14.0121 232.525L27.6871 191.513C30.9121 181.825 32.5246 176.988 34.6871 172.438C37.2496 167.063 40.3871 161.988 44.0496 157.3C47.1496 153.325 50.7621 149.713 57.9746 142.5L91.2496 109.238"
                  stroke="black"
                  stroke-width="18.75"
                  stroke-linecap="round"
                />
              </svg>
            </div>
          </div>
        </div>

        <div className="w-full">
          <div className="">
            <Input
              lable="نام "
              id="fistName-id"
              name="fistName"
              type={"text"}
              value={fistName}
              inputEvent={(e) => {
                setFistName(e.target.value);
                validator.current.showMessageFor("fistName");
              }}
              style="text-right"
              validator={true}
              validatorData={validator.current.message(
                "fistName",
                fistName,
                "required"
              )}
            />
          </div>
          <div className="">
            <Input
              lable="نام خانوادگی "
              id="lastName-id"
              name="lastName"
              type={"text"}
              value={lastName}
              inputEvent={(e) => {
                setLastName(e.target.value);
                validator.current.showMessageFor("lastName");
              }}
              style="text-right"
              validator={true}
              validatorData={validator.current.message(
                "lastName",
                lastName,
                "required"
              )}
            />
          </div>

          <div className="">
            <Input
              lable="شماره تماس "
              id="phoneNumber-id"
              name="phoneNumber"
              type={"text"}
              value={phoneNumber}
              inputEvent={(e) => {
                setPhoneNumber(e.target.value);
                validator.current.showMessageFor("phoneNumber");
              }}
              style="text-right"
              validator={true}
              validatorData={validator.current.message(
                "phoneNumber",
                phoneNumber,
                "required"
              )}
              readOnly={true}
            />
          </div>
          <div className="">
            <Input
              lable="کد ملی "
              id="nationalId-id"
              name="nationalId"
              type={"text"}
              value={nationalId}
              inputEvent={(e) => {
                setNationalId(e.target.value);
                validator.current.showMessageFor("nationalId");
              }}
              style="text-right"
              validator={true}
              validatorData={validator.current.message(
                "nationalId",
                nationalId,
                "required"
              )}
            />
          </div>

          <DatePickerIran
            datePickerEvent={(e) => setBirthDateTimeStamp(e)}
            date={birthDateTimeStamp}
            zindex="z-[101]"
          />
        </div>

        <Buttonbriz title="ثبت تغییرات" color="INFO" icon="CHECK" />
      </div>
    </div>
  );
};

export default page;