---

import { useDeviceRepository } from '@/domains/equipment/repositories/device.repository';
import { normalizeSipUriForPayload } from '@/domains/equipment/repositories/helpers/normalizeSipUriForPayload';
import { DeviceModel } from '@/shared/api/controller/client';
import { yupResolver } from '@hookform/resolvers/yup';
import { QueryStatus } from '@reduxjs/toolkit/dist/query';
import { Button, Drawer, DrawerActions } from '@shared/components';
import { useCloseDrawer } from '@shared/hooks/drawer/useCloseDrawer';
import { useSelectDrawerType } from '@shared/hooks/drawer/useSelectDrawerType';
import {
  EventActionTypes,
  useSendClickStreamEvent,
} from '@shared/hooks/useSendClickStreamEvent';
import { DrawerTypes } from '@shared/model/drawer/drawer.types';
import { useSelectActiveController } from '@shared/store/сontrollers/сontrollers.selectors';
import { useSyncControlPage } from '@widgets/Monitoring/hooks';
import { memo, useEffect, useState } from 'react';
import {
  FormProvider,
  Resolver,
  SubmitHandler,
  useForm,
} from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { CreateDeviceForm } from '../CreateDeviceForm';
import { CreateDeviceFormData } from '../model/types';
import { createDeviceFormSchema } from '../validation/validator';

export const CreateDeviceDrawer = memo(() => {
  const { t } = useTranslation('common');
  const { sendEvent } = useSendClickStreamEvent(EventActionTypes.createDevice);

  const drawerType = useSelectDrawerType();
  const isVisible = drawerType[DrawerTypes.createDevice];
  const closeDrawer = useCloseDrawer();
  const activeController = useSelectActiveController();

  const [model, setModel] = useState<DeviceModel | null>(null);

  const {
    saveDevice,
    createDeviceStatus,
    isCreateDeviceLoading,
    resetCreateDevice,
  } = useDeviceRepository();

  const defaultValues: CreateDeviceFormData = {
    name: '',
    description: '',
    ip: '',
    mac: '',
    controlPage: '',
    typeName: '',
    manufacturerName: '',
    sipUri: '',
    hasSipUri: null,
    modelId: '',
    hardwareId: '',
    type: 'ethernet',
    bidirectional: false,
    ieee8021x: 'MAB',
    protocolIp: 'dhcp',
    firmware: null,
    serialNumber: null,
    inventoryNumber: null,
    ipAvLan: '',
    localAddress: undefined,
    port: undefined,
    netInterface: false,
    netInterfaceInfo: [],
    disableMonitoring: false,
  };

  const methods = useForm<CreateDeviceFormData>({
    mode: 'onBlur',
    reValidateMode: 'onChange',
    defaultValues,
    resolver: yupResolver(
      createDeviceFormSchema,
    ) as Resolver<CreateDeviceFormData>,
  });

  useSyncControlPage(defaultValues.ip, methods);

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

      return;
    }

    methods.setValue('modelId', '');
    methods.resetField('manufacturerName');
    methods.resetField('typeName');
    methods.resetField('hasSipUri');
  }, [model]);

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

  useEffect(() => {
    if (createDeviceStatus === QueryStatus.fulfilled) {
      closeDrawer(DrawerTypes.createDevice);
      methods.reset(defaultValues);
      resetCreateDevice();
      sendEvent();
    }
  }, [createDeviceStatus]);

  const submitHandler: SubmitHandler<CreateDeviceFormData> = (values) => {
    if (activeController?.id) {
      saveDevice(normalizeSipUriForPayload(values), activeController.id);
    }
  };

  const actions: DrawerActions = {
    actionPrimary: (
      <Button
        data-fui-tid={`${DrawerTypes.createDevice}-actionPrimary`}
        onClick={methods.handleSubmit(submitHandler)}
        loading={isCreateDeviceLoading}
        disabled={!methods.formState.isValid}
      >
        {t('buttons.save')}
      </Button>
    ),
  };

  return (
    <FormProvider {...methods}>
      <Drawer
        type={DrawerTypes.createDevice}
        actions={actions}
        title={t('drawerTitle.createDevice')}
      >
        <CreateDeviceForm setModel={setModel} />
      </Drawer>
    </FormProvider>
  );
});