GeneralInformation.tsx

"use client";
import { useEffect, useState } from "react";
import { FieldValue, SubmitHandler, useForm } from "react-hook-form";

// LOCAL STORAGE
import { getStoredData, setStoredData } from "@utilities/localStorage";
import { StorageKeys } from "@config/local-storage/localStorageKeys";

// INTERFACES
import { IDataForm } from "@/app/interfaces/Interfaces";

// COMPONENTS
import RcSlider from "@/shared/slider/RcSlider";

// INPUTS
import FormInputText from "@components/form-inputs/form-input-text";
import FormInputDate from "@components/form-inputs/form-input-date";
import FormInputNumberFormat from "@components/form-inputs/form-input-number-format";
import FormInputEmail from "@components/form-inputs/form-input-email";
import Button from "@/shared/ui/button/Button";
import InputCheckbox from "@/shared/ui/input-checkbox/InputCheckbox";

// HELPERS
import { RegForInitials } from "@helpers/reg-set";
import { RepWordUp } from "@helpers/rep-word-up";

// STYLES
import style from "./GeneralInformation.module.scss";

export default function GeneralInformation({
  nextStep,
}: {
  nextStep: () => void;
}): JSX.Element {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "all" });

  // NOTE: Объект с данными формы
  const [dataForm, setDataForm] = useState<IDataForm>({
    lastName: "",
    firstName: "",
    middleName: "",
    dateOfBirth: "",
    numberPhone: "",
    email: "",
    amount: 1000,
    term: 5,
    checkbox: false,
  });

  // NOTE: Обновление данных формы из LocalStorage
  useEffect(() => {
    const storedData = getStoredData<IDataForm>(StorageKeys.GENERAL_INFO);
    if (storedData) {
      setDataForm(storedData);
    }
  }, []);

  // NOTE: Обновление данных формы
  const updateDataForm = (newData: Partial<IDataForm>) => {
    const updatedData = { ...dataForm, ...newData };
    setDataForm(updatedData);
    setStoredData(StorageKeys.GENERAL_INFO, updatedData);
  };

  const submit: SubmitHandler<FieldValue<any>> = async (data) => {
    const dataToSend = {
      phone_number: data.numberPhone,
      type: "reg",
    };

    // NOTE: Отправка данных на сервер и получение SMS кода
    try {
      const response = await fetch("http://localhost:8082/api/u/send-sms", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(dataToSend),
      });

      if (response.ok) {
        const responseData = await response.json();
        console.log("Данные отправлены успешно!", responseData.message);
        nextStep();
      }
    } catch (error) {
      nextStep();
      console.error("Ошибка отправки данных:", error);
    }
  };

  return (
    <div className={style["general-info"]}>
      {/* asd */}
      <section className={style["general-info__data"]}>
        <h2 className={style["data__title"]}>Общая информация</h2>
        <form className={style["data__form"]} onSubmit={handleSubmit(submit)}>
          <section className={style["general-info__sliders"]}>
            <h2
              className={`${style["sliders__title"]} max-[900px]:text-center`}
            >
              Какая сумма вам нужна?
            </h2>
            <div className={`${style["sliders__grid"]} flex flex-row`}>
              <div className={style["sliders__grid__item"]}>
                <RcSlider
                  controller={{
                    control: control,
                    type: "amount",
                  }}
                  min={1000}
                  max={100000}
                  step={1000}
                  value={dataForm.amount || 1000}
                  description={{
                    left: "1000 ₽",
                    right: "100 000 ₽",
                  }}
                  onChange={(val: number) => updateDataForm({ amount: val })}
                  styles={{
                    colorSlider: "#6588ff",
                    colorThumb: "#6588ff",
                    colorThumbOpacity: "#6588FF2E",
                  }}
                />
                <p className={style["sliders__grid__item__value"]}>
                  Сумма: {dataForm.amount?.toLocaleString("ru-RU") || "0"} ₽
                </p>
              </div>
              <div className={style["sliders__grid__item"]}>
                <RcSlider
                  controller={{
                    control: control,
                    type: "term",
                  }}
                  min={5}
                  max={30}
                  step={1}
                  value={dataForm.term || 5}
                  description={{
                    left: "5 дней",
                    right: "30 дней",
                  }}
                  onChange={(val) => updateDataForm({ term: val })}
                  styles={{
                    colorSlider: "#6588ff",
                    colorThumb: "#6588ff",
                    colorThumbOpacity: "#6588FF2E",
                  }}
                />
                <p className={style["sliders__grid__item__value"]}>
                  Срок: {dataForm.term || 0} дней
                </p>
              </div>
            </div>
          </section>
          <div className={style["data__form__fields"]}>
            <FormInputText
              control={control}
              value={dataForm.lastName}
              type="lastName"
              placeholder="Фамилия"
              minLength={2}
              maxLength={30}
              pattern={RegForInitials}
              patternValid={/^[^A-Za-z]+$/gi}
              onChange={(event) =>
                updateDataForm({
                  lastName: RepWordUp(event.replace(RegForInitials, "")),
                })
              }
              error={errors}
            />
            <FormInputText
              control={control}
              value={dataForm.firstName}
              type="firstName"
              placeholder="Имя"
              minLength={2}
              maxLength={30}
              pattern={RegForInitials}
              patternValid={/^[^A-Za-z]+$/gi}
              onChange={(event) =>
                updateDataForm({
                  firstName: RepWordUp(event.replace(RegForInitials, "")),
                })
              }
              error={errors}
            />
            <FormInputText
              control={control}
              value={dataForm.middleName}
              type="middleName"
              placeholder="Отчество"
              minLength={2}
              maxLength={30}
              pattern={RegForInitials}
              patternValid={/^[^A-Za-z]+$/gi}
              onChange={(event) =>
                updateDataForm({
                  middleName: RepWordUp(event.replace(RegForInitials, "")),
                })
              }
              error={errors}
            />
            <FormInputDate
              control={control}
              value={dataForm.dateOfBirth}
              type="numberDate"
              placeholder="Дата рождения"
              format="##/##/####"
              onChange={(event) => updateDataForm({ dateOfBirth: event })}
              error={errors}
            />
            <FormInputNumberFormat
              control={control}
              value={dataForm.numberPhone}
              type="numberPhone"
              placeholder="Мобильный телефон"
              format="+7 (###) ###-##-##"
              mask="_"
              minLength={10}
              error={errors}
              errorMessage="*Заполните полностью номер телефона"
              onChange={(val) => {
                updateDataForm({ numberPhone: val });
              }}
            />
            <FormInputEmail
              control={control}
              value={dataForm.email}
              type="email"
              placeholder="Электронная почта"
              onChange={(event) => updateDataForm({ email: event })}
              error={errors}
            />
          </div>
          <div className={style["data__form__resume"]}>
            <div
              className={`${style["data__form__resume__btn"]} flex justify-center`}
            >
              <Button
                customClassName={`${style["valid-code__approval__resume"]}`}
                variant="orange"
                type="submit"
                disabled={!dataForm.checkbox}
                text="Продолжить"
              />
              {!dataForm.checkbox && (
                <p
                  className={`${style["data__form__resume--valid-checkbox"]} form-error-message`}
                >
                  *Вы должны согласиться с политикой обработки
                  <br />
                  персональных данных
                </p>
              )}
            </div>
            <div className={style["data__form__resume__checkbox"]}>
              <InputCheckbox
                controller={{
                  control: control,
                  type: "checkbox",
                }}
                customClassName="custom-checkbox"
                type="checkbox"
                id="check-label"
                checked={dataForm.checkbox || false}
                onChange={(checked) => {
                  updateDataForm({ checkbox: checked });
                }}
              />
              <p className={style["data__form__resume__checkbox__assent"]}>
                Я согласен с{" "}
                <span>Политикой обработки персональных данных</span>, а также
                предоставляю{" "}
                <span>Согласие на обработку персональных данных</span>.
              </p>
            </div>
          </div>
        </form>
      </section>
    </div>
  );
}