Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { Box, Typography } from '@mui/material';

import EmojiGroup from '@components/common/emoji-selector';

const EMOJI_PICKERS_POSITIONS = [
  { column: { xs: '1 / 3', md: '2 / 3' }, row: 'auto' },
  { column: { xs: '1 / 2', md: '1 / 2' }, row: '3 / 4' },
  { column: { xs: '2 / 3', md: '3 / 4' }, row: '3 / 4' }
];

export default function DailyLogForm({ categories, onSubmit, onSelect }) {
  const { control, watch, handleSubmit } = useForm();
  const formValues = watch();

  const submitHandler = handleSubmit(async (data) => onSubmit(data));

  useEffect(() => {
    const categoriesSelectedValues = Object.values(formValues);
    const areAllCategoriesSelected = categoriesSelectedValues.every((val) => val !== undefined);

    if (categoriesSelectedValues.length && areAllCategoriesSelected) {
      submitHandler();
    }
  }, [formValues]);

  return (
    <Box
      component='form'
      sx={{
        display: 'grid',
        gridTemplateColumns: { xs: 'repeat(2,1fr)', md: 'repeat(3,1fr)' },
        gridTemplateRows: 'repeat(3,1fr)',
        columnGap: '1rem',
        placeItems: 'center'
      }}
    >
      {categories?.map(({ uuid, name, emojis }, index) => (
        <Box
          key={uuid}
          sx={{
            gridColumn: EMOJI_PICKERS_POSITIONS[index].column,
            gridRow: EMOJI_PICKERS_POSITIONS[index].row
          }}
        >
          <Typography variant='h2' textAlign='center'>
            {name}
          </Typography>

          <Controller
            control={control}
            name={uuid}
            render={({ field: { onChange } }) => (
              <EmojiGroup>
                {emojis?.map(({ code, image }, index) => (
                  <EmojiGroup.Item
                    key={code}
                    image={image}
                    index={index}
                    onClick={(e) => {
                      e.stopPropagation();
                      onSelect(uuid, code);
                      onChange(code);
                    }}
                  />
                ))}
              </EmojiGroup>
            )}
          />
        </Box>
      ))}

      <Box
        sx={{
          gridColumn: { xs: '1 / 3', md: '2 / 3' },
          gridRow: '2 / 3'
        }}
      >
        <img src='/images/logo-app-02.png' alt='habits image' width={150} height={150} />
      </Box>
    </Box>
  );
}