Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';

import { useFetchHelper } from '@hooks';

import Modal from '@app/components/UI/modal/Modal';
import TagsInput from '@app/components/UI/TagsInput';

const LanguagesModal = ({ show = false, languages: userLanguages = [], onClose, onConfirm }) => {
  const { data: languages = [] } = useFetchHelper('languages');
  const labels = useSelector(({ intl }) => intl.labels);

  const { register, watch, handleSubmit, setValue } = useForm({
    defaultValues: {
      languages: userLanguages?.map(({ value }) => value) || []
    }
  });

  const currentValues = watch('languages');

  const handleConfirm = handleSubmit((data) => onConfirm?.(data));

  useEffect(() => {
    register('languages');
  }, [register]);

  return (
    <Modal
      title={labels?.languages || 'Languages'}
      show={show}
      onClose={onClose}
      onAccept={handleConfirm}
    >
      <TagsInput
        label='Seleccionar idiomas'
        name='languages'
        options={languages}
        defaultValues={currentValues}
        onChange={(tags) => setValue('languages', tags)}
      />
    </Modal>
  );
};

export default LanguagesModal;