Загрузка данных


import { normalizeSipUriForPayload } from '@/domains/equipment/repositories/helpers/normalizeSipUriForPayload';
import { PadletModelItem } from '@/shared/api/controller/client';
import { useCloseDrawer } from '@/shared/hooks/drawer/useCloseDrawer';
import { Helpers } from '@/shared/lib';
import { DrawerTypes } from '@/shared/model/drawer/drawer.types';
import { useSelectControllerLocationId } from '@/shared/store/сontrollers/сontrollers.selectors';
import {
  Ieee8021X,
  ProtocolIp,
  Segment,
} from '@/widgets/Monitoring/model/padlet.model';
import { usePadletRepository } from '@/widgets/Monitoring/repositories/padlet.repository';
import { yupResolver } from '@hookform/resolvers/yup';
import { QueryStatus } from '@reduxjs/toolkit/dist/query';
import { useEffect, useState } from 'react';
import { SubmitHandler, UseFormReturn, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { PadletCreateFormData } from '../../PadletCreateDrawer/model/padletCreateCreateForm.model';
import { useGetPadletById } from '../../PadletInfoDrawer/hooks/useGetPadletById';
import {
  PADLET_UPDATE_FORM_KEY,
  PadletUpdateFormData,
} from '../model/padletUpdateForm.model';
import { padletUpdateSchema } from '../validation/padletUpdate.schema';

type PadletUpdateState = {
  updateLabel: string;
  updateDrawerLabel: string;
  methods: UseFormReturn<PadletUpdateFormData, any, undefined>;
  onDrawerClose: () => void;
  submitHandler: SubmitHandler<PadletUpdateFormData>;
  model: PadletModelItem | undefined | null;
  isSaveButtonDisabled: boolean;
  handleClearModel: () => void;
  setModel: (value: PadletModelItem | null) => void;
};

export const usePadletUpdateState = (): PadletUpdateState => {
  const { t } = useTranslation();

  const updateLabel = t('common:buttons.save');
  const updateDrawerLabel = t('common:drawerTitle.PadletUpdate');

  const closeDrawer = useCloseDrawer();
  const [model, setModel] = useState<PadletModelItem | null>(null); // TODO: padletModel

  const { updatePadlet, updatePadletQueryStatus } = usePadletRepository();

  const padlet = useGetPadletById();

  const id = padlet?.id;
  const locationId = useSelectControllerLocationId();

  const defaultValues: PadletUpdateFormData = {
    locationId: padlet?.locationId ?? '',
    name: padlet?.name ?? '',
    ip: padlet?.interface?.ip ?? '',
    mac: padlet?.interface?.mac ?? '',
    subnetMask: padlet?.interface?.subnetMask ?? '',
    gateway: padlet?.interface?.gateway ?? '',
    port: padlet?.interface?.port ?? 8080,
    timeZone: padlet?.timeZone ?? '',
    modelId: padlet?.model?.id ?? '',
    typeName: padlet?.model?.type?.name ?? '',
    sipUri: padlet?.sipUri,
    hasSipUri: padlet?.model?.type?.hasSipUri ?? null,
    manufacturerName: padlet?.model?.manufacturer?.name ?? '',
    //@ts-ignore
    segment: padlet?.segment ?? Segment.SIGMA,
    //@ts-ignore
    protocolIp: padlet?.interface?.protocolIp ?? ProtocolIp.DHCP,
    ieee8021x: padlet?.interface?.ieee8021x ?? Ieee8021X.MAB,
    description: padlet?.description ?? '',
    telnetPort: padlet?.telnetPort ?? '',
    firmware: padlet?.firmware ?? '',
    serialNumber: padlet?.serialNumber ?? '',
    inventoryNumber: padlet?.inventoryNumber ?? '',
    sendNotifications: padlet?.sendNotifications ?? undefined,
    controlPage: padlet?.controlPage ?? '',
    disableMonitoring: padlet?.disableMonitoring ?? false,
  };

  const methods = useForm({
    mode: 'onBlur',
    reValidateMode: 'onChange',
    resolver: yupResolver(padletUpdateSchema),
    defaultValues,
  });

  const onDrawerClose = (): void => {
    methods.reset(defaultValues);
    setModel?.(null);
  };

  useEffect(() => {
    if (padlet?.model) {
      setModel(padlet.model);
    }
  }, [padlet]);

  const handleClearModel = () => {
    methods.setValue('modelId', '');
    methods.setValue('manufacturerName', '');
    methods.setValue('typeName', '');
    methods.setValue('hasSipUri', null);
  };

  useEffect(() => {
    if (model) {
      methods.setValue('manufacturerName', model?.manufacturer?.name);
      methods.setValue('typeName', model?.type?.name);
      methods.setValue('hasSipUri', model.type?.hasSipUri);
    }
  }, [model]);

  useEffect(() => {
    methods.reset(defaultValues);
  }, [padlet]);

  const submitHandler: SubmitHandler<PadletUpdateFormData> = (values) => {
    updateNetworkDevice(values as PadletCreateFormData);
  };

  const updateNetworkDevice = async (values: PadletCreateFormData) => {
    if (!id) {
      return;
    }

    updatePadlet(normalizeSipUriForPayload(values) as PadletCreateFormData, id);
  };

  useEffect(() => {
    if (updatePadletQueryStatus === QueryStatus.fulfilled) {
      closeDrawer(DrawerTypes.padletUpdate);
      methods.reset(defaultValues);
    }
  }, [updatePadletQueryStatus]);

  const { isValid, dirtyFields } = methods.formState;
  const isDirtyLocationId =
    locationId && locationId !== defaultValues.locationId;

  useEffect(() => {
    if (locationId) {
      methods.setValue(PADLET_UPDATE_FORM_KEY.locationId, locationId);
      methods.reset(methods.getValues());
    }
  }, [locationId]);

  const isDirtyFields = !Helpers.isEmpty(dirtyFields) || isDirtyLocationId;
  const isSaveButtonDisabled = !isDirtyFields || !isValid;

  return {
    updateDrawerLabel,
    updateLabel,
    methods,
    onDrawerClose,
    submitHandler,
    model,
    isSaveButtonDisabled,

    setModel,
    handleClearModel,
  };
};