Proyectos de Subversion LeadersLinked - SPA

import React from "react";
import { useDispatch } from "react-redux";
import { useForm } from "react-hook-form";
import { Button, styled } from "@mui/material";

import { useFetch } from "@hooks";
import { axios } from "@app/utils";
import { addNotification } from "@app/redux/notification/notification.actions";

import Widget from "@components/UI/Widget";
import Input from "@components/UI/inputs/Input";
import Select from "@components/UI/inputs/Select";
import Spinner from "@components/UI/Spinner";
import SwitchInput from "@components/UI/SwitchInput";

const Row = styled("div")(({ theme }) => ({
  display: "flex",
  gap: theme.spacing(0.5),
}));

const BasicSettings = () => {
  const { data: timezones } = useFetch("/helpers/timezones");
  const { data: formValues, loading } = useFetch("/account-settings/basic");
  const dispatch = useDispatch();

  const {
    control,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm({
    defaultValues: {
      first_name: "",
      last_name: "",
      email: "",
      phone: "",
      gender: "m",
      timezone: "",
      is_adult: "n",
    },
    values: formValues,
  });
  const watchedIsAdult = watch("is_adult") === "y";

  const onSubmit = handleSubmit(async (data) => {
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => formData.append(key, value));

    try {
      const response = await axios.post("/account-settings/basic", formData);
      dispatch(addNotification({ style: "success", msg: response.data.data }));
    } catch (error) {
      dispatch(addNotification({ style: "danger", msg: error.message }));
    }
  });

  if (loading) {
    return <Spinner />;
  }

  return (
    <Widget>
      <Widget.Header title="Información básica" />

      <Widget.Body>
        <form onSubmit={onSubmit}>
          <Row>
            <Input
              label="Nombre"
              name="first_name"
              control={control}
              error={errors.first_name?.message}
              rules={{ required: "Este campo es requerido" }}
            />
            <Input
              label="Apellido"
              name="last_name"
              control={control}
              error={errors.last_name?.message}
              rules={{ required: "Este campo es requerido" }}
            />
          </Row>

          <Row>
            <Input
              label="Correo"
              name="email"
              control={control}
              error={errors.email?.message}
              rules={{ required: "Este campo es requerido" }}
            />
            <Input
              label="Teléfono"
              name="phone"
              control={control}
              error={errors.phone?.message}
              rules={{
                required: "Por favor ingrese su número de teléfono",
                pattern: {
                  message: "Por favor ingrese un número de teléfono válido",
                  value:
                    /^\+[1-9]{1}[0-9]{0,2}[2-9]{1}[0-9]{2}[2-9]{1}[0-9]{2}[0-9]{4}$/,
                },
              }}
            />
          </Row>

          <Row>
            <Select
              label="Género"
              name="gender"
              control={control}
              rules={{ required: "Este campo es requerido" }}
              error={errors.gender?.message}
              options={[
                { name: "Masculino", value: "m" },
                { name: "Femenino", value: "f" },
              ]}
            />
            <Select
              label="Zona horaria"
              name="timezone"
              control={control}
              rules={{ required: "Este campo es requerido" }}
              error={errors.timezone?.message}
              options={Object.entries(timezones).map(([key, value]) => ({
                name: key,
                value,
              }))}
            />
          </Row>

          <SwitchInput
            label="Eres mayor de 18"
            isChecked={watchedIsAdult}
            setValue={(value) => setValue("is_adult", value ? "y" : "n")}
          />

          <Button color="primary" type="submit" sx={{ marginTop: 1 }}>
            Guardar
          </Button>
        </form>
      </Widget.Body>
    </Widget>
  );
};

export default BasicSettings;