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>

  );

}