'use client';

import React, { FC, useContext, useEffect, useId } from 'react';
import { Controller } from 'react-hook-form';

import { IMakeToggleProps } from '../../interfaces/make-toggle';
import { ComponentStateContext } from '../../context/component/component-state';
import useEnableIf from '../../hooks/use-enable-if';
import useRenderIf from '../../hooks/use-render-if';

const MakeToggle: FC<IMakeToggleProps> = ({
  element,
  control,
  watch,
  unregister,
}) => {
  const { Toggle } = useContext(ComponentStateContext);

  const {
    name: elementName,
    validation: { required, message, regex, ...otherValidation },
    enableIf,
    renderIf,
    ...inputProps
  } = element;

  const { checkEnable, enable, setEnable } = useEnableIf({
    elementEnableIf: enableIf,
  });
  const { checkRender, render, setRender } = useRenderIf({
    elementRenderIf: renderIf,
  });

  const elementId = useId();

  useEffect(() => {
    const { unsubscribe } = watch((formData, { name, type }) => {
      if (!name) return;

      if (enableIf) {
        checkEnable(formData, { name, type }).then((enableStatus) => {
          if (enableStatus === undefined || enableStatus === null) return;
          if (enable !== enableStatus) setEnable(enableStatus);
        });
      }

      if (renderIf) {
        checkRender(formData, { name, type }).then((renderStatus) => {
          if (renderStatus === undefined || renderStatus === null) return;

          if (render !== renderStatus) {
            if (render && !renderStatus) unregister(elementName as string);
            setRender(!!renderStatus);
          }
        });
      }
    });

    return () => unsubscribe();
  }, [watch, render, enable]);

  if (!render) return null;

  return (
    <Controller
      control={control}
      name={elementName}
      rules={{
        required: {
          value: required,
          message: message ?? '',
        },
        pattern: regex
          ? {
              value: regex,
              message: message ?? '',
            }
          : undefined,
        ...otherValidation,
      }}
      render={({
        field: { onChange, value },
        fieldState: { invalid, error },
      }) => (
        <Toggle
          {...inputProps}
          id={elementId}
          name={elementName}
          onChange={onChange}
          value={value ?? ''}
          invalid={invalid}
          error={error}
          disabled={element.disabled ?? !enable}
        />
      )}
    />
  );
};

export default MakeToggle;