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: '2 / 3' }, row: '3 / 4' },
  { column: { xs: '2 / 3', md: '2 / 3' }, 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>
  )
}