Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useForm } from 'react-hook-form'
import Datetime from 'react-datetime'

import { useGoals } from '@hooks'

import Modal from '@components/UI/modal/Modal'
import Input from '@components/UI/inputs/Input'
import Ckeditor from '@components/UI/Ckeditor'
import TagsInput from '@components/UI/TagsInput'

import 'react-datetime/css/react-datetime.css'

export function GoalModal() {
  const { toggleModal, showModal, addGoal } = useGoals()
  const habits = [
    {
      value: 1,
      name: 'Ejercicio Diario'
    },
    {
      value: 2,
      name: 'Leer 1 Hora'
    },
    {
      value: 3,
      name: 'Meditar'
    }
  ]

  const {
    control,
    handleSubmit,
    setValue,
    formState: { errors }
  } = useForm({
    defaultValues: {
      title: '',
      description: '',
      value: 1,
      finishDate: Date.now(),
      habits: []
    }
  })

  const onSubmit = handleSubmit(({ goal }) => addGoal(goal))

  return (
    <Modal
      show={showModal}
      title='Propósito'
      onClose={toggleModal}
      onAccept={onSubmit}
    >
      <Input
        name='title'
        label='Titulo'
        placeholder='Define el título de tu meta'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.title?.message}
      />

      <Input
        type='number'
        name='value'
        label='Valor'
        placeholder='Define un valor a meta'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.value?.message}
      />

      <TagsInput
        name='habits'
        label='Habitos'
        suggestions={habits}
        onChange={(tags) => setValue('habits', tags)}
      />
      <Datetime
        dateFormat='DD-MM-YYYY'
        timeFormat={false}
        inputProps={{ className: 'form-control' }}
        initialValue={Date.parse(new Date())}
        closeOnSelect
      />
      <Ckeditor
        label='Descripción'
        name='description'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.description?.message}
      />
    </Modal>
  )
}